vue第一课

1.模板嵌套

<body>

    <div id="app">{{message}}</div>

</body>
<script type="text/javascript" src="vue.js"></script>

<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>

 

2.简单的if判断

<div id='app'>
    <div v-if='isLogin'>
        你好
    </div>
    <div v-else>
        请登录
    </div>
</div>
    
</body>
<script type="text/javascript" src="vue.js"></script>

<script>
    var app=new Vue({
        el:'#app',
        data:{
            isLogin:true
        }
    })
</script>

3.for循环

<div id="app">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="oi in students">姓名：{{oi.name}}，年龄：{{oi.age}}</li>
        </ul>
    </div>

</body>
<script type="text/javascript" src="vue.js"></script>

<script>
    var app=new Vue({
        el:'#app',
        data:{
            items:[123,231,1232,3212,3321,2133,1233],
            students:[
                {name:'a',age:'12'},
                {name:'b',age:'15'},
                {name:'c',age:'18'}
            ]
        }
    })
</script>

4.text标签与html标签

<body>

    <div id="app">
        <span v-text='text'></span>
        <span v-html='html'></span>
    </div>

</body>
<script type="text/javascript" src="vue.js"></script>

<script>
    var app=new Vue({
        el:'#app',
        data:{
            text:'我是text标签',
            html:'<h1>我是html标签，我可以写标签</h1>'
        }
    })
</script>

5.点击事件

<body>

    <div id="app">
        <span>本场比赛得分{{fenshu}}</span>
        <p>
            <button v-on:click="jia">加分</button>
            <button @click="jian">减分</button>
            <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
        </p>
        
    </div>

</body>
<script type="text/javascript" src="vue.js"></script>

<script>
    var app=new Vue({
        el:'#app',
        data:{
            fenshu:'0',
            fenshu2:'1'
        },
        //事件属性
        methods:{
            jia:function(){
                this.fenshu++
            },
            jian:function(){
                if(this.fenshu==0){
                    this.fenshu=0
                }else{
                    this.fenshu--
                }
            },
            onEnter:function(){
                this.fenshu=this.fenshu+parseInt(this.fenshu2)
            }
        }
    })
</script>

 

posted @ 2018-07-27 15:15  zrn  阅读(157)  评论(0)    收藏  举报