1.필수요소

https://kr.vuejs.org/v2/guide/

(공식 vue 가이드)

템플릿 구문을 사용.

- 선언적으로 dom에 데이터를 렌더링

<div id="app"> {{ message }} </div>

var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } })

안녕하세요 Vue!

id app 안에  {{  message }} 를 삽입

+ 응용

<div id="app-2"> <span v-bind:title="message"> 내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다! </span> </div>

var app2 = new Vue({ el: '#app-2', data: { message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다' } })

v- bind 속성으로 특수한 동작을 추가.

v-bind 속성은 디렉티브

(v- 접두사가 붙어있으면 특수 속성임, 렌더링 된 DOM에 특수한 반응형 동작을 함)

v-if, v-for (조건문, 반복문)

사용자 입력핸들링

v-on

<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">메시지 뒤집기</button> </div>

var app5 = new Vue({ el: '#app-5', data: { message: '안녕하세요! Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

이 메소드는 DOM을 건드리지 않고 앱의 상태를 업데이트 함.

v-model

양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 디렉티브

- 컴포넌트를 사용한 작성방법 -

Vue.component()

인터페이스를 컴포넌트 트리로 추상화 가능.

미치 정의된 옵션을 가진 vue 인스턴스이다.

Vue.component('todo-item', {
  // 이제 todo-item 컴포넌트는 "prop" 이라고 하는
  // 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
  // 이 prop은 todo라는 이름으로 정의했습니다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

<div id="app-7"> <ol> <!-- 이제 각 todo-item 에 todo 객체를 제공합니다. 화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. 또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨). --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div>

Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } })

dom의 props 는 v-bind:props['이름']="item"

v-bind:key = "item.id" 는 인덱스 순서

컴포넌드를 사용한 앱의 구성 모습

<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>

Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공합니다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요합니다.