Vue指令是一系列以v-开头的指令
一.v-text
v-text指令的作用是：设置标签的内容默认写法会替换全部内容，使用**{{}}差值表达式**可以替换指定内容内部支持写表达式简写为{{}}
<div id='app'>
<h2 v-text = 'message'>
<h2>
<h3>{{message}}
<h3>
<div>
二.v-html
v-html指令的作用的是：设置元素的innerHTML内容中有html结构会被解析为标签而v-text指令无论内容是什么，只会解析为文本解析文本内容使用v-text,需要解析html结构使用v-html
<div id = "app">
<P v-html = "content">
</P> //输出百度的超链接
<P v-text = "content">
</P> //输出<a href = 'http://www.baidu.com'>百度
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
content:"<a href = 'http://www.baidu.com'>百度</a>"
}
})
</script>
三.v-on
<div id = "app">
<input type='button' value='事件绑定' v-on:click='方法名'> //鼠标单击
<input type='button' value='事件绑定' v-on:monseenter='方法名'> //鼠标移动
<input type='button' value='事件绑定' v-on:dblclick='方法名'> //鼠标双击
<input type='button' value='事件绑定' @dblclick='doIt'> //鼠标双击，和上行意义一样,@是简写
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods:{
doIt:function(){
}
}
})
</script>
v-on指令的作用是：为元素绑定事件指令可以简写为@绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中的数据此外，v-on指令还可以传递自定义参数及事件修饰符（如下方代码）事件绑定的方法写成函数调用的形式，可是传入自定义参数定义方法时需要定义形参来接收传入的实参事件的后面跟上**.修饰符**，可以对事件进行限制.ehter 可以限制触发的按键为回车事件修饰符有很多种
<div id = "app">
<input type="button" @click="doIt(666,'农药')"
<input type="text" @keyup.enter="sayHi"; //keyup为键盘操作，keyup.enter表示按回车键执行
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods:{
doIt:function(p1,p2){
sayHi:function(){}
}
}
})
</script>
四.v-show
根据表达式的真假，切换元素的显示和隐藏(操纵样式)原理是修改元素的display，实现隐藏v-show指令后面的内容，最终都会解析为布尔值值为true元素显示，值为false元素隐藏数据改变之后，对应元素的显示状态会同步更新
<div id = "app">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18"> //可以接表达式
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
isShow:true,
age=16,
}
})
</script>
五.v-if，v-else
根据表达式的真假，切换元素的显示和隐藏(操纵dom元素)本质是通过dom元素来切换显示状态表达式的值为true时，元素存在于dom树中，为false，从dom树中移除若需要频繁切换则使用v-show，反之使用v-if,前者的切换消耗小v-else后面不需要跟条件
<div id = "app">
<p v-if="isShow">我是一个p标签
</p>
<p v-if="表达式">我是一个p标签
</p>
<p v-else">我是一个p标签
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
isShow:true,
}
})
</script>
六.v-bind
设置元素的属性（比如：src,title,class）完整格式v-bind:属性名 = 表达式简写的话可以直接省略v-bind，只保留 :属性名需要动态的增删class建议使用对象的方式
<div id = "app">
<img v-bind:src="imgSrc"> //正常格式
<img :src="imgSrc"> //简写格式
<img :src="imgSrc" :class="{active:isActive}"> //对象的方式增删class
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
imgSrc:图片地址,
isActive:false
}
})
</script>
七.v-for
<div id="app">
<ul>
<li v-for="item in arr">
城市名称：{{item}}
</li>
<h2 v-for="(item,index) in vegetables">
{{item.name}}
</h2>
</ul>
</div>
v-for指令的作用是：根据数据生成列表结构数组经常和v-for结合使用语法是v-for="(item,index) in 数据" 或 v-for="item in 数据",其中item代表每一项，index代表索引数组长度的更新会同步到页面上，是响应式的
八.v-model
获取和设置表单元素的值（双向数据绑定）绑定的数据会和表单元素值相关联绑定的数据←→表单元素的值
<div id = "app">
<input type="text" v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message:"农药"
}
})
</script>
注意： splice方法的作用：是根据索引删除数组中对应的元素splice(索引，删除个数) ，如splice(index,1)
