1.v-for
用于列表数据循环渲染
<li v-for="(news,index) in newsData">
news为循环的项，index为索引，newsData为data中定义的数据名称
2.v-bind
属性的动态绑定，即给标签属性绑定一个动态的值。简写为:
<li v-for="news in newsData">
{{ news.title }}
<img :src="news.img" alt="">
<div class="content">
{{ news.content }}
</div>
</li>
3.v-on
绑定监听事件，触发相对应的函数，简写@
<button @click="setData" style="width: 60px;height: 40px;">确定</button>
4.v-model
数据双向绑定,指令在表单控件元素上创建双向数据绑定，会根据表单控件类型自动选取正确的方法更新元素。
<input type="text" v-model="msg"><br>
{{msg}}
复选框中checkedNames中的值包含多个，则需要给checkedNames设为数组。
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
data: {
checkedNames: []
}
修饰符
v-model中增加修饰符，可处理优化，修饰符也可以多个同时使用。
.lazy 数据更新将在change事件后再同步。
.number 将表单元素中的值转为number类型。
.trim 过滤表单元素值中的首位空格。
<input type="text" v-model.lazy.trim="msg" >
{{msg}}
4.v-if
条件判断，当值为false时，所绑定的元素将不被渲染。
<ul>
<li v-if="boxShow">boxShow为true我将被渲染</li>
<li v-else>boxShow为false我将被渲染</li>
</ul>
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
5.v-show
与v-if用法相同，根据条件展示元素。v-show 只是简单地切换元素的 CSS 属性 display
<ul>
<li v-show="boxShow">boxShow为true我就会出现</li>
</ul>
v-if和v-show的区别
v-if只在值为true的时候才会处理，将所绑定元素进行渲染。
而v-show无论它的值为ture或者false，都会将其渲染在页面上，只是通过给值为false的元素隐藏（添加display:none;）
