美文网首页
vue-cli如何新增自定义指令?

vue-cli如何新增自定义指令?

作者: alanwhy | 来源:发表于2018-09-11 21:55 被阅读86次

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

相关文章

网友评论

      本文标题:vue-cli如何新增自定义指令?

      本文链接:https://www.haomeiwen.com/subject/tmepgftx.html