Vue入門文檔地址：https://cn.vuejs.org/v2/guide/syntax.html
基礎盤點：
var vm = new Vue({
el: '#example', //容器ID
data: { //data表示要綁定的數據
message: 'Hello',
firstName:'zhangsan',
lastName:'lisi',
fullName:'hahahah'
},
methods:{ //表示@click等事件觸發後所執行的方法
},
watch: { //watch屬性是一種命令是的監聽屬性 （較繁瑣一般用計算屬性可以替代）
firstName: function (val) { //這裏的val表示 firstName
this.fullName = val + ' ' + this.lastName
},
},
//notes:不同的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會重新求值。
//這就意味着只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。
computed: { //表示計算屬性，用法爲：計算後的信息: "{{ reversedMessage }}"
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
},
fullName: {
// getter 用法：vm.fullName
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter(可以賦值了)，用法：vm.fullName = 'John Doe';
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
知識點1：
Vue.js在用{{}}模板時，既提供了可以綁定簡單的屬性鍵值，又提供了完全的javaScript表達式支持：
例1：{{ ok ? 'YES' : 'NO' }}；{{ message.split('').reverse().join('') }}
例2：<div v-bind:id="'list-' + id"></div>
知識點2：指令盤點
1、v-bind:多在a標籤中使用（縮寫爲:）v-bind 指令可以用於響應式地更新 HTML 特性
例3：
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
2、v-on:綁定事件（縮寫爲@） v-on 指令，它用於監聽 DOM 事件
例4：
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
3、v-model指令 限制在<input>、<select>、<textarea>、components中使用，修飾符.lazy(取代 input 監聽 change 事件)、.number(輸入字符串轉爲有效的數字)、.trim(輸入首尾空格過濾)。它其實是一個語法糖