什么是指令
- 在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
- 譬如在HTML页面中这样使用
<div v-xxx=''></div>
- 在vue中v-xxx就是vue的指令
- 指令就是以数据去驱动DOM行为的,简化DOM操作
常用的指令有哪些，及怎么使用这些指令
- v-text 不可解析html标签
- v-html 可解析html标签
- v-if 做元素的插入（append）和移除（remove）操作
- v-else-if
- v-else
- v-show display:none 和display：block的切换
- v-for
- 数组 item，index
- 对象 value，key ，index
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-text='mytext'></div>
</hr>
<div v-html='myhtml'></div>
</hr>
<button v-if='num==1'>测试v-if</button>
<button v-else-if='num==2'>测试v-else-if</button>
<button v-else='num'>测试v-else</button>
<div v-show='checkshow'>v-show</div>
<ul>
<li v-for='(item,index) in arrayfor'>
{{index}}-{{item}}
</li>
</ul>
<ul>
<li v-for='(value,key,index) in objfor'>
{{index}}-{{key}}-{{value}}
</li>
</ul>
</div>
`,
data:function(){
return{
mytext:"<h1>我这是v-text</h1>",
myhtml:"<h1>我这是v-html</h1>",
num:2,
checkshow:true,
arrayfor:['篮球','足球','乒乓球'],
objfor:{name:'jj',age:16}
}
}
})
</script>
</body>
</html>
