디렉티브란?
디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다.
기본 구조
CDN을 통해 Vue.js 스크립트를 가져오면 전역 객체 Vue를 사용할 수 있다.
createApp 속성을 통해 Vue.js 애플리케이션을 생성할 수 있고 내부에 옵션들을 정의할 수 있다.
mount 속성을 통해 html에 연결할 수 있다.
css 선택자를 사용하여 어떤 html 요소에 연결할 지 작성한다.
Vue 애플리케이션과 html이 연결돼서 생성된 인스턴스 객체를 반환한다. (view model이라고 칭함)
데이터는 data 함수 내부에 return 키워드로 정의해서 사용한다.
반응성: 데이터가 바뀌면 화면도 바뀌는 것
데이터를 렌더링 할 때는 이중 중괄호 구문 {{}} 내부에 작성한다.
app 변수를 통해 점표기법으로 데이터에 접근할 수 있는데
console에서 데이터에 값을 변경하면 화면도 같이 바뀌는 것을 볼 수 있다.
v-bind
html에 자바스크립트 문법을 바로 작성하려면해당 속성 앞에 v-bind:라는 디렉티브를 작성해야한다. (Vuejs 문법)
v-on
methods를 객체 리터럴로 선언하고 내부에 함수를 작성할 수 있다.
요소에 이벤트 핸들러를 추가하는 것은 v-on:이벤트 디렉티브를 사용하면 된다.
함수 또한 app.increase로 접근할 수 있다.
v-if
v-if 라는 디렉티브를 사용하여 데이터를 연결하면 데이터가 truthy면 해당 요소를 출력하고 falsy면 해당 요소를 출력하지 않는다.
v-for
v-for 디렉티브를 사용하면 해당 데이터를 하나씩 순회하며 반복 출력한다.
자바스크립트의 for in 문과 비슷하다.
components
컴포넌트는 재사용, 캡슐화라는 장점을 가진다.
컴포넌트를 선언할 때는 components라는 객체 리터럴을 사용한다.
선언한 컴포넌트를 html의 태그로 사용할 수 있다.
이 때 주의해야 할 점은 컴포넌트를 선언할 때는 파스칼 케이스를 사용하고 해당 컴포넌트를 html 태그로 불러올 때는 대쉬 케이스를 사용한다.
fruit-name 속성에 데이터를 할당하면 해당 데이터는 FruitItem 컴포넌트의 props의 fruitName으로 전달된다.
