【vue自定义指令】

最新推荐文章于 2024-10-05 01:22:45 发布

柒一’

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量50

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67969470/article/details/127780816

版权

自定义指令

第一个参数：指令的名字定义时不加 v- 使用时加上 v-
第二个参数：对象

<body>
    <div id="app">
        <div v-color="color">今天真开心</div>
    </div>
</body>
<script>
    // 全局
    Vue.directive('color', {
        // bind 只调用一次，指令第一次绑定元素时调用。在这里可以进行一次性的初识设置
        // el：当前的DOM元素  binding
        bind(el, binding) {
            // el.style.color='red'
            el.style.color = binding.value
            // el.focus()
        },
        // inserted 这个元素已经渲染到界面上之后执行
        inserted(el) {
            el.focus()
        },
        // update 当元素有更新的时候执行
        update(el){
        }
    })
    let vm = new Vue({
        el: '#app',
        data: {
            color: 'red',
            value: ''
        },
        methods:{

        },
        // 私有定义
        // directives:{
            // color(el,binding){
            //     console.log(el);
            //     console.log(binding);
            //     el.style.color=binding.value
            // },
            // color:{
            //     inserted(el){
            //         el.focus()
            //     },
            //     bind(el,binding){
            //         el.style.color = binding.value
            //     },
            //     updateed(){
                    
            //     }
            // }
        // }
    })