vue.js初体验

16-12-19 来源：[db:作者]

收藏我要投稿

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
  
    </head>  
  
    <body>  
        <div id="app-3">  
            <div v-for="test in tests">  
                <div @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>     
                </div>  
            </div>  
              
        </div>  
    </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:注册事件的函数

……

})

点击复制链接与好友分享!回本站首页