指令用在我們的html中檐盟。
指令 (Directives) 是帶有?v-?前綴的特殊特性。指令特性的值預(yù)期是單個 JavaScript 表達式?(v-for?是例外情況押桃，稍后我們再討論)葵萎。指令的職責是，當表達式的值改變時唱凯，將其產(chǎn)生的連帶影響羡忘，響應(yīng)式地作用于 DOM。
v-if指令：
用來判斷是否加載html的DOM
根據(jù)表達式的值的真假條件渲染元素磕昼。在切換時元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建卷雕。如果元素是?<template>?，將提出它的內(nèi)容作為條件塊票从。
當條件變化時該指令觸發(fā)過渡效果漫雕。
當和?v-if?一起使用時，v-for?的優(yōu)先級比?v-if?更高峰鄙。詳見列表渲染教程
v-else指令：
前一兄弟元素必須有?v-if?或?v-else-if浸间。
為?v-if?或者?v-else-if?添加“else 塊”。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else-if指令：
前一兄弟元素必須有?v-if?或?v-else-if先馆。
表示?v-if?的 “else if 塊”发框。可以鏈式調(diào)用煤墙。
<div v-if="type === 'A' ">
????A
</div>
<div v-else-if="type === 'B' ">
????B
</div>
<div v-lese>
????Not? A/B
</div>
v-show指令：
根據(jù)表達式之真假值梅惯，切換元素的?display?CSS 屬性。
當條件變化時該指令觸發(fā)過渡效果仿野。
v-for指令：
循環(huán)渲染一組data中的數(shù)組铣减，v-for 指令需要以 item in items 形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名脚作。
基于源數(shù)據(jù)多次渲染元素或模板塊葫哗。此指令之值缔刹，必須使用特定語法?alias in expression，為當前遍歷的元素提供別名：
<div v-for="item in items">
????{{item.text}}
</div>
另外也可以為數(shù)組索引指定別名 (或者用于對象的鍵)：
<div v-for="(item,index) in items"></div>
<div v-for="(val,key) in object"></div>
<div v-for="(val,name,index) in object"></div>
v-for?默認行為試著不改變整體劣针，而是替換元素校镐。迫使其重新排序的元素，需要提供一個?key?的特殊屬性：
<div v-for="item in items" :key="item.id">
????{{item.text}}
</div>
從 2.6 起捺典，v-for?也可以在實現(xiàn)了可迭代協(xié)議的值上使用鸟廓，包括原生的?Map?和?Set。不過應(yīng)該注意的是 Vue 2.x 目前并不支持可響應(yīng)的?Map?和?Set?值襟己，所以無法自動探測變更引谜。
當和?v-if?一起使用時，v-for?的優(yōu)先級比?v-if?更高擎浴。詳見列表渲染教程?? ?员咽；? ??key
v-text指令：
更新元素的?textContent。如果要更新部分的?textContent?贮预，需要使用?{{ Mustache }}?插值贝室。
<span v-text="msg"></span>
<span>{{msg}}</span>
v-html指令：
更新元素的?innerHTML?。注意：內(nèi)容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯?仿吞。如果試圖使用?v-html?組合模板档玻，可以重新考慮是否通過使用組件來替代。
在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的茫藏，因為容易導(dǎo)致?XSS 攻擊。只在可信內(nèi)容上使用?v-html霹琼，永不用在用戶提交的內(nèi)容上务傲。
在單文件組件里，scoped?的樣式不會應(yīng)用在?v-html?內(nèi)部枣申，因為那部分 HTML 沒有被 Vue 的模板編譯器處理售葡。如果你希望針對?v-html?的內(nèi)容設(shè)置帶作用域的 CSS，你可以替換為?CSS Modules?或用一個額外的全局?<style>?元素手動設(shè)置類似 BEM 的作用域策略忠藤。
<div v-html="html"></html>
v-model指令：
綁定數(shù)據(jù)源挟伙。就是把數(shù)據(jù)綁定在特定的表單元素上，可以很容易的實現(xiàn)雙向數(shù)據(jù)綁定模孩。
隨表單控件類型不同而不同尖阔。
修飾符：
.lazy?- 取代?input?監(jiān)聽?change?事件
.number?- 輸入字符串轉(zhuǎn)為有效的數(shù)字
.trim?- 輸入首尾空格過濾
在表單控件或者組件上創(chuàng)建雙向綁定。
v-bind指令：
修飾符：
.prop?- 被用于綁定 DOM 屬性 (property)榨咐。(差別在哪里介却？)
.camel?- (2.1.0+) 將 kebab-case 特性名轉(zhuǎn)換為 camelCase. (從 2.1.0 開始支持)
.sync?(2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的?v-on?偵聽器块茁。
處理HTML中的標簽屬性齿坷，用于響應(yīng)式地更新 HTML 特性
<a v-bind:href="url">...</a>
href?是參數(shù)桂肌，告知?v-bind?指令將該元素的?href?特性與表達式?url?的值綁定。
動態(tài)地綁定一個或多個特性永淌，或一個組件 prop 到表達式崎场。
在綁定?class?或?style?特性時，支持其它類型的值遂蛀，如數(shù)組或?qū)ο筇房纭？梢酝ㄟ^下面的教程鏈接查看詳情答恶。
在綁定 prop 時饺蚊，prop 必須在子組件中聲明⌒ぃ可以用修飾符指定不同的綁定類型污呼。
沒有參數(shù)時，可以綁定到一個包含鍵值對的對象包竹。注意此時?class?和?style?綁定不支持數(shù)組和對象燕酷。
示例：
<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 動態(tài)特性名 (2.6.0+) -->
<bytton v-bind:[key]="value"></button>
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- 動態(tài)特性名縮寫 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 內(nèi)聯(lián)字符串拼接 -->
<img :src=" '/path/to/images/ ' + fileName">
<!-- class 綁定 -->
<div :class="{ red : isRed }"></div>
<div :class="[classA,classB]"></div>
<div :class="[classA, {classB: isB, classC: isC}]"></div>
<!-- style 綁定 -->
<div :style="{ fontSize: size + ' px ' }"></div>
<div :style="[ styleObjectA, styleObjectB ]"></div>
<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 綁定≈芟梗“prop”必須在 my-component 中聲明苗缩。-->
<my-component:prop="someThing"></my-component>
<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg> <a :xlink:special="foo"></a></svg>
.camel?修飾符允許在使用 DOM 模板時將?v-bind?屬性名稱駝峰化，例如 SVG 的?viewBox屬性：
<svg:view-box.camel="viewBox"></svg>
在使用字符串模板或通過?vue-loader/vueify?編譯時声诸，無需使用?.camel酱讶。
v-on指令：
修飾符：
.stop?- 調(diào)用?event.stopPropagation()。
.prevent?- 調(diào)用?event.preventDefault()彼乌。
.capture?- 添加事件偵聽器時使用 capture 模式泻肯。
.self?- 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。
.{keyCode | keyAlias}?- 只當事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)慰照。
.native?- 監(jiān)聽組件根元素的原生事件灶挟。
.once?- 只觸發(fā)一次回調(diào)。
.left?- (2.2.0) 只當點擊鼠標左鍵時觸發(fā)毒租。
.right?- (2.2.0) 只當點擊鼠標右鍵時觸發(fā)稚铣。
.middle?- (2.2.0) 只當點擊鼠標中鍵時觸發(fā)。
.passive?- (2.3.0) 以?{ passive: true }?模式添加偵聽器
v-on 就是監(jiān)聽事件墅垮，可以用v-on指令監(jiān)聽DOM事件來觸發(fā)一些javascript代碼
綁定事件監(jiān)聽器惕医。事件類型由參數(shù)指定。表達式可以是一個方法的名字或一個內(nèi)聯(lián)語句噩斟，如果沒有修飾符也可以省略曹锨。
用在普通元素上時，只能監(jiān)聽原生 DOM 事件剃允。用在自定義元素組件上時沛简，也可以監(jiān)聽子組件觸發(fā)的自定義事件齐鲤。
在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)椒楣。如果使用內(nèi)聯(lián)語句给郊，語句可以訪問一個?$event?屬性：v-on:click="handle('ok', $event)"。
從?2.4.0?開始捧灰，v-on?同樣支持不帶參數(shù)綁定一個事件/監(jiān)聽器鍵值對的對象淆九。注意當使用對象語法時，是不支持任何修飾器的毛俏。
示例：
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 動態(tài)事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 內(nèi)聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 動態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為炭庙，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符煌寇，鍵代碼 --><input @keyup.13="onEnter">
<!-- 點擊回調(diào)只會觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>?
在子組件上監(jiān)聽自定義事件 (當子組件觸發(fā)“my-event”時將調(diào)用事件處理器)：
<my-component @my-event="handleThis"></my-component>
<!-- 內(nèi)聯(lián)語句 -->
<my-component?@my-event="handleThis(123, $event)"></my-component>
<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
v-slot 指令
縮寫：#
可放置在函數(shù)參數(shù)位置的 JavaScript 表達式 (在支持的環(huán)境下可使用解構(gòu))焕蹄。可選阀溶，即只需要在為插槽傳入 prop 的時候使用腻脏。
參數(shù)：插槽名 (可選，默認值是?default)
提供具名插槽或需要接收 prop 的插槽银锻。
示例：
<!-- 具名插槽 -->?
<base-layout>
????<template v-slot:header>
????????Header content
????</template>
?????Default slot content
????<template v-slot:header>
?????????Footer content
????</template>
</base-layout>
? <!-- 接收 prop 的具名插槽 -->? ? ? ? ??
<infinite-scroll>??
????<template v-slot:item="slotProps">
????????<div class="item">
????????????{{ slotProps.item.text }}
? ? ????</div>
? </template>
</infinite-scroll>
<!-- 接收 prop 的默認插槽永品，使用了解構(gòu) -->
<mouse-position v-slot="{ x, y }">
? ????Mouse position: {{ x }}, {{ y }}
</mouse-position>
v-pre指令：
在模板中跳過vue的編譯裕循，直接輸出原始值悦施。就是在標簽中加入v-pre就不會輸出vue中的data值了。
跳過這個元素和它的子元素的編譯過程船殉「瘢可以用來顯示原始 Mustache 標簽症见。跳過大量沒有指令的節(jié)點會加快編譯。
<div v-pre>{{message}}</div>
這時并不會輸出我們的message值殃饿，而是直接在網(wǎng)頁中顯示{{message}}
v-cloak指令：
這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如?[v-cloak] { display: none }?一起用時芋肠，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢乎芳。
在vue渲染完指定的整個DOM后才進行顯示。它必須和CSS樣式一起使用帖池，
[v-cloak]{
????display: none;
}
<div v-cloak>
????{{message}}
</div>
不會顯示奈惑，直到編譯結(jié)束。
v-once指令：
只渲染元素和組件一次睡汹。隨后的重新渲染肴甸，元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能囚巴。
在第一次DOM進行渲染時原在，渲染完成后視為靜態(tài)內(nèi)容友扰，跳出以后的渲染過程。
<div v-once>第一次綁定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
? ? <h1>?comment</h1>
????<p>{{msg}}</p>
</div>
<!-- 組件 --><my-componentv-once:comment="msg"> </my-component>
<!-- `v-for` 指令-->
<ul>
????<li v-for=" i in list " v-once> {{i}}</li>
</ul>
動態(tài)參數(shù)：?
從 2.6.0 開始庶柿，可以用方括號括起來的 JavaScript 表達式作為一個指令的參數(shù)：
<a v-bind:[attributeName]="url">...</a>
attributeName?會被作為一個 JavaScript 表達式進行動態(tài)求值村怪，求得的值將會作為最終的參數(shù)來使用。
例如浮庐，如果你的 Vue 實例有一個?data?屬性?attributeName甚负，其值為?"href"，那么這個綁定將等價于?v-bind:href审残。
同樣地梭域，你可以使用動態(tài)參數(shù)為一個動態(tài)的事件名綁定處理函數(shù)：
<a v-on:[eventName]="doSomething">...</a>
同樣地，當?eventName?的值為?"focus"?時搅轿，v-on:[eventName]?將等價于?v-on:focus病涨。
對動態(tài)參數(shù)表達式的約束
動態(tài)參數(shù)表達式有一些語法約束，因為某些字符介时，例如空格和引號没宾，放在 HTML 特性名里是無效的。同樣沸柔，在 DOM 中使用模板時你需要回避大寫鍵名循衰。
修飾符
修飾符 (modifier) 是以半角句號?.?指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定褐澎。例如会钝，.prevent?修飾符告訴?v-on?指令對于觸發(fā)的事件調(diào)用?event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
縮寫：
v-?前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性工三。當你在使用 Vue.js 為現(xiàn)有標簽添加動態(tài)行為 (dynamic behavior) 時迁酸，v-?前綴很有幫助，然而俭正，對于一些頻繁用到的指令來說奸鬓，就會感到使用繁瑣。同時掸读，在構(gòu)建由 Vue 管理所有模板的單頁面應(yīng)用程序 (SPA - single page application)?時串远，v-?前綴也變得沒那么重要了。因此儿惫，Vue 為?v-bind?和?v-on?這兩個最常用的指令澡罚，提供了特定簡寫：
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
