Vue.directive自定义指令

Vue自定义指令

全局api概述

  • 全局api并不在构造器里面,而是先声明全局变量或者直接在vue中定义一些新功能,VUE内置了一些全局api,说简单点就是在构造器外面用vue提供给我们的api函数来定义新的功能。

Vue.directive 指令

我们想要定义一个v-hello的指令,作用就是让文字变成绿色.

在开始之前先写一个小DEMO,页面上有一个数字是10,数字的下面有一个按钮,每次点击加1

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <span>{{message}}</span>
       <button @click="add"> 点击开始加1</button>
   </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color: "green"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })
</script>
</html>
  • 下面让我们用vue.directive来写一个
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <span v-hello="color3">{{message}}</span>
       <button @click="add"> 点击开始加1</button>
   </div>
</body>
<script>
    Vue.directive("hello",function(el,binding,vnode){
       el.style["color"]= binding.value;
    })
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color3:"red"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })
</script>
</html>
  • 这里要说明的就是指令写的是v-hello,但是我们用directive的时候前面不用加v-了,直接输入指令即可
    可以看到数字也变成绿色了,说明自定义指令也起作用了。
  • el : 指令所绑定的元素,可以用来直接操作DOM
  • binding: 一个对象,包含指令的很多信息
  • vnode: VUE编译生成的虚拟节点

自定义指令的生命周期

自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind

  • 要是想解绑这个vue可以使用
function unbind(){
  app.$destroy()
}

bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。

inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)

update: 被绑定与元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新

componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用

unbind: 只调用一次,指令月元素解绑的时候调用

见下面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <span v-hello="color3">{{message}}</span>
       <button @click="add"> 点击开始加1</button>
       <button onclick="jiebang()">解绑</button>
   </div>
</body>
<script>
    function jiebang(){
        app.$destroy();
    }
    Vue.directive("hello",{
        bind:function(el,bingind,vnode){
            el.style["color"] = bingind.value;
            console.log("1-bind");
        },
        inserted:function(){
            console.log("2-insert");
        },
        update:function(){
            console.log("3-update");
        },
        componentUpdated:function(){
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            console.log('5 - unbind');
        }
    })
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color3:"red"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })
</script>
</html>
  • 发表于 2020-09-19 11:26
  • 阅读 ( 10 )
  • 分类:前端开发

0 条评论

请先 登录 后评论
库库巴
库库巴

56 篇文章

作家榜 »

  1. 库库巴 56 文章
  2. 素质教育的漏网之鱼 39 文章
  3. 特效搬运工 31 文章
  4. 噢嚯 3 文章
  5. admin 1 文章
  6. 手机用户7182 0 文章
  7. Axizs 0 文章
  8. 哄哄 0 文章