一、v-text与v-html.html
v-html 可以解析标签，解析样式,v-text不能解析，只能原样输出
二、v-bind绑定参数
v-bind简写方式
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
三、v-model双向绑定
四、v-for
简单用法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-for </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><ol><li v-for="o in user">{{o}}</li></ol></div></body><script type="text/javascript">new Vue({el:"#app",data:{user:{id:001,username:"willaim",password:"123",sex:"nan",age:20}}})</script>
</html>2.操作对象
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-for </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><ol><li v-for="o in user">{{o}}</li></ol><ol><li v-for="(key,value) in user">{{key+"::"+value}}</li></ol></div></body><script type="text/javascript">new Vue({el:"#app",data:{user:{id:001,username:"willaim",password:"123",sex:"nan",age:20}},})</script>
</html>3.操作对象数组
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-for </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><ol><li v-for="o in user">{{o}}</li></ol><ol><li v-for="(key,value) in user">{{key+"::"+value}}</li></ol><table><tr ><td>id</td><td>用户名</td><td>密码</td><td>性别</td><td>年龄</td></tr><tr v-for="user in userList"><td>{{user.id}}</td><td>{{user.username}}</td><td>{{user.password}}</td><td>{{user.sex}}</td><td>{{user.age}}</td></tr></table></div></body><script type="text/javascript">new Vue({el:"#app",data:{user:{id:001,username:"willaim",password:"123",sex:"nan",age:20},userList:[{id:001,username:"willaim",password:"123",sex:"nan",age:20},{id:002,username:"willaim-li",password:"456",sex:"nan",age:22}] },})</script>
</html>五、v-if与v-show
v-if：判断是否加载元素
v-show：展示样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>v-if和v-show </title><script type="text/javascript" src="js/vue-v2.6.10.js" ></script></head><body><div id="app"><!--v-if: 都是可以决定标签内容是否可以显示判断后决定是否加载此标签v-show: 都是可以决定标签内容是否可以显示肯定会加载，使用样式决定是否显示适用于经常切换元素显示问题--><font v-if="seen">百度</font><font v-show="seen">谷歌</font><input type="button" value="切换" @click="fun1" /></div></body>
<script type="text/javascript">new Vue({el:"#app",data:{seen: false},methods:{fun1:function(){this.seen=!this.seen;}} })</script>
</html>
