1.v-text
设置标签的文本值内容；默然写法会替换全部内容，使用插值表达式{{}}可以替换指定内容；内部支持写表达式
<div id="app">
<h2 v-text="message"></h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"message!"
}
})
</script>
2.v-html
设置标签的innerHTML；内容中有HTML结构会被解析成标签；v-text指令无论内容是什么，只会解析成文本；解析文本使用v-text,需要解析HTML结构使用v-html
<div id="app">
<h2 v-html="content"></h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
3.v-on
为元素绑定事件；指定可以简写为@；绑定的方法定义在methods属性中；方法内部可以通过this关键字可以访问定义在data中的数据；事件绑定的方法写成函数调用的形式，可以传入自定义参数；定义方法时需要定义形参来接收传入的实参；事件的后面跟上 .修饰符 可以对事件进行限制
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="v-on双击" @dblclick="doIt">
</div>
<script>
var app=new Vue({
el:"#app",
methods:{
doIt:function(){
// 逻辑
},
}
})
</script>
4.v-show
根据表达式的真假，切换元素的显示和隐藏；指令后面的内容都会解析成布尔值
<div id="app">
<img v-show="true" src="地址" alt="">
<img v-show="isShow" src="地址" alt="">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false
}
})
</script>
5.v-if
根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）；表达式为true，元素存在于dom树中，为false，从dom树中移除；频繁的切换用v-show，反之用v-if，前者切换消耗小
<div id="app">
<p v-if="isShow">P标签</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false
}
})
</script>
6.v-bind
设置元素的属性（比如：src，title，class）；完整写法：v-bind:属性名；简写：属性名；需要动态的增删class建议使用对象的方式
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!'" :class="isActive?'active':''" @click="Active">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!'" :class="{active:isActive}" @click="Active">
<!-- class是否为active，取决于isActive是否为真，和三元表达式效果相同 -->
</div>
<script>
var app=new Vue({
el:"#app",
data:{
imgSrc:"地址",
imgTitle:"题目",
isActive:false
},
methods:{
Active:function(){
this.isActive=!this.isActive;
}
}
})
</script>
7.v-for
跟据数据生成列表结构；语法是( item,index ) in 数据；item 和 index 可以结合其他指令一起使用；数组长度的更新会同步到页面上,是响应式的
<div id="app">
<ul>
<li v-for="(item,index) in campus">
{{index}}{{item}}
</li>
</ul>
<h2 v-for="item in school1">
{{item.name}}
</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
school1:[
{name:"11111"},
{mobile:"22222"}
],
campus:["北京","上海","深圳","广州"]
}
})
</script>
8.v-model
获取和设置表单元素的值(双向数据绑定)；绑定的数据会和表单元素值相关联
<div id="app">
<input type="text" v-model="message">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"message!"
}
})
</script>
