目錄
1、指令及其語法
Vue 模板語法中的 v-text、v-html、v-pre 都是指令，它起到一種命令或指示的效果，語法 如下：
v-指令名：參數 = 值 如： v-on:click="add"，如果值裏沒有特殊字符，則可以不加引號。
補充：有些指令沒有參數和值，如 v-pre ，有些指令沒有值，如 v-on:click.prevent 。
2、指令的修飾符
指令的語法是：v-指令名：參數 = 值 。有時候你會看到指令後面會加 .修飾符 字樣，有的指令支持修飾符，它們的功能各種各樣，但其主要是起到修飾指令的功能。
<div @click.stop="add"> 添加 </div> <!-- 表示阻止事件傳播/冒泡 -->
<a @click.prevent="add"> 添加 </a> <!-- 表示阻止默認動作 -->
<div @click.stop.prevent="add"> 添加 </div> <!-- 同時表示兩種意思 -->
3、都有哪些指令修飾符
- v-on 支持的有：.{keycode|keyAlias} .stop .prevent .capture .self .once .passive .native
<input @keypress.13="fun"/> <!-- func函數可接收event參數--> <input @keypress.enter="fun"/> - 快捷鍵相關：.ctrl .alt .shift .meta .exact
- 鼠標相關：.left .right .middle
- v-bind 支持的有：.prop .camel .sync
- v-model 支持的有：.lazy .number .trim
以上修飾符的完整講解，可參考 Vue 官方文檔，上述黑色字體的修飾符的可以僅作爲了解。
4、深入理解 .sync 指令修飾符
在說 vue 的 .sync 指令修飾符前，我們先看下官方文檔：vue.sync 修飾符，裏面說 vue.sync 修飾符以前存在於 vue1.0 版本里，後在 2.0 中被移除了。但是在 2.0 發佈之後的實際應用中，我們發現 .sync 還是有其適用之處，比如在開發可複用的組件庫時。我們需要做的只是讓子組件改變父組件狀態的代碼更容易被區分。從 2.3.0 起 Vue 重新引入了 sync 修飾符，但是這次它只是作爲一個編譯時的 語法糖 存在。它會被擴展爲一個自動更新父組件屬性的v-on 監聽器，以更方便父子組件間的雙向綁定。
.sync 指令修飾符主要在父子組件傳值是時候使用，子組件通過 props 屬性接收父組件傳遞過來的值，但是子組件並不能直接對 props 屬性做修改，而是需要觸發一個事件，讓父組件進行修改。之所以需要這樣，理論上的原因是，該 props 屬性即存在父組件又存在子組件中，如果子組件擅自修改 props 中的屬性，父組件並不能監聽到該數據的修改，從而會出現一些問題。示例代碼如下：
<div id="app">
<div>{{bar}}</div>
<my-comp :foo.sync="bar"></my-comp>
<!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
Vue.component('my-comp', {
template: '<div @click="increment">點我+1</div>',
data: function() {
return {copyFoo: this.foo}
},
props: ['foo'],
methods: {
increment: function() {
this.$emit('update:foo', ++this.copyFoo); //通過$emit向父組件傳值
}
}
});
new Vue({
el: '#app',
data: {bar: 0}
});
</script>
<my-comp :foo.sync="bar"></my-comp> <!-- 會被擴展成：-->
<comp :foo="bar" @update:foo="val => bar = val"></comp> <!-- .sync就是一個語法糖 -->