指令(directive)

指令: 增強HTML功能的特殊屬性

為什麼: HTML本身是靜態的，沒有程式必須的元素: 變數、分支、迴圈

何時: 只要需要加強HTML的功能時

如何: <ANY 指令名=”值”>

指令有
v-bind: 繫結屬性:
　　如何:<ANY v-bind:屬性名=”模型變數/表示式”
　　可簡寫為: <ANY :屬性名=”模型變數/表示式”
v-on: 繫結事件處理函式
　　如何: <ANY v-on:事件名=”處理函式(引數值,…,$event)”>
　　可簡寫為:
　　<ANY @事件名=” 處理函式(引數值,…,$event)”
　　處理函式定義在:
　　new Vue({
　　el:”#app”,
　　data:{ … },
　　methods:{
　　　　處理函式(形參,…){
　　　　　　… …
　　　　　　}
　　　　}
　　})
　　獲得事件物件e: 2步:
　　<ANY @事件名=”處理函式($event)”
　　methods:{
　　　　處理函式(e){
　　　　　　e就是DOM的事件物件
　　　　}
　　}
　　事件修飾符: 代替事件物件的API
　　阻止預設行為: e.preventDefault()
　　<ANY @click.prevent=”處理函式()”
　　取消冒泡: e.stopPropagation()
　　<ANY @click.stop=”處理函式()”
v-if: 根據條件控制元素的可見不可見
　　單獨使用: 控制一個元素的可見不可見
　　如何: <ANY v-if=”條件表示式”>
　　聯合使用: v-if v-else-if v-else控制多個元素選其一顯示
v-show: 根據條件控制元素的可見不可見
　　v-show是通過display:none隱藏——效率高
　　vs v-if 是通過修改DOM樹(是否載入DOM節點)實現隱藏——效率低
　　但是，如果控制多個元素選其一顯示時，首選v-if v-else-if v-else。。。
v-for: 反覆生成多個相同結構的HTML片段
　　如何: <parent>
　　<child v-for=”(value,i) in/of 陣列”>
　　<sub>value和i可用於更子級元素的繫結
v-text 和 v-html:
　　代替{{}}繫結元素的內容:
　　如果繫結的是HTML片段: 用v-html
　　如果繫結的是純文字內容: 用v-text
v-cloak: 在Vue物件載入完之前，臨時隱藏受監視的元素
　　如何: 2步:
　　自定義選擇器屬性[v-cloak]{ display:none }
　　在要隱藏的元素上，新增v-cloak屬性:
　　<ANY v-cloak >
　　原理: 當Vue物件載入完，自動查詢v-cloak屬性移出
v-once: 僅在首次載入時，繫結一次，之後模型變數即使再變化，也不自動更新
　　原理: 一旦首次繫結結束，就從虛擬DOM中移除該元素
　　如何: <ANY v-once>繫結語法
v-pre: 保護元素內容中的{{}}不被vue編譯//用的不多~

v-model:雙向繫結

　　問題: :value的方式只能將記憶體中模型變數的值繫結到頁面，不能將頁面的修改自動同步到記憶體中的模型變數上——單向繫結
　　解決: 雙向繫結: 既能將記憶體中模型變數的值繫結到頁面，又能將頁面的修改自動同步到記憶體中的模型變數上。
　　何時: 只要繫結可修改的表單元素，都用v-model
　　如何: v-model:value=”模型變數”
　　簡寫: v-model=”模型變數”
　　原理: 所有帶v-model繫結的元素，都被加入一個監視佇列(watch)，由一個死迴圈不斷監視佇列中元素的內容變化。只要發生變化，就直接修改繫結的模型變數
　　監視函式: 只要頁面變化，就自動執行的函式

　　繫結class和style
　　可將class和style作為字串繫結
　　問題: 拼接字串很麻煩！
　　用物件繫結class和style
　　<ANY :style=”模型變數” 模型變數是一個物件
　　new Vue({
　　el:
　　data:{
　　　　模型變數:{
　　　　Css屬性:值, //不能省略單位
　　　　… : …
　　　　}
　　})
　　<ANY class=”寫死的class” :class=”模型變數” 也是物件
　　結果: class和:class最終會合併為一個class=””
　　new Vue({
　　el:
　　data:{
　　模型變數:{
　　　　“class名”:true, 表示啟用的class
　　　　“class名”:false, 表示不啟用的class
　　　　　　}　　
　　　　}
　　})