Vue自定义指令

 

<div id="app">
    <input type="text" v-focus>
    <div v-demo:foo.a.b='message'></div>
    <p v-pin:left='300'>远离direction 300px</p>
    <p v-abbreviation="'blue'">在bind和update时触发相同的行为，不关心其他钩子，此时可以使用简写形式</p>
    <！-- 传入对象字面量 -->
    <p v-literal="{a: '1', b: '2'}"></p>
</div>

// 钩子函数
// 1.bind 只调用一次，指令第一次绑定到元素时调用
// 2.inserted 被绑定的元素插入到父节点时调用
// 3.update 所在组件的VNode更新时调用，可能发生在其子组件VNode更新之前
// 4.componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用
// 5.unbind 只调用一次，指令与元素解绑时调用
// Vue.directive('focus',{
//     inserted: function(el) {
//         el.focus();
//         console.log(el, binding);
//     }
// })
Vue.directive('abbreviation', function(el ,binding){
    el.style.color = binding.value;
})
var vm = new Vue({
    el: '#app',
    data: {
        message: 'hello!',
        // blue: 'blue'
    },
    directives: {
        focus: {
            inserted: function(el, binding, vnode, oldNode) {
                el.focus();
                console.log(el, binding, vnode, oldNode);
            }
        },
        demo:{
            bind: function(el, binding, vnode, oldNode) { //除了el外,其余的参数都是可选的, el 是指令所绑定的元素
                var s = JSON.stringify;
                el.innerHTML = `
                name: ${s(binding.name)} 指令名<br>
                value: ${s(binding.value)} 指令的绑定值 v-demo='1 + 1',绑定值为2<br>
                expression: ${s(binding.expression)} 自字符串形式的指令表达式 v-demo="1 + 1", 表达式为"1 + 1"<br>
                argument: ${s(binding.arg)} 传给指令的参数，可选 v-demo:foo ,参数为foo <br>
                modifiers: ${s(binding.modifiers)} 一个包含修饰符的对象 v-demo.a.b 修饰符对象为{a:true, b:true}<br>
                vnode key: ${Object.keys(vnode).join(', ')}
                `;
            }
        },
        pin: {
            bind:function(el, binding, vnode){
                el.style.position= 'fixed';
                var s = (binding.arg == 'left' ? 'left' : 'top');
                el.style[s] = binding.value + 'px';
            }
        },
        // bind 和 update 时触发相同行为的简写形式
        abbreviation: function(el, binding) {
            el.style.color = binding.value;
        },
        literal: function(el, binding){
            console.log(binding.value.a);
            console.log(binding.value.b);
        }
    }
})