关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

Vue全局自定义指令与局部自定义指令directive

发布2022-05-12 浏览1358次

详情内容

本文介绍下Vue如何自定义全局指令与局部自定义指令directive的具体用法和实现。

一、钩子函数

先来看一个场景,有一个input框,我们想让页面加载完成后,给输入框自动获得焦点,那应该怎么做呢?

其实很简单,现在让我们用全局自定义指令来实现这个功能:

<body>
    <div id="app">
        <input v-focus />
    </div>
    <script>
        // 注册一个全局自定义指令 `v-focus`
        //参数1:指令的名称,在调用的时候,必须在指令名称前添加"v-"
        //参数2:是一个对象,包含指令相关的函数
        Vue.directive('focus', {
            // 当被绑定的元素插入到 DOM 中时调用
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
        })
    </script>
</body>


我们先用 Vue.directive('focus', {...}) 注册一个全局自定义指令,然后给input框添加 <input v-focus />,即可实现自动获得焦点。

注意:指令名称不能包含大写字母!

我们也可以用局部自定义指令来实现上述功能:

<body>
    <div id="app">
        <input v-focus />
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
            },
            // 注册一个局部自定义指令 `v-focus`
            directives: {
                focus: {
                    inserted: function (el) {
                        // 聚焦元素
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>


上面例子中,inserted 就是一个钩子函数。一个指令定义对象可以提供如下几个钩子函数 (均为可选):

1、bind:只调用一次,指令第一次绑定到元素时调用。和样式相关的操作可以用 bind。

2、inserted:元素插入父节点时调用。和js行为有关的操作,最好用 inserted。

3、update:更新时调用。

4、componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5、unbind:只调用一次,指令与元素解绑时调用。

 

二、钩子函数的参数

下面再来写个例子,实现输入框输入的颜色值是红色的:

<body>
    <div id="app">
        <input v-color />
    </div>
    <script>
        Vue.directive('color', {
            bind: function (el) {
                el.style.color='red';
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
        })
    </script>
</body>


1、如果想给v-color传参的方式设置颜色,可以改成下面这样:

<body>
    <div id="app">
        <input v-color="'blue'" />
    </div>
    <script>
        Vue.directive('color', {
            bind: function (el, binding) {
                el.style.color = binding.value;
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
        })
    </script>
</body>


注意:上面的blue一定要单引号再包一层,不然它就会取data中的blue值。传参通过  binding.value 来获取值。

指令钩子函数会被传入以下参数:

A、el :指令所绑定的元素,可以用来直接操作 DOM 。

B、binding :一个对象,包含以下属性:name:指令名,不包括 v- 前缀。value:指令的绑定值。

 

2、如果指令需要传多个参数,可以传入一个 JavaScript 对象字面量。

<div v-demo="{ color: 'white', text: 'hello!' }">123</div>


Vue.directive('demo', function (el, binding) {
    console.log(binding.value.color); // => "white"
    console.log(binding.value.text);  // => "hello!"
})


 

三、函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。所以上面的color指令可以修改成下面这种:

Vue.directive('color', function (el, binding) {
    el.style.color = binding.value;
})


此时这个function 代表写到了bind 和 update 函数中去。

 

 

点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载