vue中指令写了一个demo

最新推荐文章于 2023-02-26 14:11:46 发布

weixin_30376323

最新推荐文章于 2023-02-26 14:11:46 发布

阅读量94

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhujiasheng/p/8350595.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <link rel="stylesheet" href="vlib/css/index.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        a{text-decoration:none;}
    </style>
</head>
<body>
    <script src="vlib/vue.js"></script>
    <script src="vlib/index.js"></script>
    <div id="app">
        <component-child v-if="list" :mess="list"></component-child>
        <div>
            <button @click="myupdate">更新</button>
            <button @click="mydel">卸载</button>
            <button @click="myinstall">安装</button>
        </div>
    </div>
    <script>
        Vue.directive('limitStr',{
            bind:function(el,binding,vcode){
                console.log('limitStr'+1);
            },
            inserted:function(el,binding,vcode){
                console.log('limitStr'+2);
            },
            update:function(el,binding,vcode){
                console.log('limitStr'+3);
            },
            componentUpdated:function(el,binding,vcode){
                console.log('limitStr'+4);
            },
            unbind:function(el,binding,vcode){
                console.log('limitStr'+5);
            }
        })

        var componentChild = {
            template:'<div>\
                {{messval}}\
                <input type="text" :value="mess" v-limit-str>\
                </div>',
            data: function(){
              return {
                  messval:this.mess
              }
            },
            props:{
              mess:{
                  type:String,
                  default:''
              }
            },
            methods:{
                getVal:function(e){
                    this.messval = e.target.value
                }
            }
        }

        new Vue({
            el:'#app',
            data:{
                list:'hello word!!!'
            },
            components:{
                componentChild:componentChild
            },
            methods:{
                myupdate:function(){//更新
                    this.list = '更新了！！123'
                },
                mydel:function(){//卸载
                    this.list = '';
                },    
                myinstall:function(){//安装
                    this.list = 'china!!!';
                }
            }
        })
    </script>
</body>
</html>