服務端渲染與客戶端渲染的區別
阿新 • • 發佈:2020-12-23
文章目錄
前言
除了核心功能預設的內建指令(v-model等等),vue也允許註冊自定義指令。注意,在vue2.0中,程式碼複用和抽象的主要形式是元件,但是在有些情況下,我們需要對普通的DOM元素進行底層操作,這時候就需要我們用到自定義指令。
一、註冊
全域性註冊:
Vue.directive('指令名', {
inserted: function (el) {
//指令屬性
}
});
區域性註冊:
var app = new Vue({
el: '#app',
directives: {
指令名: {
//指令屬性
}
}
});
二、屬性
自定義指令屬性
自定義指令屬性包含以下鉤子函式,它們都是可選的:
- bind:只調用一次,指令第一次繫結元素的時候呼叫,這時我們可以進行對它的一次性初始化設定。
- inserted:被繫結元素插入父節點時的呼叫。
- update:所在元件的 VNode 更新時呼叫,但是可能發生在元件的 VNode更新前,因此指令的值是不確定的,可能有也可能沒有。
- componentUpdated:指令所在元件的 VNode以及它之後的更新呼叫。
- unbind:只調用一次,指令與元素解綁時呼叫。
案例:頁面載入時元素就會獲得焦點:
程式碼如下(示例):
<div id="app">
<input type="text" v-focus>
</div>
//全域性註冊
Vue.directive('focus', {
inserted: function (el) {
el.focus();//聚焦
}
});
var app = new Vue({
el: '#app',
data: {}
});
鉤子函式引數
- el:指令繫結的元素,可直接操作DOM。
- binding:繫結物件
- name:指令名,不包括 v- 字首。
- value:指令的繫結值。
- oldValue:指令繫結的前一個值,只在update 和 componentUpdated 鉤子中使用。
- expression:字串形式的指令表示式。
- arg:傳給指令的引數。
- modifiers:一個包含修飾符的物件。
- binding:繫結物件
- vnode:編譯生成的虛擬節點。
- oldVnode:上一個虛擬節點。
三、 傳入多個值
如果指令需要多個值,那麼可以傳入一個JavaScript物件字面量;同一個特性內部,逗號隔開的多個從句被繫結為多個指令例項。
程式碼如下(示例):
<span id="app" v-myf="{ text1: 'hello', text2: 'world!'}"></span>
<!-- 開發環境版本,包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.directive('myf', function(el, binding) {
console.log(binding.value.text1);
console.log(binding.value.text2);
});
const app = new Vue({
el: '#app',
})
</script>