【Vue2.0學習】—自定義指令（四十九）
需求：
- 需求1:定義一個v-big指令， 和v-text功能相似，但會把綁定的數值放大10倍
- 需求2:定義一個v-fbind指令，和v-bind功能相似，但可以讓其綁定的input元素預設擷取焦點
<body>
<div id="root">
<h2>目前的n的值是：
<span v-text="n"></span>
</h2>
<h2>放大10倍後的n的值是<span v-big="n"></span></h2>
<button @click="n++">點我n++</button>
<hr>
<input type="text" v-fbind:value="n">
</div>
<script>
// Vue.directive('fbind', {
// bind(element, binding) {
// element.value = binding.value
// },
// //指令所在元素被插入頁面時
// inserted(element, binding) {
// element.focus();
// },
// // 指令所在的模闆被重新解析時
// update(element, binding) {
// element.value = binding.value
// }
// })
//big函數什麼時候解析?
// 1、指令與元素成功綁定時（一上來）
//2、指令所在的模闆被重新解析時
const vm = new Vue({
el: '#root',
data: {
n: 1
},
// 函數式
directives: {
//big函數什麼時候解析?
// 1、指令與元素成功綁定時（一上來）
//2、指令所在的模闆被重新解析時
big(element, binding) {
console.log('big', this)
element.innerHTML = binding.value * 10;
},
fbind: {
//指令與元素成功綁定時
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入頁面時
inserted(element, binding) {
element.focus();
},
// 指令所在的模闆被重新解析時
update(element, binding) {
element.value = binding.value
}
}
}
})
</script>
</body> 