一站式学习vue的自定义指令_vue2.6.14 element-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45158336/article/details/120764765

函数形式定义

创建一个模板需求是自定义一个vue指令类似于v-text 除此之外让绑定的数值扩大十倍

在创建的vue实例中定义指令这里面定义的big可接收两个参数element,binding

下面打印一下看一下这两个分别是什么

第一element是一个真实的dom元素我们上面写的h2标签拿到dom我们就可以干很多事情比如用style给他设置样式

第二binding总体是一个对象，对象里面的value值就是我们在实例里面data设置的值，那这时候就很容易的访问到这个实例中data里面的value了

那这时，就可以用dom操作innerText 将binding里面value值渲染到h2标签里面

注：innerText 属性表示一个节点及其后代的“渲染”文本内容

为了满足需求，只需要在后面乘以10即可

对象形式定义

这时候有这样一个需求

自定义一个指令v-fbind 功能和v-bind差不多区别是当页面加载时候，输入框自动获取焦点

我们按照之前的写法尝试一下

刷新页面加载并没有聚焦

然后我们提出猜想是不是value改变时候可以聚焦

这里写一个加一按钮改变value值测试一下

点击加一果然聚焦到了输入框

显然这样并不能满足我们的需求我们要求的是在载入页面时候自动聚焦

这里就引出了第二种定义方法对象定义

注：.配置对象中常⽤的三个回掉函数

1）bind：在指令和元素绑定成功时调⽤

2）inserted：指令所在元素被插⼊⻚⾯时调⽤

3）update：指令所在模版被重新解析时调⽤

这样即可实现需求

全局定义

刚刚的局部定义因为el绑定的是app 所以在其他组件是用不了的

如果在任意组件都想使用自定义指令可以选择全局定义

这里不能忘记还要创建一个app2实例

下面看一下结果

最后上一下全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!-- cdn引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 自定义一个指令v-big让数据扩大十倍 -->
        <h2 v-big='n'></h2>
        <h2 v-small='n'></h2>
        <button @click='add'>加一</button>
        <input type="text" v-fbind:value='n'>
    </div>
    <div id="app2">
        <h2 v-small='x'></h2>
    </div>
</body>
<script>
    //Vue.directive(指令名，配置对象（或者回掉函数）)  道理一样 改变的只是写法
    Vue.directive('small',
        function (e, b) {
            e.innerText = b.value / 10
        })
    new Vue({
        el: '#app2',
        data: {
            x: 8
        }
    })
    new Vue({
        el: '#app',
        data: {
            n: 1
        },
        //以下是 局部定义----函数定义写法  
        directives: {
            //这里可接收两个参数element,binding
            big(element, binding) {
                // console.log(element, binding);
                element.innerText = binding.value * 10
            },
            //这里element,binding简写成e,b了 名字可以随意起
            // fbind(e, b) {
            //     //先给输入框传个值
            //     e.value = b.value
            //     e.focus()
            // }
            fbind: {
                //当指令和元素绑定的时候执行
                bind(e, b) {
                    // console.log('bind');
                    e.value = b.value
                },
                //元素插入页面的时候
                inserted(e, b) {
                    // console.log('inserted');
                    e.focus()
                },
                update(e, b) {
                    // console.log('update');
                    e.focus()
                    e.value = b.value
                }
            }
        },
        methods: {
            add() {
                this.n++
            }
        },
    })
</script>

</html>