以下筆記皆基于 Vue 2
自定義指令
指令用于簡(jiǎn)化 DOM 操作慌烧，相當(dāng)于對(duì)基礎(chǔ) DOM 操作的一種封裝赦抖。當(dāng)我們希望使用一些內(nèi)置指令不具備的 DOM 功能時(shí)娄徊，可以進(jìn)行自定義指令設(shè)置柿汛。
自定義全局指令
自定義指令指的是可以被任意 Vue 實(shí)例或組件使用的指令趟据。以下是自定義指令的設(shè)置方式券犁，自定義指令內(nèi)鉤子函數(shù) inserted 函數(shù)可以接收當(dāng)前使用指令的元素 element ，在函數(shù)捏對(duì) element 參數(shù)進(jìn)行操作實(shí)現(xiàn)指令汹碱，也可以接收 binding 參數(shù)獲取元素綁定的相關(guān)信息粘衬，比如修飾符信息以及賦值信息。
<body>
<div id="app">
<input type="text" v-focus.a.b="100+1">
</div>
<script src="lib/vue.js"></script>
<script>
// 自定義全局指令咳促，'focus' 為指令名稱(chēng)
Vue.directive('focus', {
inserted (element, binding) {
console.log(element);
console.log(binding);
el.focus();
}
});
new Vue({
el: '#app',
data: { }
});
</script>
</body>
自定義局部指令
自定義局部指令指的是可以在當(dāng)前 Vue 實(shí)例或組件內(nèi)使用的指令稚新。
<body>
<div id="app">
<input type="text" v-focus>
</div>
<!-- app2 無(wú)法使用 v-focus -->
<div id="app2">
<input type="text" v-focus>
</div>
<script src="lib/vue.js"></script>
<script>
// 自定義局部指令
new Vue({
el: '#app',
data: {},
directives: {
focus: {
inserted (el) {
el.focus();
}
}
}
});
new Vue({
el: '#app2'
});
</script>
</body>
過(guò)濾器
過(guò)濾器用于進(jìn)行文本內(nèi)容格式化處理，通過(guò)管道符 |跪腹，在插值表達(dá)式和 v-bind 中使用褂删，過(guò)濾器內(nèi)返回的值就是最終結(jié)果，否則為空冲茸。
和自定義指令類(lèi)似屯阀，同樣分為全局過(guò)濾器和局部過(guò)濾器，局部過(guò)濾器只能在當(dāng)前 Vue 實(shí)例中使用轴术。
<body>
<div id="app">
<p v-bind:title="value | filterA">這是標(biāo)簽</p>
<p>{{ value2 | filterA }}</p>
</div>
<div id="app2">
<p>{{ value | filterA }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// 設(shè)置全局過(guò)濾器
Vue.filter('filterA', function (value) {
return value.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c',
value2: 'x-y-z'
}
});
new Vue({
el: '#app2',
data: {
value: 'q-w-e'
},
// 局部過(guò)濾器
filters: {
filterA: function (value) {
return value.split('-').join('');
}
}
})
</script>
</body>
在使用過(guò)濾器時(shí)难衰，可以將一個(gè)數(shù)據(jù)傳入到多個(gè)過(guò)濾器中進(jìn)行處理，其處理順序是從左往右依次進(jìn)行逗栽，并且一個(gè)過(guò)濾器可以傳入多個(gè)參數(shù)盖袭，傳入的第一個(gè)形參固定為使用過(guò)濾器的值，后面的形參才是自定義傳入的的參數(shù)祭陷。
<body>
<div id="app">
<p>{{ value | filterA | filterB }}</p>
<p>{{ value | filterC('lagou-', 200) }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// 去除 '-' 過(guò)濾器
Vue.filter('filterA', function (value) {
console.log(value, 'filterA');
return value.split('-').join('');
});
// 首字母大寫(xiě)過(guò)濾器
Vue.filter('filterB', function (value) {
console.log(value, 'filterB');
return value[0].toUpperCase() + value.slice(1);
})
// 傳入?yún)?shù)苍凛，去除 value 的 '-' 再拼接到第一個(gè)實(shí)參的末尾
Vue.filter('filterC', function (par1, par2, par3) {
return par2 + par1.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
});
</script>
</body>
注意：如果局部過(guò)濾器與全局過(guò)濾器重名，則會(huì)使用局部過(guò)濾器兵志，類(lèi)似于全局變量與局部變量的關(guān)系醇蝴。
計(jì)算屬性
Vue.js 的視圖不建議書(shū)寫(xiě)復(fù)雜邏輯，這樣不利于維護(hù)想罕。比如：
<div id="app">
<p>{{ Math.max.apply(null, arr) }}</p>
<p>{{ Math.max.apply(null, arr) }}</p>
<p>{{ Math.max.apply(null, arr) }}</p>
</div>
封裝函數(shù)是很好的方式悠栓，但有時(shí)重復(fù)的計(jì)算會(huì)消耗不必要的性能霉涨，而計(jì)算屬性使用時(shí)為屬性形式，訪問(wèn)時(shí)會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)函數(shù)惭适，且在視圖使用時(shí)只會(huì)計(jì)算一次結(jié)果笙瑟，計(jì)算結(jié)果放入緩存中，下次調(diào)用同樣的計(jì)算函數(shù)會(huì)直接在緩存中讀取結(jié)果癞志。
測(cè)試代碼
<body>
<div id="app">
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getResult }}</p>
<p>{{ getResult }}</p>
<p>{{ getResult }}</p>
<p>{{ getResult }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
methods: {
getSum () {
console.log('執(zhí)行了函數(shù)功能');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
},
computed: {
getResult () {
console.log('執(zhí)行了計(jì)算屬性');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
}
})
</script>
</body>
methods 與 computed 區(qū)別
- computed 具有緩存型往枷，methods 沒(méi)有。
- computed 通過(guò)屬性名訪問(wèn)凄杯，methods 需要調(diào)用错洁。
- computed 僅適用于計(jì)算操作。
計(jì)算屬性的 setter
計(jì)算屬性默認(rèn)只有 getter戒突，即被訪問(wèn)時(shí)要執(zhí)行的操作屯碴，Vue.js 也允許給計(jì)算屬性設(shè)置 setter ，即賦值時(shí)要執(zhí)行的操作膊存。
var vm = new Vue({
computed: {
getResult: {
// getter
get: function () {
// 邏輯代碼
}
// setter
set: function () {
// 邏輯代碼
}
}
}
});
偵聽(tīng)器
偵聽(tīng)器 watch 用于監(jiān)聽(tīng)數(shù)據(jù)變化并執(zhí)行指定操作导而。
new Vue({
el: '#app'
data: {
value: ''
},
watch: {
value (newValue, oldValue) {
// 邏輯代碼
}
}
});
為了監(jiān)聽(tīng)對(duì)象內(nèi)部值的變化，需要將 watch 書(shū)寫(xiě)為對(duì)象隔崎，并設(shè)置選項(xiàng) deep: true今艺，這時(shí)通過(guò) handler 設(shè)置處理函數(shù)。
new Vue({
el: '#app',
data: {
obj: {
content1: '內(nèi)容1',
content2: '內(nèi)容2'
}
},
watch: {
obj: {
deep: true,
handler (val, oldval) {
console.log(val, oldVal);
}
}
}
});
注意：
- 當(dāng)更改（非替換）數(shù)組或?qū)ο髸r(shí)仍稀，回調(diào)函數(shù)中的新值與舊值相同洼滚，因?yàn)樗鼈兊囊枚贾赶蛲粋€(gè)數(shù)組 、對(duì)象技潘。
- 數(shù)組操作不要使用索引與length遥巴，無(wú)法觸發(fā)偵聽(tīng)器函數(shù)。
Vue DevTools
Vue DevTools 是 Vue.js 官方提供的用來(lái)調(diào)試 Vue 應(yīng)用的工具享幽，為 Chrome 瀏覽器插件铲掐。
Chrome 網(wǎng)上應(yīng)用店 - 擴(kuò)展程序，沒(méi)法打開(kāi)可以先安裝【iGG谷歌訪問(wèn)助手】插件值桩。
注意：Edge 瀏覽器的插件商城是沒(méi)有 Vue DevTools 插件的摆霉，但是 Edge 也是 Chrome 內(nèi)核，所以 Edge 也可以安裝 Chrome 插件奔坟，因此可以在 Edge 上進(jìn)入 Chrome 網(wǎng)上應(yīng)用店安裝 Vue DevTools 携栋。
注意事項(xiàng)：
- 網(wǎng)頁(yè)必須應(yīng)用了 Vue.js 功能才能看到 Vue DevTools
- 網(wǎng)頁(yè)必須使用 Vue.js 而不是 Vue.min.js
- 網(wǎng)頁(yè)需要在 http 協(xié)議下打開(kāi)，而不是使用 file 協(xié)議本地打開(kāi)咳秉。
Vue.js 生命周期
Vue.js 生命周期指的是 Vue 實(shí)例的生命周期婉支，即實(shí)例從創(chuàng)建到運(yùn)行，再到銷(xiāo)毀的過(guò)程澜建，通過(guò)設(shè)置生命周期函數(shù)向挖，可以在生命周期的特定階段執(zhí)行功能蝌以，而生命周期函數(shù)也稱(chēng)為生命周期鉤子。
Vue 實(shí)例 — Vue.js (vuejs.org)
-
創(chuàng)建階段（特點(diǎn)：每個(gè)實(shí)例只能執(zhí)行一次）
- beforeCreate：實(shí)例初始化之前調(diào)用何之。
- created： 實(shí)例創(chuàng)建后調(diào)用跟畅。
- beforeMount：實(shí)例掛載之前調(diào)用。
- mounted： 實(shí)例掛載完畢溶推。
-
運(yùn)行階段（特點(diǎn)：按需調(diào)用）
- beforeUpdate：數(shù)據(jù)更新后徊件，視圖更新前調(diào)用。
- updated： 視圖更新后調(diào)用悼潭。
-
銷(xiāo)毀階段（特點(diǎn)：每個(gè)實(shí)例只能執(zhí)行一次）
- beforeDestroy：實(shí)例銷(xiāo)毀之前調(diào)用庇忌。
- destroyed： 實(shí)例銷(xiāo)毀后調(diào)用。
