數學建模-優劣距離法
需求1:定義一個v-big指令,和v-text功能類似,但會把繫結的數值放大10倍。
需求2:定義一個v-fbind指令,和v-bind功能類似,但可以讓其所繫結的input元素預設獲取焦點。
自定義指令總結:
一、定義語法:
(1).區域性指令:
new Vue({ new Vue({
directives:{指令名:配置物件} 或 directives{指令名:回撥函式}
}) })
(2).全域性指令:
Vue.directive(指令名,配置物件) 或 Vue.directive(指令名,回撥函式)
二、配置物件中常用的3個回撥:
(1).bind:指令與元素成功繫結時呼叫。
(2).inserted:指令所在元素被插入頁面時呼叫。
(3).update:指令所在模板結構被重新解析時呼叫。
三、備註:
1.指令定義時不加v-,但使用時要加v-;
2.指令名如果是多個單詞,要使用kebab-case命名方式,不要用camelCase命名。
<div id="root">
<h2>{{name}}</h2>
<h2>當前的n值是:<span v-text="n"></span> </h2>
<!-- <h2>放大10倍後的n值是:<span v-big-number="n"></span> </h2> -->
<h2>放大10倍後的n值是:<span v-big="n"></span> </h2>
<button @click="n++">點我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
new Vue({
el:'#root',
data:{
name:'尚矽谷',
n:1
},
directives:{
//big函式何時會被呼叫?1.指令與元素成功繫結時(一上來)。2.指令所在的模板被重新解析時。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此處的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令與元素成功繫結時(一上來)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入頁面時
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析時
update(element,binding){
element.value = binding.value
}
}
}
})