Vue教程-自定义指令方法

系列文章目录

Vue教程-自定义指令方法

文章目录

  • 系列文章目录
  • 一、自定义指令总结
    • 1.1 定义语法
    • 1.2 配置对象中的3个回调
    • 1.3 命名注意事项
  • 总结


一、自定义指令总结

1.1 定义语法

  • 局部指令:
new Vue({
	directives: {
		指令名:配置对象
	}
})
// 或者
new Vue({
	directives: {
		指令名:回调函数
	}
})
  • 全局指令:
Vue.directive(指令名,配置对象)
// 或者
Vue.directive(指令名,回调函数)

1.2 配置对象中的3个回调

  • bind:指令与元素成功绑定时调用
  • inserted:指令所在元素被插入页面时调用
  • update:指令所在模板结构被重新解析时调用

目前有两个需求:

  • 需求1:定义一个v-big指令,与v-text功能类似,但是会把绑定的数值放大10倍
  • 需求2:定义一个v-fbind指令,和v-bind功能类似,但是可以让所绑定的input元素默认获取焦点;

代码如下所示:

  • 回调函数中的参数element代表绑定的真实dom元素
  • binding为绑定对象,值可以通过binding.value取得。
        directives: {
            // v-big 指令 回调函数
            big(element, binding) {
                element.innerText = binding.value*10
            },
            // v-fbind 指令 配置对象
            fbind: {
                bind(element,binding){
                    element.value = binding.value
                    console.log('bind')
                },
                inserted(element,binding) {
                    element.focus()
                    console.log('insert')
                },
                update(element, binding) {
                    element.value = binding.value
                    element.focus()
                    console.log('update')
                }
            }
        }

1.3 命名注意事项

  • 指令定义时不加v-,但是使用时需要加v-;
  • 指令名如果是多个单词,要是用kabab-case命名方式,不要用camelCase命名;

总结

以上为Vue自定义指令相关的内容

你可能感兴趣的:(Vue基础教程,vue.js,javascript,前端)