Vue学习笔记（一）

一

HelloWorld 工程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Your First Vue Program</title>
    <style>
        .bg{
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
</head>
<body>
<div class="bg">
    Hello,Vue!
    {{msg}}
</div>
<script>
    new Vue({
         el: '.bg',
        data:{
            msg:'Messages in Vue Para'
        }
    })
</script>
</body>
</html>

输出

Hello,Vue! Messages in Vue Para

二模板语法

<div id="app">
    Hello,App!
    {{msg}}<br>
    {{count}}<br/>
    <a v-bind:href="url">百度</a>
    <div v-html="template">

    </div>
    <button type="button" v-on:click="submit()">MyButton</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Messages in Vue Para',
            count:0,
            url:'http://www.baidu.com',
            template: '<div>Hello,Template</div>'
        },
        methods:{
            submit:function () {
                this.count++;
            }
            }

    })
</script>

输出

Vue学习笔记（一）

三监听数据

<div id="app">
    Hello,App!
    {{msg}}<br>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            msg: 'Messages in Vue Para',
        },
        watch:{
            msg:function (newVal,oldVal) {
                console.log('newval is :' + newVal);
                console.log('oldval is :'+oldVal)

            }
        }

    })
</script>

Chrome 按F12，控制台修改app.msg的值，页面渲染显示新的msg值，同时触发相关函数。

四条件渲染

<div id="app">
    <div v-if="count>0">
        判断1:大于0
    </div>
    <div v-else-if="count<0">
        判断2：小于0
    </div>
    <div v-else>
        判断3：等于0
    </div>
    Hello,App!
    {{msg}}<br>
</div>

当Vue对象中的count值变化时，会相应渲染“判断1,”或者“判断2”，“判断3”。

五。列表渲染

<div id="app">
    <div v-for="item in register_list">
        {{item.name}}
    </div>
    Hello,App!
    {{msg}}<br>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            msg: 'Messages in Vue Para',
            register_list:[
                {name:"John",
                    age: 20}
                ,{
                name:"Hans",
                    age:23
                }
            ]
        }
    })
</script>

输出

John

Hans

Hello,App! Messages in Vue Para

打的

Vue学习笔记（一）

相关推荐