네.Vue 2.0의 Getting Started를 만듭니다.
후기: 특별히 2.0을 겨냥한 내용은 아니다.2.0의 학습이 될 수 없다.
이번에는 jsFiddle을 사용합니다.JSFiddle Hello World example 이미 준비가 되어 있으며 로그인 후 왼쪽 상단에 있는 포크를 눌러 초기 형태로 사용합니다.

Declarative Rendering

우선 첫 번째 샘플입니다.

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

출력

Hello Vue.js!

우선 기본.

el 속성으로 바인딩된 DOM 요소 지정

{{ message }}에 Vue 객체의 데이터 표시(텍스트 노드에 데이터 바인딩)

메시지 값을 변경할 때 표시도 변경

setInterval(function(){
  app.message = new Date();
}, 1000);

Text Interpolation

다음은 DOM 요소 속성에 데이터를 바인딩하는 예입니다.도구 설명의 제목 속성을 메시지와 연결합니다.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
})

마우스 전환을 클릭하면 다음과 같은 툴팁이 표시됩니다.

v-bind: 속성 이름 ='데이터 이름'으로 귀속

v-로 시작하는 속성은 Vue의 속성

Conditionals

조건문

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

출력

Now you see me

v-if의 값이 진짜라면 DOM 요소

를 출력합니다

seen이 가짜라면 DOM 요소 삭제

DOM 패브릭에 데이터를 바인딩할 수 있음

setInterval(function(){
  app3.seen = !app3.seen;
}, 1000);

새로운 기능의 Transition 태그를 사용하여 둘러싸고 삭제할 때 CSS 애니메이션용 CSS 카테고리가 자동으로 적용됩니다.( 디테일 )
https://jsfiddle.net/kzqooq/625m413h/3/

Loop

이어서 순환이다.2.0달러 index가 폐지되는 등 방법이 바뀐 것 같지만, 이 샘플은 모르겠다.

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

출력

1. Learn JavaScript
2. Learn Vue
3. Build something awesome

목록 항목의 DOM 요소만 v-for에서 출력합니다.

목록에 항목을 추가하면 디스플레이도 증가합니다.

setInterval(function(){
  i += 1;
  app4.todos.push({ text: "New " + i });
}, 1000);

Handling User Input

Input 이벤트 및 Vue 객체 메서드의 바인딩입니다.

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">
    Reverse Message
  </button>
</div>

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

클릭하기 전

클릭 후(reverseMessage 실행)

v-on: 이벤트 명칭 = "방법명칭"귀속

Two-way binding

Vue 객체의 데이터와 Input 값을 두 방향으로 바인딩합니다.Input 값을 변경하면 데이터도 변경됩니다.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

입력 값에 따라 데이터 변경

v-model을 통해 귀속할 데이터를 지정

Component

구성 요소간단히 말해 새로운 HTML 태그를 직접 만들 수 있습니다.
todo-item 탭의 정의

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

props에서 탭 속성으로 정의된 todo를 가지고 있습니다.

속성에서 호출 측에서 값을 설정하여 구성 요소에 전달합니다.

템플릿에서 정의된 속성을 사용할 수 있습니다.

템플릿의 내용으로 직접 만든 라벨을 바꿉니다.

구성 요소 활용

<div id="app-7">
  <ol>
    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
  </ol>
</div>

var app7 = new Vue({
  el: '#app-7',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

v-bind: 속성 이름으로 값을 구성 요소에 전달합니다.

큰 부품을 작은 부품으로 조립해서 만들어라

그게 다야.2.0 특별화된 콘텐츠도 아니다.