vue常用系統指令
1、插值表達式
2、v-text：可以將一段文本渲染到指定的元素中。
3、v-html：插值表達式和v-text會將數據解釋爲純文本，而非html。爲了輸出真正的html，需要使用v-html指令。
4、v-bind：可以給html元素或者組件動態綁定一個或者多個特性，例如：動態綁定style和class
5、v-for：循環
6、v-model：在表單控件或者組件上穿件雙向綁定。
v-model僅能在如下元素中使用：input、select、textarea、component（vue中的組件）
7、v-on：綁定時間監聽，表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略，
用在普通的html元素上時，只能監聽原生DOM事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。
常用事件：
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....
按鍵修飾符：觸發想keydowm這樣的按鍵事件時，可以使用按鍵修飾符指定按下特殊的鍵後才觸發事件。
事件修飾符：
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent只會阻止對元素自身的點擊。
8、v-if： 1、作用：根據表達式的值的真假條件來決定是否渲染元素，如果條件爲false不渲染（達到隱藏元素的目的），爲true則渲染。在切換時元素及它的數據綁定被銷燬並重建。
v-show：根據表達式的真假值，切換元素的 display CSS 屬性，如果爲false，則在元素上添加 display:none來隱藏元素，否則移除display:none實現顯示元素
v-if和v-show的總結：
v-if和v-show 都能夠實現對一個元素的隱藏和顯示操作,但是v-if是將這個元素添加或者移除到dom中，而v-show
是在這個元素上添加 style="display:none"和移除它來控制元素的顯示和隱藏的
9、v-cloak：v-cloak指令保持在元素上直到關聯實例結束編譯後自動移除，v-cloak和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢。
通常用來防止{{}}表達式閃爍問題
<span v-cloak>{{msg}}</span>
new Vue({
data:{
msg:'hello ivan'
}
})
輸入框自動聚焦：（實現這個需求有三種方式）：
1、原生js操作DOM實現
可以使用document.getElementById()獲取到文本框元素對象後調用其focus()方法和設置style屬性。
// html代碼
編號:<input type="text" v-model="product.id" id="id">
// vue對象mounted(){}中代碼
mounted(){
document.getElementById('id').focus();
document.getElementById('id').style="color:red";
}
2、ref方式實現
可以在文本框元素上增加一個ref=“自定義名稱”，再使用this.$refs.自定義名稱.focus()和this.$refs.自定義名稱.style="color:red"設置style屬性。
// html代碼：
編號:<input type="text" v-model="product.id" ref="id">
// vue對象mounted(){}中代碼
mounted(){
this.$refs.id.focus();
this.$refs.id.style="color:red";
}
3、使用自定義指令
利用Vue.directive('指令id'，{inserted：function（el，binding）{}})
1、定義指令color
Vue.directive('color',{
inserted:function(el,binding){
//將顏色設置給使用v-color指令的元素上
el.style.color=binding.value;
}
});
過濾器
私有過濾器定義方式：new Vue（{filters：{ }}）中的filters中註冊一個私有過濾器。
全局過濾器定義方式：
Vue.filter('過濾器名稱'，function（管道符號|左邊參數的值，其他參數1，其他參數2，...）{
return 對管道符號|左邊參數的值做處理以後的值
})
計算屬性：
計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會重新求值。