0
点赞
收藏
分享

微信扫一扫

【Vue2.0学习】—自定义指令(四十九)


【Vue2.0学习】—自定义指令(四十九)

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

【Vue2.0学习】—自定义指令(四十九)_学习_02


配置对象中的三个回调:

【Vue2.0学习】—自定义指令(四十九)_javascript_03


举报

相关推荐

0 条评论