Vue 自定义指令

by deniro

HTML

<div id="app">
    <input type="text" v-focus>
</div>

<div id="app2">
    <div v-deniro-directive:content.a.b="content"></div>
</div>

<div id="app3">
    <div v-deniro-directive2="{title:'物理学家新发现四起黑洞相撞事件',content:'物理学家探测到了它们向地球发来的引力波'}"></div>
</div>

Vue

Vue.directive('deniro-directive2', {
        bind: function (el, binding, vnode) {

            el.innerHTML =
                'title:' + binding.value.title + '<br>' +
                'content:' + binding.value.content + '<br>';
        }
    });
    var app3 = new Vue({
        el: '#app3',
        data: {
        }
    });

    Vue.directive('deniro-directive', {
        bind: function (el, binding, vnode) {
            var keys = [];
            for (var i in vnode) {
                keys.push(i);
            }

            el.innerHTML =
                'names:' + binding.name + '<br>' +
                'value:' + binding.value + '<br>' +
                'expression:' + binding.expression + '<br>' +
                'arg:' + binding.arg + '<br>' +
                'modifiers:' + JSON.stringify(binding.modifiers) + '<br>' +
                'vnode keys:' + keys.join(', ');
        }
    });
    var app2 = new Vue({
        el: '#app2',
        data: {
            content: '养生吃枸杞，选对的别选贵的！'
        }
    });


    //局部注册
    // var app = new Vue({
    //     el: '#app',
    //     directives: {
    //         focus: {
    //             //指令选项
    //         }
    //     }
    // });

    //全局注册
    Vue.directive('focus', {
        inserted: function (el) {
            el.focus();//聚焦
        }
    });

    var app = new Vue({
        el: '#app',
        data: {}
    });