模板语法
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>
效果如下图：
