Vue自定义指令

最新推荐文章于 2022-05-17 11:05:33 发布

几何心凉

最新推荐文章于 2022-05-17 11:05:33 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/JHXL_/article/details/105261195

版权

Vue中自定义指令

vue中的指令能够提高我们的开发效率简化我们的代码但是vue中的核心代码也不是全面的所以vue为我们提供了自定义指令

指令的类别

类别	实例	说明
指令	v-pre
指令=值	v-text=“msg”	msg是data中的变量
指令：参数=值	v-bind：class=“msg”	控制元素中的属性值
指令：参数=事件处理函数	v-on：click=“newblog”	newblog是methods中的方法
指令：参数.事件修饰符/按键修饰符	v-on:click.stop=“aaa”	.stop阻止冒泡也可添加按键修饰符

指令形式不同，上面的钩子函数被调用的也不一样

自定义属性的基本语法

钩子函数

在定义自定义指令时 Vue为每个指令都提供了一下几个钩子函数（均为可选）

bind：只调用一次指令绑定到元素时调用在此可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的vnode及其子VNode 全部更新后调用
unbind：只调用一次指令与元素解绑时调用

钩子函数的参数

指令钩子函数的参数如下：

el：指令所绑定的元素可以直接操作DOM
binding：是一个对象包含如下参数：
name：指令名不包括v-前缀
value：指令绑定的值例如：v-mySum=“1+1” 绑定的值为2
oldValue：指定绑定的前一个值仅在update和componentUpdated钩子函数中用无论值改变都可用
expression：字符串形式的指令表达式例如 v-my=“1+1” 表达式为 1+1
arg：传给指令的参数例如v-on：click 参数为click
modifiers：包装修饰符的对象 v-on：click.stop 该对象的值为{stop：true}
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

案例

1. 编写页面加载文本框获取焦点的指令

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('focus',{
            inserted(el,binding){
               el.focus()
            }
        })
        const app=new Vue({
            el:'#app',
            data:{
            }
        })
    </script>

2. 根据v-text 自定义mytext

update的作用就是当在页面上更改msg值的时候回重新渲染页面

<body>
    <div id="app">
        <h1 v-mytext="msg"></h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('mytext',{
            bind(el,binding){
                el.innerText=binding.value
            },
            update(el,binding){
                el.innerText=binding.value
            }
        })
        const app=new Vue({
            el:'#app',
            data:{
                msg:'爱我中华'
            }
        })
    </script>
</body>

3. 根据v-on 自定义v-myon

<body>
    <div id="app">
        <a href="https://cn.vuejs.org/v2/guide/custom-directive.html#ad" v-my:click.prevent="haha">我是测试超链接</a>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('my', {
            bind: function (el, binding) {
                el.addEventListener(binding.arg, (e) => {
                    binding.value()
                    if (binding.modifiers.stop) {
                            e.stopPropagation()
                    }
                    if (binding.modifiers.prevent) {
                            e.preventDefault()
                    }
                })
            }
        })
        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                haha() {
                    console.log(11)
                }
            }
        })
    </script>
</body>