vue.js初體驗

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
  
    </head>  
  
    <body>  
        <p id="app-3">  
            <p v-for="test in tests">  
                <p @click="fu">  
                <p v-bind:data-id ="test.id" v-on:click="xq" v-if="test.id%2==0">id:{{test.id}}  name:{{test.name}}</p>     
                </p>  
            </p>  
              
        </p>  
    </body>  
    <script src="js/vue.js"></script>  
    <script>  
        var app3 = new Vue({  
            el: '#app-3',  
            data: {  
                test:{//數據對象  
                    id:null,  
                    name:''  
                },  
                tests:[{ //數據對象數組  
                    id:1,  
                    name:'zs'  
                },  
                {  
                    id:2,  
                    name:'ls'  
                },{  
                    id:3,  
                    name:'ww'  
                },{  
                    id:4,  
                    name:'zl'  
                },{  
                    id:5,  
                    name:'yc'  
                },{  
                    id:6,  
                    name:'ld'  
                },{  
                    id:7,  
                    name:'aw'  
                }]  
            },  
            methods:{//方法  
                xq:function(e){//子標簽方法  
                    alert(e.target.dataset.id);  
                      e.stopPropagation();//阻止事件冒泡  
                },  
                fu:function(){//父標簽方法  
                    alert(1);  
                }  
            }  
              
        })  
    </script>  
  
</html>

標簽解釋:

@click 同等於 v-on:click 註冊事件

v-bind:標簽屬性

v-for="data in datas" 遍歷數據數組

v-if邏輯判斷,支持簡單的判定語句。當結果為true時顯示本條標簽否則不顯示

{{}}數據顯示域

new Vue({

el:操作對象css選擇器,

data:數據,

methods:註冊事件的函數

……

})

發佈留言