自定義指令
簡單寫法
v-twoAge
功能： 當前年齡翻倍
注意：指令方法名稱小寫
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自定義指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>自定義指令</h1><div><h2>年齡：<span v-text="age"></span></h2><button @click="addAge">age+1</button><h2>年齡x2：<span v-twoAge="age"></span></h2></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",age:18},methods: {addAge(){this.age++;}},directives:{/**指令函數調用時機1. 指令與元素成功綁定時（初始化）2. 指令所在的模板被重新解析時*/twoage(element,bindObj){console.log(element)console.log(bindObj)/**1. element: 是HtmlElement,dom對象2. bindObj：綁定對象 v-twoAge 指令的值、名稱等*/element.innerText = bindObj.value * 2}}});</script>
</html>- 效果
標準寫法
v-focus-input
功能： input 框內 展示當前年齡且聚焦
注意：指令方法名稱小寫或者加引號
格式：‘filterName’:{bind(e,b){},inserted(e,b)(),update(e,b){}}
bind：指令與元素成功綁定時調用inserted：指令所在元素被插入頁面時調用update：指令所在的模板被重新解析時調用
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自定義指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>自定義指令</h1><h2>年齡：<span v-text="age"></span></h2><button @click="addAge">age+1</button><h2>年齡x2：<span v-two-age="age"></span></h2><br><input type="text" v-focos-input:value="age"></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",age:18},methods: {addAge(){this.age++;}},directives:{/**指令函數調用時機1. 指令與元素成功綁定時（初始化）2. 指令所在的模板被重新解析時*/'two-age'(element,bindObj){console.log(element)console.log(bindObj)/**1. element: 是HtmlElement,dom對象2. bindObj：綁定對象 v-twoAge 指令的表達式、名稱、值等*/element.innerText = bindObj.value * 2},'focos-input':{// 指令與元素成功綁定時bind(element,bindObj){console.log("bind")element.value = bindObj.value},// 指令所在元素被插入頁面時inserted(element,bindObj){console.log("inserted")// 操作dom插入后的一些操作element.focus(); // input聚焦},// 指令所在的模板被重新解析時update(element,bindObj) {console.log('update')element.value = bindObj.valueelement.focus(); // input聚焦}},}});</script>
</html>- 效果
全局指令
格式：
- Vue.directive(‘filterName’,function(e,b){})
- Vue.directive(‘filterName’,{bind(e,b){},inserted(e,b)(),update(e,b){}})
注意：全局過濾器聲明必須在Vue實例化之前
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自定義指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>自定義指令</h1><h2>年齡：<span v-text="age"></span></h2><button @click="addAge">age+1</button><h2>年齡x2：<span v-two-age="age"></span></h2><br><input type="text" v-focos-input:value="age"></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示Vue.directive('two-age', function(element,bindObj){console.log(element)console.log(bindObj)/**1. element: 是HtmlElement,dom對象2. bindObj：綁定對象 v-twoAge 指令的表達式、名稱、值等*/element.innerText = bindObj.value * 2});Vue.directive('focos-input',{// 指令與元素成功綁定時bind(element,bindObj){console.log("bind")element.value = bindObj.value},// 指令所在元素被插入頁面時inserted(element,bindObj){console.log("inserted")// 操作dom插入后的一些操作element.focus(); // input聚焦},// 指令所在的模板被重新解析時update(element,bindObj) {console.log('updated')element.value = bindObj.valueelement.focus(); // input聚焦}});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",age:18},methods: {addAge(){this.age++;}},directives:{/**指令函數調用時機1. 指令與元素成功綁定時（初始化）2. 指令所在的模板被重新解析時*/// 'two-age'(element,bindObj){// console.log(element)// console.log(bindObj)// /**// 1. element: 是HtmlElement,dom對象// 2. bindObj：綁定對象 v-twoAge 指令的表達式、名稱、值等// */// element.innerText = bindObj.value * 2// },// 'focos-input':{// // 指令與元素成功綁定時// bind(element,bindObj){// console.log("bind")// element.value = bindObj.value// },// // 指令所在元素被插入頁面時// inserted(element,bindObj){// console.log("inserted")// // 操作dom插入后的一些操作// element.focus(); // input聚焦// },// // 指令所在的模板被重新解析時// update(element,bindObj) {// console.log('updated')// element.value = bindObj.value// element.focus(); // input聚焦// }// },}});</script>
</html>- 效果
