Vue語法筆記
選一個工作空間，新建一個vue項目：
$ vue init webpack vuedemo
$ cd vuedemo
$ npm install
運行項目：
$ npm run dev
在終端裏面輸入
cd dist
http-server -p 3000
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM：
v-on 指令綁定一個事件監聽器 縮寫【:】 v-on:click
用戶輸入,綁定數據：
v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。
綁定 DOM 元素屬性:
v-bind 縮寫：【@】
V-bind:title
v-bind:style
v-bind:href
v-bind:class
對象： v-bind:class="{ active: isActive, ‘text-dange r‘: hasError }">
數組：<div v-bind:class="[activeClass, errorClass]">
Mustache 語法
v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。
v-html 指令 為了輸出真正的 HTML
v-text 會把所有的內容當成字符串給直接輸出出來。
邏輯流轉：
v-if 條件
v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面
v-show 根據條件展示元素的選項是，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
v-if vs v-show
註：v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
v-for 循環
v-for 具有比 v-if 更高的優先級。
修飾符
過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。
組件： 非常類似於自定義元素——它是 Web 組件規範的一部分
Vue.component(‘todo-item‘, {
props: [‘todo‘],
template: ‘<li>{{ todo.text }}</li>‘
})
比較：
計算屬性 vs Methods
不同的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。 如果你不希望有緩存，請用 method 替代。
計算屬性 vs Watched 屬性
你有一些數據需要隨著其它數據變動而變動時，然而，通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調。
當你想要在數據變化響應時，執行異步操作或開銷較大的操作,需要一個自定義的 watcher
計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
<router-link :to="‘/content/‘ + i.id">
註：router-link 是 VueRouter2 “聲明式導航”的寫法，在實際轉換為 html 標簽的時候，會轉化為 <a></a>，裏面的 to 屬性，就相當於 a 的 href 屬性。
屬性必須在 data 對象上:
Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。
Vue 不允許動態添加根級響應式屬性:
Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上
Vue.$set(object, key, value)
也使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發更新。可以創建一個新的對象，讓它包含原對象的屬性和新的屬性；
例： this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
Vue語法筆記