網(wǎng)站建設的7個基本流程新網(wǎng)站seo
自定義指令補充
- 自定義指令通過鉤子函數(shù)的形式來實現(xiàn)自定義的功能
這里是幾個常用的鉤子函數(shù)以及它的方法：
bind：只調用一次，指令第一次綁定到元素時調用，在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節(jié)點時調用
update：所在的組件的VNode更新時調用，指令的值可能發(fā)生了改變，也可能沒有。
componentUpated：指令所在組件的VNode及其子VNode 全部更新后調用
unbind：只調用一次，指令與元素解綁時調用。
自定義過濾器
過濾器用來對Vue中的屬性或者數(shù)據(jù)進行過濾，即在顯示之前進行數(shù)據(jù)處理或篩選。
過濾器可以用在兩個地方：雙花括號差值和v-bind表達式
過濾器的語法如下：
{{data|filter(參數(shù))}}
data時filter的第一個參數(shù)（隱性參數(shù)），而括號中的參數(shù)是指第二個以后的參數(shù)。
過濾器的用法如下：
//雙花括號形式
{{message|capitalize}}
//v-bind形式<div v-bind:id="rawId|formatId"></div>
- 為什么叫自定義過濾器？
因為Vue2.0以后刪除了所有內(nèi)置過濾器
自定義全局過濾器
使用全局方法Vue.filter可自定義全局過濾器。所謂全局方法就是在多個實例中都可以使用。比如，再定義一個vue實例，在這個示例掛載的元素中也可以使用。
對于過濾器執(zhí)行的函數(shù)，一般建議用箭頭函數(shù)來表示。
<body><div id="app"><h3>{{8|addZero}}</h3><h3 v-bind:id="3|addZero">1</h3></div><script>//自定義過濾器，當數(shù)字為1位數(shù)字時，在前面加個0//過濾器執(zhí)行的函數(shù)的第一個參數(shù)data就表示要過濾處理的數(shù)據(jù)，過濾器的名稱Vue.filter('addZero', (data) => {//data參數(shù)是 | 前面的數(shù)據(jù)return data < 10 ? "0" + data : data;})const vm = new Vue({el: '#app',data: {}})</script>
</body>
注意：過濾器要先定義，然后再new Vue（）實例，否則會失效且報錯（也就是過濾器要寫在new Vue（）前面）
自定義局部過濾器
局部過濾器就是寫在實例內(nèi)部，通過filter選項設置，只能應用在對應的Vue實例掛載的DOM上。
<body><div id="app"><h3>{{currentDate|filterNum(3)}}</h3><h3 v-bind:id="3|addZero">1</h3></div><script>const vm = new Vue({el: '#app',data: {currentDate: Date.now(),},filters: {//局部過濾器filterNum: (data, n) => {return data.toFixed(n)},addZero: function (data) {return data < 10 ? "0" + data : "data"}}})</script>
</body>
