一、Vue.js是什麼?

Vue.js是一套構建使用者介面的漸進式框架。
Vue 從根本上採用最小成本、漸進增量的設計。
Vue 的核心庫只專注於檢視層。
當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供有力驅動。

二、安裝

直接引入< script >標籤

三、宣告式渲染

Vue.js 的核心是：可以採用簡潔的模板語法來宣告式的將資料渲染為 DOM。

//  文字插值方式渲染
<div id="app">
  {{ message }}
</div>

----------

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

類似於渲染一個字串模板，但是 Vue 在背後做了大量工作。
資料和 DOM 已經被關聯在一起，所有的資料和 DOM 都是響應式的。
現在設定 app.message 的值，你將看到示例所渲染的 DOM 元素會相應地更新。

//  繫結DOM元素屬性
<div id="app-2">
  <span v-bind:title="message">
    滑鼠懸停此處幾秒，
    可以看到此處動態繫結的 title！
  </span>
 

</div>


----------


var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})

v-bind 屬性被稱為指令。指令帶有字首 v-，表示是由 Vue 提供的專用屬性。
指令會在渲染的 DOM 上產生專門的響應式行為。
該指令的作用就是：“將此元素的 title 屬性與 Vue 例項的 message 屬性保持關聯更新”。

四、條件

控制一個元素的顯示

<div id="app-3">
  <span v-if
 
="seen">現在你可以看到我</span>
</div>


----------


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

繼續在控制檯輸入 app3.seen = false，你應該會看到 span 消失。
我們不只是可以將資料繫結到文字和屬性，也可以將資料繫結到 DOM 結構。

五、迴圈

v-for 指令，可以使用陣列中的資料來展示一個專案列表

<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: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '建立激動人心的程式碼' }
    ]
  }
})

輸入 app4.todos.push({ text: ‘新的 item’ })，你會看到列表中追加了一個新的 item。

六、處理使用者輸入

為了讓使用者和你的應用程式進行互動，我/們可以使用 v-on 指令 來增加事件監聽器，觸發事件後會呼叫 Vue 例項中 methods 下定義的方法：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">翻轉 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 方法中，我們更新了應用程式的狀態，而無需觸及 DOM 。
所有的 DOM 操作都由 Vue 來處理，你所編寫的程式碼只需要關注於底層邏輯。

七、雙向繫結

v-model指令

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


----------


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

八、由元件組合而成的應用程式

元件系統是一種抽象，可以讓我們使用小型、自成體系和通常可複用的元件，把這些組合來構建大型應用程式。

註冊元件

在 Vue 中，一個元件本質上是一個被預先定義選項的 Vue 例項，在 Vue 中註冊元件很簡單：

//  定義一個被命名為 todo-item 的新元件
Vue.component('todo-item', {
  // todo-item 元件現在接受一個 "prop"，
  // 類似於一個自定義屬性。
  // 此 prop 名為 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

使用元件

<ol>
  <!-- 建立一個 todo-item 元件的例項 -->
  <todo-item></todo-item>
</ol>

使用v-bind指令將todo傳入每個重複的元件中

<div id="app-7">
  <ol>
    <!--
      現在我們為每個 todo-item 提供了 todo 物件，
      其中它的內容是動態的。
      我們還需要為每個元件提供一個 "key"，
      這將在之後詳細解釋。
    -->
    <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: '蔬菜' },
      { id: 1, text: '乳酪' },
      { id: 2, text: '其他人類食物' }
    ]
  }
})

我們已經將應用程式分為兩個更小的單位，子元件通過 props 介面，與父元件之間形成了相當合理的解耦。我們現在可以進一步對 元件進行更復雜的模板配置和邏輯方面的改進，而不會影響到父元件。