首页 > 其他 > 详细

vue学习记录(二)---自定义指令,组件

时间:2019-10-20 09:09:05      阅读:54      评论:0      收藏:0      [点我收藏+]

一、自定义指令

  1、全局自定义指令

<body>
<div id="container">
    <div v-bill="prop">{{msg}}</div>
</div>
<script src="./vue.js"></script>
<script>
    //每个钩子的参数都是 ( el、binding、vnode 和 oldVnode),名称是bill但是使用的时候需要用v-bill进行使用,如果是驼峰命名法,那么就用-进行连接
    Vue.directive(bill, {
        bind(){                                 //全局绑定元素时调用,只调用一次,如果没有调整的话,会一直保存
            console.log(bind, arguments);
        },
        inserted() {                            //被绑定元素插入父节点时调用
            console.log(inserted, arguments);
        },
        update() {                              //所在组件的 VNode 更新时调用
            console.log(update, arguments);
        },
        componentUpdated() {                    //所在组件的 VNode 更新时调用
            console.log(componentUpdate, arguments);
        },
        unbind() {                              //解绑时调用,vue实例销毁时也会被调用
            console.log(unbind, arguments);
        }
    });
    let app = new Vue({
        el: #container,
        data: {
            msg: this is test,
            prop: red
        }
    })
</script>

 

vue学习记录(二)---自定义指令,组件

原文:https://www.cnblogs.com/rickyctbu/p/11706437.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!