Vue 对于一些常用的页面功能进行了指令封装，这些指令可以以Html元素属性的方式使用。
1.v-show指令
v-show指令的作用是：根据指令中表达式的真假，来控制指令标签中内容的显示或隐藏。
<!-- dom对象：一个大的容器来使用我们的vue中的数据与方法 -->
<div id="app">
<!-- Vue的指令 ：有很多指令，操作控制dom元素
指令1：v-show：根据v-show的值（boolean类型）控制元素是否显示 display:none
-->
<h1 v-show="b1">true</h1>
<h1 v-show="b2">false</h1>
<h1 v-show="num>=2">{{num}}</h1>
</div>
<script>
//创建Vue实例对象，相当于java中的有参构造{}
var app = new Vue({
//要绑定的页面元素
el:"#app",
data:{
num:1,
b1:true,
b2:false
}
})
</script>
使用浏览器打开代码：显示效果如下图所示,
从图中可以看出，内容为true的标签因为其中v-show指令的值为true,所以显示了出来，其它条件判断语句的结果为false,所以并没有显示出来。
F12打开开发者工具，选择元素（elements）窗口，从中可以看到值 为false的标签在渲染时通过添加css 样式被隐藏了起来。
切换到控制台（Console）窗口，在其中输入语句"app.num = 2"来改变num的值，浏览器显示效果如下
elements元素显示效果，可以看到，在判断语句值变为false后，该标签通过改变css 样式而显示了出来
2.v-bind指令
v-bind指令的作用是：用于响应式的更新html元素的属性。
例如：
<div id="app">
<!-- Vue的指令：有很多指令，操作控制dom元素
指令2：v-bind：动态绑定html的属性,可以简写为冒号 “:”
-->
<!--将img的属性src与Vue实例中imgUrl的值绑定，这样才可以显示图片，超链接同样-->
<img :src="imgUrl">
<a v-bind:href="url">百度</a>
</div>
<script>
//创建Vue实例对象，相当于java中的有参构造{}
var app = new Vue({
//要绑定的页面元素
el:"#app",
data:{
url:"http://www.jd.com",
imgUrl:"test.png"
}
</script>
3.v-for指令
v-for指令的作用是：循环遍历一个数组或对象，将数组或对象中的数据在页面上渲染成一个列表
3.1v-for 遍历数组
(item,index) in items
其中items是被遍历的数组，item是被迭代的数组元素的别名，in分隔，index当前项的索引，v-for遍历数组的示例代码如下
<body>
<!-- dom对象：一个大的容器来使用我们的vue中的数据与方法 -->
<div id="app">
<!-- Vue的指令：有很多指令，操作控制dom元素
指令1：v-for：用来遍历数组或者对象
stus 是被遍历的数组，stu数组中的数组元素的别名，in分隔符，index 当前项的索引
-->
<ul>
<li v-for="(stu,index) in stus">{{index}}-{{stu.name}}</li>
</ul>
</div>
<script>
//创建Vue实例对象，相当于java中的有参构造{}
var app = new Vue({
//要绑定的页面元素
el:"#app",
data:{
/* 存储很多个学生对象的数组 */
stus:[
/*学生对象 */
{name:"liqishuai"},
{name:"zhangyao"},
{name:"kongqingjie"},
{name:"xxx"}
]
}
})
</script>
</body>
使用浏览器打开代码，显示效果如下
3.2数组更新检测
数据与视图的双向绑定是Vue的核心功能之一，为了监听数组中元素的变化，使其变化时能够快速更新视图，Vue对数组的下列变异方法进行了包装：push()、pop()、shift()、unshift()、splice()、sort()和reverse()
使用浏览器打开代码3.1，F12打开开发者工具并切换到控制台（Console）窗口，输入push语句，为stus数组对象新增一个学生，语句代码如下
app.stus.push({name:'liuzhen'})
语句效果如图所示
4.v-model指令
v-model 指令的作用是：双向数据绑定，只能用于input、textarea、select元素上。v-model 通过监听用户的输入来更新数据
v-model的使用方式如下所示：
<body>
<!-- dom对象：一个大的容器来使用我们的vue中的数据与方法 -->
<div id="app">
<!-- Vue的指令：有很多指令，操作控制dom元素
指令1：v-model :双向数据绑定，只能是input、textarea、select
-->
<input type="text" v-model="num"><br>
<textarea v-model="num"></textarea>
<select v-model="num">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
num的值为：{{num}}
</div>
<script>
//创建Vue实例对象，相当于java中的有参构造{}
var app = new Vue({
//要绑定的页面元素
el:"#app",
data:{
num:1
}
})
</script>
</body>
使用浏览器打开代码：在文本框中输入数据2，文本域，下拉框中的值、num渲染的值一起变化，或者选择下拉框中的选项，其它的对应的组件的值也会随之发生改变==》数组双向绑定
5.v-on指令
v-on指令的作用是：用于监听DOM事件，并在触发事件时执行一些js代码。v-on接收一个参数，在指令名称之后以冒号表示。例如使用v-on监听click事件，代码如下所示
<button v-on:click="方法名()"></button>
以上代码中click是参数，告知v-on指令，当按钮触发click 事件后执行方法，v-on:click指令也可简写为"@click"
<body>
<!-- dom对象：一个大的容器来使用我们的vue中的数据与方法 -->
<div id="app">
<!-- Vue的指令：有很多指令，操作控制dom元素
指令1：v-on：监听button,当button 点击 时，触发绑定事件，再由事件驱动方法，执行对应的操作
v-on:可以简写为@
-->
<button @click="gaiBianNum(1)">+</button>
num的值为：{{num}}
<button v-on:click="gaiBianNum(-1)">-</button>
</div>
<script>
//创建Vue实例对象，相当于java中的有参构造{}
var app = new Vue({
//要绑定的页面元素
el:"#app",
data:{
num:1
},
methods:{
//声明一个方法
gaiBianNum(i){
//num+i
/* this指向的是Vue的实例对象app */
this.num = this.num+i;
}
}
})
</script>
</body>
打开浏览器运行代码效果如下，点击“+” num的值会+1，点击“-” num的值 会-1
![[03] <span style='color:red;'>Vue</span><span style='color:red;'>指令</span>(<span style='color:red;'>2</span>)](https://img-blog.csdnimg.cn/direct/e9d2f5dff71f4acda09c8b0cb71335d1.png)
![[Python学习篇] Python创建项目](https://img-blog.csdnimg.cn/direct/433d62495b194a9cba8268707bd2e811.png)
