首页 > 程序开发 > web前端 > JavaScript >

vue.js初体验

2016-12-19

vue js初体验

<!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: &#39;#app-3&#39;,  
            data: {  
                test:{//数据对象  
                    id:null,  
                    name:&#39;&#39;  
                },  
                tests:[{ //数据对象数组  
                    id:1,  
                    name:&#39;zs&#39;  
                },  
                {  
                    id:2,  
                    name:&#39;ls&#39;  
                },{  
                    id:3,  
                    name:&#39;ww&#39;  
                },{  
                    id:4,  
                    name:&#39;zl&#39;  
                },{  
                    id:5,  
                    name:&#39;yc&#39;  
                },{  
                    id:6,  
                    name:&#39;ld&#39;  
                },{  
                    id:7,  
                    name:&#39;aw&#39;  
                }]  
            },  
            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:注册事件的函数

……

})

相关文章
最新文章
热点推荐