【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> 