TIL 72일차

◆ 단방향과 양방향 연결

1. 단방향 출력

• 데이터가 변하면 자동으로 바뀌어서 출력
• 화면에서 값을 변화시킬 방법은 없음
• 계산식도 가능

2. 양방향 연결

• Vue의 데이터를 변화시킬 수 있는 연결
• v-model 속성을 사용하여 데이터를 지정
• 입력창(input, select, textarea)에서만 사용 가능
• 한글은 IME 방식이어서 바로 반영이 안된다.
  (v-on:input="text = $event.targer.value" : 추가 입력이 필요하다.)

◆ VueJs의 데이터 설정 영역 설명

<!--
	VueJS는 Lazy loading 방식으로 제어 영역에 대한 프로그래밍 구현

	무조건 최신버전
	<script src="https://unpkg.com/vue@next"></script>
-->
<script src="https://unpkg.com/vue@3.2.36"></script>
<script>
    Vue.createApp({
    //데이터 설정 영역
    data(){
    return {
    //화면에서 사용할 데이터 선언(자바스크립트 객체 형식)

    };
    },
    //데이터 실시간 계산 영역
    //- 사용하고 싶은 변수명으로 함수를 선언
    //- 함수 내부에는 보여주고 싶은 값을 코드에 반환하도록 작성
    //- Vue에 등록한 값에 접근할 때 반드시 this를 붙여야 한다.
    //- this는 Vue 인스턴스를 말한다.
    //- 프로그램에 무리가 많이 가므로 코드가 길면 안된다.
    //- 개발자도구에서 데이터를 수정하지 못한다.
    computed:{

    },
    //메소드 영역
    //- 코드를 저장해두고 필요 시 호출할 수 있다.
    //- 필요하다면 매개변수를 설정할 수 있고, 반환값을 가질 수 있다.

    //async 함수 내에서 await 키워드를 사용하면 
    //비동기를 동기처럼 코드 작성 가능하며 실행도 마찬가지

    //...이 배열 앞에 붙으면 이를 전개 연산자(spread operator)라고 함
    methods:{

    },
    //감시 영역(watch)
    //- data의 변동사항이 생기면 자동으로 실행되는 영역
    //- computed와 유사한 역할을 수행하지만 다름
    //- computed는 새로운 값을 계산하는 용도
    //- watch는 데이터가 변했을 때 특정 코드를 실행하는 용도
    watch:{

    },
    }).mount("#app");
</script>