icon-rss-large

IT基础知识手册 | | 登录

订阅我们

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

Published on 2020-07-07 by lianhe

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>

Gravatar

About ghjk

Read More...
0
Comments
Leave a Comment