vue自定义指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>自定义指令</title>
    </head>
    <script type="text/javascript" src="js/vue.js" ></script>
    <body>
        <div id="div1">
            <h3 v-message>{{msg}}</h3>
            <hr>
            <button @click="change">更改</button>
            <hr>
            <span v-content:header.footer="cont">{{content}}</h3>
            <hr>
            <input type="text" v-onfocus>
        </div>
    </body>
    <script>
        Vue.directive('message',{
            bind(){
                alert('指令第一次绑定到元素上时调用，只能调用一次，可执行初始化操作');
            },
            inserted(){
                alert('被绑定元素插入到DOM中时调用');
            },
            update(){
                alert('被绑定元素所在模板更新时调用');
            },
            componentUpdated(){
                alert('被绑定元素所在模板完成一次更新周期时调用');
            },
            unbind(){
                alert('指令与元素解绑时调用，只调用一次');
            }
        })

        Vue.directive('content',{
            bind(el,binding){
                console.log(el);  //打印DOM
                el.style.color = 'red';
                console.log(binding);  //打印对象
            }
        })
        let vm = new Vue({
            el: "#div1",
            data:{
                msg:"科比：你见过凌晨四点的洛杉矶吗？",
                content:"这是内容！！！",
                cont:'内容'
            },
            methods:{
                change(){
                    this.msg = '程序员：凌晨四点还没下班...';
                }
            },
            directive:{
                //局部自定义指令
                onfocus:{
                    inserted(el){
                        el.focus();
                    }
                }
            }
            
        });
        
    

    </script>
</html>

网站名称：vue自定义指令
文章地址：https://www.cdcxhl.com/article48/jsichp.html

成都网站建设公司_创新互联，为您提供企业网站制作、自适应网站、App开发、标签优化、商城网站、网站导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容