Vue中的指令
概念
指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
vue 中的指令按照不同的用途可以分为如下 6 大类：
- 内容渲染指令（v-html、v-text）
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
- 事件绑定指令（v-on）
- 属性绑定指令 （v-bind）
- 双向绑定指令（v-model）
- 列表渲染指令（v-for）
指令是 vue 开发中最基础、最常用、最简单的知识点。
内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：
- v-text（类似innerText）
-
- 使用语法：
<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中 - 类似 innerText，使用该语法，会覆盖 p 标签原有内容
- 使用语法：
- v-html（类似 innerHTML）
-
- 使用语法：
<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中 - 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
- 使用语法：
代码演示：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = "app">
<h2> 个人信息 </h2>
<p v-text="uname">姓名：</p>
<p v-html="intro">简介：</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
uname:"Avgrado",
intro:'<font color="red">这是一个<strong>非常优秀</strong>的boy</font>'
}
})
</script>
</body>
</html>
条件渲染指令
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
-
v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
-
v-if
- 作用： 控制元素显示隐藏（条件渲染）
- 语法： v-if= "表达式" 表达式值 true显示， false 隐藏
- 原理： 基于条件判断，是否创建 或 移除元素节点
- 场景： 要么显示，要么隐藏，不频繁切换的场景
-
v-else-if 和 v-else
- 作用：辅助v-if进行判断渲染
- 语法：v-else v-else-if="表达式"
- 需要紧接着v-if使用
示例代码（v-show和v-if）：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div class="box" v-show="v_show_flag">我是v-show 控制的盒子</div>
<div class="box" v-if="v_if_flag">我是v-if 控制的盒子</div>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
v_show_flag:false,
v_if_flag:true
}
})
</script>
</body>
</html>页面展示：
v-if 和 v-show的区别 
示例代码（v-if\、v-if-else 和 v-else ）：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<p v-if="score>=90">奖励电脑</p>
<p v-else-if="score>=80">奖励手机</p>
<p v-else-if="score>=70">奖励平板</p>
<p v-else>奖励毒打</p>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
score:80
}
})
</script>
</body>
</html>事件绑定指令
使用Vue时，如需为DOM注册事件，及其的简单，语法如下：
- <button v-on:事件名="内联语句">按钮
- <button v-on:事件名="处理函数">按钮
- <button v-on:事件名="处理函数(实参)">按钮
v-on:简写为 @
内联语句
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="count--">-</button>
<span>{{count}}</span>
<button v-on:click="count++">+</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
count:10
}
})
</script>
</body>
</html>页面展示如下
事件处理函数（不传参）
注意：
- 事件处理函数应该写到一个跟data同级的配置项（methods）中
- methods中的函数内部的this都指向Vue实例
示例代码：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click = "isShow">点击切换显示隐藏</button>
<p v-show="flag">Hello World</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
flag:false,
},
methods:{
isShow(){
this.flag = !this.flag
}
}
})
</script>
</body>
</html>页面展示如下： 
事件处理函数（传参）
- 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
- 如果传递了参数，则实参
$event表示事件对象，固定用法
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
border: 3px solid #000000;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 200px;
}
h3 {
margin: 10px 0 20px 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button v-on:click="subMoney(5)">可乐5元</button>
<button v-on:click="subMoney(10)">咖啡10元</button>
<button v-on:click="subMoney(8)">牛奶8元</button>
</div>
<p>银行卡余额：{{ money }}元</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
money:100,
},
methods:{
subMoney(price){
this.money = this.money -price
}
}
})
</script>
</body>
</html>页面展示如下：
属性绑定指令
- 作用： 动态设置html的标签属性 比如：src、url、title
- 语法 ：v-bind: 属性名="表达式"
- v-bind: 可以简写成 => :
比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：
<img v-bind:src="url" /><img :src="url" />（v-bind可以省略）
示例代码：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" v-bind:title='title' />
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
imgSrc:'https://img1.baidu.com/it/u=815700242,1430954615&fm=253&fmt=auto?w=130&h=170',
title:'风景'
},
methods:{
subMoney(price){
this.money = this.money -price
}
}
})
</script>
</body>
</html>案例：图片切换 需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片
实现思路：
1.数组存储图片路径 ['url1','url2','url3'，...]
2.可以准备个下标index 去数组中取图片地址。
3.通过v-bind给src绑定当前的图片地址
4.点击上一页下一页只需要修改下标的值即可
5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏
代码：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<img v-bind:src="imgList[index]" v-bind:title='title' /><br>
<button v-on:click="pre" v-show="preFlag">上一页</button>
<button v-on:click="next" v-show= "nextFlag">下一页</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
preFlag:true,
nextFlag:true,
title:'风景',
index:2,
imgsrc:'https://img1.baidu.com/it/u=2328766673,3584364392&fm=253&fmt=auto?w=130&h=170',
imgList:[
'https://img1.baidu.com/it/u=2328766673,3584364392&fm=253&fmt=auto?w=130&h=170',
'https://img1.baidu.com/it/u=3404650803,2060580994&fm=253&fmt=auto?w=130&h=170',
'https://img1.baidu.com/it/u=714363784,4100466502&fm=253&fmt=auto?w=130&h=170',
'https://img1.baidu.com/it/u=815700242,1430954615&fm=253&fmt=auto?w=130&h=170'
]
},
methods:{
pre(){
if(this.index>0){
this.index--
if(this.index==0){
this.preFlag = false
}
}
this.nextFlag=true
},
next(){
if(this.index+1 <this.imgList.length){
this.index++
if(this.index+1 == this.imgList.length){
this.nextFlag=false
}
}
this.preFlag = true
}
}
})
</script>
</body>
</html>列表渲染指令
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
- item 是数组中的每一项
- index 是每一项的索引，不需要可以省略
- arr 是被遍历的数组
此语法也可以遍历对象和数字
示例代码：
- 遍历数字（1------10）
xml
<!-- 遍历数字（1------10） -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-for="item in 10">{{item}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
})
</script>
</body>
</html>页面展示如下： 
案例 ：小黑书架
需求：
1.根据左侧数据渲染出右侧列表（v-for）
2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤） 
代码示例：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for="(item, index) in bookList" :key="item.id">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
bookList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods:{
del(id){
this.bookList = this.bookList.filter(item =>(item.id!=id))
}
}
})
</script>
</body>
</html>双向绑定指令
所谓双向绑定就是：
- 数据改变后，呈现的页面结果会更新
- 页面结果更新后，数据也会随之而变
作用： 给表单元素 （input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法： v-model="变量"
案例： 需求： 使用双向绑定实现以下需求
- 点击登录按钮获取表单中的内容
- 点击重置按钮清空表单中的内容
代码示例：
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
账户：<input type="text"> <br><br>
密码：<input type="password"> <br><br>
<button >登录</button>
<button>重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
})
</script>
</body>
</html>页面展示如下： 