Vue学习02——指令学习Vue中的指令概念指令（Directives）是 Vue 提供的带有 v- 前缀的特殊

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标签的样式呈现出来。

代码演示：

<!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）：

<!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 ）：

<!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: 简写为 @

内联语句

<!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实例

示例代码：

<!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 表示事件对象，固定用法

<!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可以省略）

示例代码：

<!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.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

代码：

<!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>

v-bind对样式增强的操作 为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

语法： <div> :class = "对象/数组"> 这是一个div </div>
对象语法：当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类；
适用场景：一个类名，来回切换
数组语法：当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表；<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
适用场景:批量添加或删除类 示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		    .box {
		      width: 200px;
		      height: 200px;
		      border: 3px solid #000;
		      font-size: 30px;
		      margin-top: 10px;
		    }
		    .pink {
		      background-color: pink;
		    }
		    .big {
		      width: 300px;
		      height: 300px;
		    }
		  </style>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app">
			<div v-bind:class="{box:true,big:true}">绑定对象</div>
			<div v-bind:class="['box','pink']">绑定数组</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					
				}
			})
		</script>
	</body>
</html>

页面展示如下：

案例：tab栏切换导航高亮
需求：
当我们点击哪个tab页签时，哪个tab页签就高亮
思路：
1.基于数据，动态渲染tab（v-for）
2.准备一个下标记录高亮的是哪一个 tab
3.基于下标动态切换class的类名代码：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>

<div id="app">
    <ul>
      <li  v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
		  <a :class="{active:activeIndex===index}" href="#">{{item.name}}</a>
	  </li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex:0,
        list: [
          { id: 1, name: '即刻秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>

页面展示如下：

v-bind对有样式控制的增强-操作style
语法：<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
示例代码：

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
 <div id="app">
    <div class="box" :style="{width: '400px', height: '400px', backgroundColor: 'green'}"></div>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

进度条案例：

案例代码：

 <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner" :style="{width:progress}">
        <span>{{progress}}</span>
      </div>
    </div>
    <button @click=setProgress(25)>设置25%</button>
    <button @click=setProgress(50)>设置50%</button>
    <button @click=setProgress(75)>设置75%</button>
    <button @click=setProgress(100)>设置100%</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
		progress:50+'%'
      },
	  methods:{
		  setProgress(p){
			  this.progress = p+'%'
		  }
	  }
    })
  </script>

列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字

示例代码：

遍历数字（1——10）

<!-- 遍历数字（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进行过滤）

代码示例：


<!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="变量"

案例： 需求： 使用双向绑定实现以下需求

点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容

代码示例：


<!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>

页面展示如下：

v-model在其他表单元素的使用

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值，它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value

示例代码：

<style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
 <div id="app">
    <h3>小黑学习网</h3>
    姓名：
      <input type="text" v-model="name"> 
      <br><br>
    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input type="radio" name='sex' v-model="sex" value='1'>男
      <input type="radio" name='sex' v-model="sex" value='0'>女
      <br><br>
    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="chengdu">成都</option>
        <option value="nanjing">南京</option>
      </select>
      <br><br>
    自我描述：
      <textarea v-model="selfDesc"></textarea> 
    <button>立即注册</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
		name:'',
		isSingle:'',
		sex:'',
		city:'',
		selfDesc:''
      }
    })
  </script>

页面展示如下：