[Vue.js] Vue 시작하기 (directive 정리)

첫째 날, Vue Intro

• el은 뷰 인스턴스의 속성이며 어떤 HTML 요소에 mount할 지를 결정하는 요소.

• data는 객체이며 MVVM 패턴에서 Model에 해당하는 것. 뷰인스턴스의 핵심이 된다.

• interpolation/ 보간법/ {{ }} => 인스턴스에 있는 데이터를 순수 문자열 형태로 보여줄 때 사용한다.

• methods는 함수들의 집합
• syntactic sugar => methods 안에 정의된 함수에서 : function()은 생략할 수 있다. 
• v-on: 는 ' @ '로,  v-bind: 는 ' : '로 줄여서 숏컷으로 쓰기.

• v-text="message" 와 {{ message }}는 완전히 같음. 

• v로 시작하는 요소들은 directive(디렉티브)는 엘리먼트에게 어떤한 행동을 하라고 지시하는 역할이다.  종류는 => v-text, v-if, v-for, v-bind, v-on, v-bind, v-model, v-show

   

  참고문헌 : https://vuejs.org/v2/api/#Vue-directive

API — Vue.js

 

---

[Directive 간단 정리]

 

1. v-bind는 표준 HTML 속성과 Vue 인스턴스를 연동할 때 사용한다. e.g.) <a v-bind: href .....>

2. syntactic sugar => methods 안에 정의된 : function ()을 생략할 수 있다.

3. v-bind: 는 ' : '으로, v-on: 은 '@'로 간단히 표현할 수 있다. 되도록 숏컷 사용하기.

4. v-on을 통해 이벤트리스너를 적용할 수 있다.

5. v-model은 input, select, textarea에서만. 즉, 사용자 입력이 들어가는 경우에만 가능하다. 양방향 바인딩을 통해 사용자 입력값과 data의 값을 완전히 동기화 시켜준다. cf) 단방향 바인딩도 있는데 input -> data로만 변화를 주는 흐름. 양방향은 input <-> data 상호 간 흐름.

6.  v-show VS v-if 비교 
   - v-if는 평가(t/f)가 자주 바뀌지 않을 때 유리하며 초기 렌더링 비용이 적다.- v-show는 평가(t/f)가 자주 바뀔 때 유리하며 토글 비용이 적다.

---

 

• lodash 는 자바스크립트 유틸리티 라이브러리이며 데이터를 다루기 쉽게 여러 함수를 제공한다. 특히 자바스크립트에서 배열안의 값들을 활용할 때 유용하다.

• 자바스크립트에서 정렬하는 방법 a-b

• js에서 빈 배열은 true로 평가되기 때문에 [].length를 통해 0인지 확인 가능하다.