zoukankan      html  css  js  c++  java
  • vue:自定义指令

    <div id="app">
        <div v-lang="color">{{num}}</div>
        <button @click="add">add</button>
    </div>
    Vue.directive('lang', function(el, binding){
        console.log(el);
        console.log(binding);
        el.style='color:' + binding.value;
    });
    let vm = new Vue({
        el: '#app',
        data: {
            num: 1,
            color: 'red'
        },
        methods: {
            add(){
                this.num++;
            }
        }
    });

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

    binding: 一个对象,包含指令的很多信息。

    vnode: Vue编译生成的虚拟节点。

    <div id="app">
        <div v-lang="color">{{num}}</div>
        <button @click="add">add</button>
    </div>
    
    <div><button onclick="unbind()">解绑</button></div>
    function unbind() {
        vm.$destroy();//另外起一个方法解绑
    }
    
    Vue.directive('lang', {//五个注册指令的钩子函数
        bind: function(){//被绑定
            console.log('1 - bind');
        },
        inserted: function(){//绑定到节点
            console.log('2 - inserted');
        },
        update: function(){//组件更新
            console.log('3 - update');
        },
        componentUpdated: function(){//组件更新完成
            console.log('4 - componentUpdated');
        },
        unbind: function(){//解绑
            console.log('5 - bind');
        }
    });
    
    let vm = new Vue({
        el: '#app',
        data: {
            num: 1,
            color: 'red'
        },
        methods: {
            add(){
                this.num++;
            }
        }
    });

    说明:

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

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

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

    4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

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

  • 相关阅读:
    linux内核中GNU C和标准C的区别
    linux内核中GNU C和标准C的区别
    Getting start with dbus in systemd (02)
    Getting start with dbus in systemd (01)
    Getting start with dbus in systemd (03)
    物理内存相关的三个数据结构
    数据类型对应字节数(32位,64位 int 占字节数)
    Linux kernel 内存
    共模电感的原理以及使用情况
    [原创]DC-DC输出端加电压会烧毁
  • 原文地址:https://www.cnblogs.com/samve/p/9250332.html
Copyright © 2011-2022 走看看