Vue初学-自定义指令directive

最新推荐文章于 2024-07-22 15:13:59 发布

不会写文章的猴子

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量105

点赞数

分类专栏： Vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/qq_41809137/article/details/105879828

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定义全局指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-inserhtml></p>
    </div>
    <script>
        Vue.directive("inserhtml",{
            inserted(el){
                console.log(el);
                el.innerHTML="<b>我是插入的数据</b>"
            }
        }) ;
        const vm=new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

使用Vue.directive定义全局指令，第一个参数是指令的名称，第二个参数是自定义指令的里的钩子函数。

定义局部指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-partdirective></p>
    </div>
    <script>
        const vm=new Vue({
            el:"#app",
            directives: {
                "partdirective":{
                    bind(el,binding) {
                        console.log(el);
                        console.log(binding);
                    },
                    inserted(el){
                        console.log("我是插入的数据");
                    }
                }
            }
        })
    </script>
</body>
</html>

局部自定义指令需要定义到directives对象中。
自定义指令的常用钩子函数

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
unbind: 只调用一次，指令与元素解绑时调用。
-自定义指令的钩子函数的常用参数
el: 指令所绑定的dom元素
binding: 得到自定义指令的信息

需要特别注意的是：自定义指令的名称一定不能有大写。

不会写文章的猴子

关注

0
点赞
踩
0

收藏

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

定义全局指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...
复制链接

扫一扫

专栏目录