Vue入門--基礎部分
一、初識Vue
- 使用雙大括號{{message}}將數據渲染進DOM中。
可以使用app.message對渲染後的數據進行修改。
- Vue常用的指令：
1）v-bind 用來綁定常用屬性
主要用法：直接在html標簽上添加v-bind:屬性名=”vue實例中的message”
2）v-if 條件
主要用法：直接在html標簽上添加v-if=”vue實例中的某個屬性名”，這個屬性對應的屬性值應該是布爾值
3）v-for 可以綁定數組的數據來渲染一個列表
主要用法：實例的data對象中添加一個對象，其中的一項的屬性名如todos，它的值是個數據數組，在html中要循環的元素上添加v-for=”任意名如todo in todos”，然後通過雙花括號取到todos中每一條數據的某個字段值{{todo.text}}
通過app4.todos.push({text: ‘新數據’})新增一項數據
4）v-on 綁定事件，並調用實例中的方法
主要用法：在vue實例中添加methods對象，裏面定義方法如reverseMessage，在html的dom元素直接添加v-on:事件名=”該方法名”
註意：方法中的this指代vue實例
5）v-model 主要用於實現表單輸入和應用狀態之間的雙向數據綁定
主要用法：常用於input元素，添加v-model=”實例中的數據如message”，同時在另個元素中使用雙大括號加載該數據{{message}}，從而實現了input框的value值和另個元素數據的同步更新
- 組件化 類似於自定義元素
簡言之，如果html頁面中某個元素需要重復多遍，就可以把它封裝成一個組件加載。
如下例：
Vue實例的數據中有重復多個的數據json，若想在html頁面實現它，就需要考慮下將每一條數據用組件來定義。
1）定義組件的方法：
Vue.component(‘組件元素名’, {
props: [‘todo’], // 選寫。類似於自定義一個屬性，屬性名叫todo
template: ‘標簽元素’ // 必寫。決定將要采用哪個標簽，待第2）完成後將循環後的每一個item數據中的文本加載進來，形成template: ‘<li>{{ todo.text }}</li>‘
})
2）怎麽在html中使用：
直接將上面的組件元素名當作標簽使用，並使用v-for指令循環，v-bind指令綁定組件中定義的那個屬性todo，它的值為v-for中的每一項如item，v-bind還可以綁定其他屬性，如id.
二、Vue實例
- 構造器
每個Vue.js應用都是通過構造函數Vue創建一個Vue的根實例啟動的，如：
var vm = new Vue({ //選項 });
這些選項包括：https://cn.vuejs.org/v2/api/#選項-數據
1） el
2） data
3） methods
4） filters 過濾器
5） computed 計算屬性
可以對vue實例進行擴展：
- 屬性與方法
1） 每個Vue實例都會代理其data對象裏所有的屬性，如下例，換句話說vm其實就相當於實例中的data，所以能按照json方式取到data中的key和value
2） 實例屬性和方法 https://cn.vuejs.org/v2/api/#實例屬性
都有前綴$，如
- 生命周期
1） created 在實例被創建之後被調用
2） mounted updated
3） destroyed
三、模板語法
- 使用javascript表達式
而且在這種表達式下訪問不到用戶自定義的變量，只能訪問到全局變量的一個白名單，如Math和Date等。
註意：太復雜的表達式會使html模板冗余，所以一般寫成計算屬性（見第四部分）！
- 修飾符 . 指出某些指令應該以特殊方式綁定 ps: demo中的用法好像不對！！！
1）.prevent 相當於event.preventDefault()
- 過濾器
1）只能在mustache雙花括號和v-bind表達式中使用，右管道符“|”指示，用於文本轉換，其中message相當於capitalize這個過濾方法的參數。
2） 過濾器可以串聯
3） 過濾器可以傳多個參數
- 縮寫
常用的兩個：v-bind:href=”url” => :href=”url”
v-on:click=”doSth” => @click=”doSth”
四、計算屬性
- 通過選項computed添加對象，可以有多個值即計算屬性，但在一般需求下只添加一個就好了。
參見下例：
我們可以通過vm.reversedMessage獲取到計算後的message，當vm.message發生變化時，vm.reversedMessage也會隨之改變。
- 與methods對比
計算屬性基於自己的依賴進行緩存，只要message沒發生變化，多次訪問該計算屬性就會立即返回之前的計算結果，而不必再次執行函數；
而methods調用總會執行該函數。
- 與watch對比
都是用來處理某些數據隨其他數據的變動而變動的，但盡量不要濫用watch，如果代碼是命令式和重復的，先考慮下計算屬性computed，可使代碼更簡潔。
註意：需要深入學習下watch選項。
- 計算setter
計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
註：setter中的參數newValue即後面設置的vm.fullName—‘Jhon Doe’.
而且沒有上面的get方法，下面設置的fullName根本就不生效。
Vue入門--基礎部分