Skip to content

Files

Latest commit

f016dea · Jul 21, 2019

History

History
47 lines (40 loc) · 865 Bytes

vue_directive.md

File metadata and controls

47 lines (40 loc) · 865 Bytes

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

通过关键字directives

  1. 创建局部的指令
let app = new Vue({
    el: '#app',
    data: {
        name: 'hello'
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) { // inserted也是关键
                // 指令中的第一个参数是当前使用指令的DOM
                console.log(arguments);
                // 对dom进行操作
                el.style.width = '200px'
                el.style.height = '200px'
                el.style.background = '#000'
            }
        }
    }
})
  1. 全局指令
Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
  1. 指令的使用
<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>