Vue自定义命令

最新推荐文章于 2022-01-05 15:56:03 发布

马优晨

最新推荐文章于 2022-01-05 15:56:03 发布

阅读量485

点赞数

分类专栏：前端开发文章标签： Vue自定义命令 vue自定义指令 vue定义指令 vue自定义属性 vue自定义元素指令

本文链接：https://blog.csdn.net/qq_24147051/article/details/77649535

版权

前端开发专栏收录该内容

233 篇文章 27 订阅

订阅专栏

自定义指令分为两个部分：

1-元素指令
2-属性指令

元素指令相当于定义一个轻量级的组件
对于指令这里需要讲解一下钩子函数，对于Vue.js提供了几个钩子函数，这几个钩子函数之间都是可选的，相互并不制约。

钩子函数的作用就是：
将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令

钩子函数分类：
bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用

定义属性指令：

Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象

定义元素指令：

Vue.elementDirective(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象

一个自定义指令的DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>VUE测试项目</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!--HTML文件-->
<body id="example">
    <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>

<!--JS文件-->
<script>
window.onload = function(){
    Vue.directive('demo',function(value){
        console.info(value.color); //white
        console.info(value.text); // hello!
    })

    var demo = new Vue({
        el : '#demo'
    })
}
</script>
</body>
</html>