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('指令第一次綁定到元素上時調(diào)用，只能調(diào)用一次，可執(zhí)行初始化操作');
            },
            inserted(){
                alert('被綁定元素插入到DOM中時調(diào)用');
            },
            update(){
                alert('被綁定元素所在模板更新時調(diào)用');
            },
            componentUpdated(){
                alert('被綁定元素所在模板完成一次更新周期時調(diào)用');
            },
            unbind(){
                alert('指令與元素解綁時調(diào)用，只調(diào)用一次');
            }
        })

        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:"這是內(nèi)容！?。?quot;,
                cont:'內(nèi)容'
            },
            methods:{
                change(){
                    this.msg = '程序員：凌晨四點還沒下班...';
                }
            },
            directive:{
                //局部自定義指令
                onfocus:{
                    inserted(el){
                        el.focus();
                    }
                }
            }
            
        });
        
    

    </script>
</html>

網(wǎng)站名稱：vue自定義指令
文章地址：http://chinadenli.net/article48/jsichp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、自適應網(wǎng)站、App開發(fā)、標簽優(yōu)化、商城網(wǎng)站、網(wǎng)站導航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue自定義指令