模板语法、条件、循环

模板语法

vue的特点就是，可以使用简洁的模板语法将数据声明似的渲染进DOM系统。
常见模板语法有：
插值：{{}}
输出html代码：v-html
绑定：v-bind（既可以绑定条件，比如满足某个条件时渲染css属性，也可以绑定属性，比如url），可简写为:，比如v-bind:href='url可以简写为:href='url'
触发事件：v-on，可以使用@简写,比如v-on:click可以简写为@click
双向数据绑定：v-model，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
过滤器：{{message|filter}}，左边值，右边过滤条件（写在methods里）,可以同时绑定多个过滤条件，使用|隔开，{{message|filter1|filter2}}
如果过滤器是多参数的，message会作为第一个参数传入。比如{{message|filter('tom',name)}},此时message会作为filter(value，value，value)的第一个参数，‘tom’是第二个参数，name为第三个参数。

示例：

<template>
    <div>
        <div v-html="massage"></div>   //v-html 输出html格式
        <input type='checkbox' v-model="selected">    //v-model 双向绑定
        <div v-bind:class="{'changeColor':selected}">点击上面按钮改变背景色</div>   //v-bind 根据条件绑定属性
        <pre><a v-bind:href=url>百度</a></pre>  //v-bind 绑定属性
        {{selected?"有背景颜色":"无背景颜色"}}<br>   //vue支持js代码
        {{msg|upper}}<br>   //单个过滤器
        {{msg1|upper|cat}}<br>      //多个过滤器
        <button v-on:click="reverseMsg">点击反转上面字符</button><br> //v-on 触发事件
    </div>
</template>

<script type="text/javascript">
    import user from './User.vue'
    import  Vue from 'vue'

    export default {
        name: "List",

        data: function () {
            return {
                massage: '<h1>v-html可以输出html格式</h1>',
                selected: false,
                url: 'http://www.baidu.com',
                msg:"onepeice",
                msg1:"jerry",
                msg2:'tom',
                num:Math.random()
            }
        },
        methods:{ //方法
            reverseMsg(){
                this.msg = this.msg.split('').reverse().join('')
            },
            changeNum(){
                this.num = Math.random()
            }
        },
        filters:{ //过滤器
            upper:function(value){
                if(!value) return;
                value = value.toString();
                return value.charAt(0).toUpperCase()+value.slice(1)
            },
            cat:function(value){
                return value+'is a Cat';
            }
        }
    }
</script>

<style type="text/css">
.changeColor {
    background: #444;
    color: #eee;
}
</style>

效果如下：

条件语句

vue中的条件语法是v-if , v-else-if, v-else。

循环 v-for

例如在data中定义数组movies

data:{
            movies:['星际穿越','侠影之谜','黑暗骑士','盗梦空间','信条','指环王'],
        },

然后在html中使用v-for遍历movies，

 <ul>
        <li v-for="(item,index) in movies" >{{item}}</li>
    </ul>

效果如下图：