Vue自定义指令

最新推荐文章于 2023-09-07 20:27:03 发布

青玄叶鹤

最新推荐文章于 2023-09-07 20:27:03 发布

阅读量93

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45678985/article/details/122148859

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue自定义指令

文章目录

- Vue自定义指令

为什么使用自定义指令

因为内置指令不满足需求
想知道内置指令可以查看这个文章

自定义全局指令

除了默认设置的核心指令,Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-demo</title>
</head>
<body>
    <div id="app">
    <!-- 元素自动获得焦点 -->
        <label>用户名：<input v-model="name" v-focus></label>
    </div>

    <script src="vue.js"></script>

    <script>
        //定义全局指令 v-focus
        Vue.directive('focus',{
            inserted(el){//el就是绑定的DOM 元素
                // console.log(el);
                el.focus() //获取焦点
                // el.blur(); //失去焦点
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                name:''
            },
            methods: {

            },
        });
    </script>
</body>
</html>

自定义局部指令

可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-demo</title>
</head>

<body>
    <div id="app">
        <div v-color="msg">带参数的指令</div>
        <label>用户名：<input v-model="name" v-focus></label> 
    </div>

    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name:'',
                msg:'red'
            },
            methods: {},
            directives: {//自定义局部指令
                focus: {
                // inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
                    inserted(el) {
                        el.focus()
                    }
                },
                color: {
                    bind(el,binding) {
                        el.style.backgroundColor=binding.value
                    }
                }
            }
        });
    </script>
</body>

</html>

inserted：就是一个钩子函数

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的表达式或变量名。
- arg: 传给指令的参数。
- modifiers: 一个包含修饰符的对象。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

带参数的自定义指令

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-demo</title>
</head>

<body>
    <div id="app">
        <div v-color="msg">带参数的指令</div>
    </div>

    <script src="vue.js"></script>

    <script>
        Vue.directive('color', {
        //el :指令所绑定的元素，可以用来直接操作 DOM 
        //binding: 一个对象
            bind(el,binding){
                // console.log(el);
                // console.log(binding,binding.value);
                //修改样式
                el.style.backgroundColor=binding.value
                el.style.fontSize='36px'
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
                msg:'red'
            },
            methods: {},
        });
    </script>
</body>

</html>

青玄叶鹤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令

Vue自定义指令文章目录Vue自定义指令为什么使用自定义指令自定义全局指令自定义局部指令钩子函数带参数的自定义指令为什么使用自定义指令因为内置指令不满足需求想知道内置指令可以查看这个文章自定义全局指令除了默认设置的核心指令,Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：<!DOCTYPE html><html lang="zh-CN"><head> <meta c
复制链接

扫一扫

专栏目录