vue中的自定義指令就是把原生的dom一些操作進行封裝。
1.函數形式
需求：我們定義一個v-mult指令，和v-text類似，但是會將綁定的值翻倍。
在vue中，用directives自定義函數，比如下面這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>當前的n值是:<span v-text="n"></span></div>
<div>翻倍后的n值是:<span v-mult="n"></span></div>
<button @click="n++">點我n+1</button>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
n:1,
},
// 自定義指令
directives:{
//函數形式
mult(element,binding){
console.log(element,binding)
//element 是真實的dom元素，bingding是綁定對象
element.innerText = binding.value *2
}
}
})
</script>
</body>
</html>
這個地方需要說明的是，打印的element和bingding
element是原生的dom元素，而bingding是綁定對象。bingding中比較重要的就是expression和value
上面代碼中的
element.innerText = binding.value *2
的含義是把綁定的值乘以2，然后賦值給當前綁定的dom元素的值。
程序運行后如下：
當指令所在模板被重新解析時，所綁定的自定義指令就會被調用。
2.對象式
需求：定義一個v-fbind指令，和v-bind功能類似，但是可以讓其所綁定的input元素默認獲取焦點。
參考代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>當前的n值是:<span v-text="n"></span></div>
<div>翻倍后的n值是:<span v-mult="n"></span></div>
<button @click="n++">點我n+1</button>
<input type="text" v-fbind:value="n">
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
n:1,
},
// 自定義指令
directives:{
//函數形式
mult(element,binding){
// console.log("element=",element)
// console.log("bingding=",binding)
//element 是真實的dom元素，bingding是綁定對象
element.innerText = binding.value *2
//什么是時候會被調用，指令所在的模板被重新解析時
},
//對象形式
fbind:{
//當指令與元素成功綁定時，執行。
bind(element,binding){
element.value= binding.value
},
//指令所在元素被插入元素時，調用
inserted(element,binding){
console.log("inserted執行")
element.focus()
},
//指令所在的模板被重新解析時，調用
update(element,binding){
console.log("update執行")
element.value= binding.value
//element.focus() //更新時，也獲取焦點
},
}
}
})
</script>
</body>
</html>
效果圖：
對象這種寫法里面有三個固定函數，bind、inserted、update函數。
bind函數表示當指令與元素成功綁定時執行。
inserted函數表示指令所在元素被插入元素時，調用。
update函數指令所在的模板被重新解析時，調用。