Vue 指令详解

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

数据类型

• Vue 中用到的数据定义在 data 中。
• data 中可以写复杂类型的数据。
• 渲染复杂类型数据时，遵守 js 的语法即可。

内容绑定，事件绑定

v-text 指令

1. v-text 会设置标签内所有的内容。
2. v-text 通常情况下，接收一个 string 类型。

<div class="app" v-text="message">

</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '.app',
		data: {
			message: '你好孟钊'
		}
	})
</script>

<!-- 拼接：<h2class="app" v-text="message+'!'"></h2> --/>
<!-- 拼接：<h2>深圳{{message+"!"}}</h2> --/>

2. 设置部分内容可以使用<h2>深圳{{message}}</h2>，这种方法叫差值表达式。

v-html 指令

1. 如果我们直接通过 {{}} 来输出，会将 HTML 代码一起输出。

2. 但是我们可能希望按照 HTML 的格式进行解析，并且显示对应的内容。

   • 可以使用 v-html 指令：

     1）该指令后面往往会跟上一个 string 类型。

     2）会将 string 的 HTML 解析出来并且进行渲染。

<div class="app">
	<span v-html="message"></span>
</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '.app',
		data: {
			message: '<h1>你好</h1>'
		}
	})
</script>

v-on 指令

为元素绑定事件

• 语法：<input type="button" value="事件绑定" v-on：click="methods 中的方法"></input>。
• v-on: 可以简写成@。
• 计数器案例

<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <!-- <button v-on:click="counter--">-</button> -->
    <!-- <button v-on:click="counter++">+</button> -->
    <button v-on:click="sub">-</button>
    <button v-on:click="add">+</button>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            counter: '0',
        },
        methods: {
            add: function(){
            	if(this.counter<10){
            		this.counter++
            	}else{
            		alert('别加了，最大了！')
            	}
            },
            sub: function(){
            	if(this.counter>0){
            		this.counter--
            	}else{
            		alert('别减了，已经没了！')
            	}
            }
		}
    })
</script>

v-on 补充

• 传递自定义参数，事件修饰符。

• 事件绑定的方法写成函数调用的形式，可以传入自定义参数。

• 定义方法时需要定义形参来接收传入的实参。

• 事件的后面跟上.修饰符 可以对事件进行限制。

• .enter 可以限制触发的按键为回车。

总结

1. methods 属性：该属性用于在 Vue 对象中定义方法。
2. @click 指令：该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是 methods 中定义的方法）。
3. 语法糖：简写。 |名称|作用| |:|:| |click|点击事件| |mouseenter|鼠标移入| |dblclick|鼠标双击事件|

v-model 指令

• 获取和设置表单元素的值（双向数据绑定）.
• 绑定的数据会和表单元素值相关。
• 绑定的元素⬅➡表单元素的值。
• v-model 原理：
  • v-model 其实是一个语法糖，他的背后本质上是包含两个操作。
    • v-bind 绑定一个 value 值。
    • v-on 指令给当前元素绑定 input 事件。

<div id="app">
	<input type="text" v-model="message" @keyup.enter="getM">
	<h2>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			message:'黑马程序员'
		},
		methods: {
			getM:function(){
				alert(this.message)
			}
		}
	})
</script>

v-model: radio

1. 当存在多个单选框时。

   <div id="app">
   	<label for="male">
   		<input type="radio" id="male" value="男" v-model="message">男
   	</label>
   	<label for="famale">
   		<input type="radio" id="famale" value="女" v-model="message">女
   	</label>
   	<h2>你的选择是：{{message}}</h2>
   </div>
   <script src="./vuecode/vue.js"></script>
   <script>
   	const app = new Vue({
   		el: '#app',
   		data: {
   			message: '男'
   		}
   	})
   </script>
   

v-model: checkbox

1. 单选框

   • v-model 即为布尔值。
   • 此时 input 的 value 值并不影响 v-model 的值。

   <div id="app">
   	<label for="agreement">
   		<input type="checkbox" id="agreement" v-model="agreement">我已阅读并同意以上协议
   	</label>
   	<button :disabled="!agreement">注册</button>
   </div>
   <script src="./vuecode/vue.js"></script>
   <script>
   	const app = new Vue({
   		el: '#app',
   		data: {
   			agreement: false
   		}
   	})
   </script>
   

2. 多选框

   • 多个复选框因为要选择多个，所以对应的 data 中属性是一个数组。
   • 当选中某一个时，就会将 input 的 value 值添加到数组中。

   <div id="app">
   	<input type="checkbox" value="篮球" v-model="hobbies">篮球
   	<input type="checkbox" value="足球" v-model="hobbies">足球
   	<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
   	<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
   	<h2>你的爱好是：{{hobbies}}</h2>
   </div>
   <script src="./vuecode/vue.js"></script>
   <script>
   	const app = new Vue({
   		el: '#app',
   		data: {
   			hobbies: []
   		}
   	})
   </script>
   

v-model: select

1. 和 checkbox 一样，select 也分单选和多选两种情况。

2. 单选：只能选中一个值。

   • v-model 绑定的是一个值。
   • 当我们选中 option 中的一个时，会将它对应的 value 赋值到 mySelect 中。

   <div id="app">
   	<select name="" id=""  v-model="fruit">
   		<option value="李子">李子</option>
   		<option value="火龙果">火龙果</option>
   		<option value="葡萄">葡萄</option>
   		<option value="哈密瓜">哈密瓜</option>
   	</select>
   	<h2>你选择的水果是：{{fruit}}</h2>
   </div>
   <script src="./vuecode/vue.js"></script>
   <script>
   	const app = new Vue({
   		el: '#app',
   		data: {
   			fruit: '火龙果'
   		}
   	})
   </script>
   

3. 多选：可以选中多个值。

   • v-model 绑定的是一个数组。
   • 当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelects 中。

   <div id="app">
   	<select name="" id=""  v-model="fruits" multiple>
   		<option value="李子">李子</option>
   		<option value="火龙果">火龙果</option>
   		<option value="葡萄">葡萄</option>
   		<option value="哈密瓜">哈密瓜</option>
   	</select>
   	<h2>你选择的水果是：{{fruits}}</h2>
   </div>
   <script src="./vuecode/vue.js"></script>
   <script>
   	const app = new Vue({
   		el: '#app',
   		data: {
   			fruits: []
   		}
   	})
   </script>
   

值绑定

• 用来给所要操作的元素动态绑定 value 值。

<div id="app">
	<select name="" id="" :value="fruits" v-model="fruit" multiple>
		<option>李子</option>
		<option>火龙果</option>
		<option>葡萄</option>
		<option>哈密瓜</option>
	</select>
	<h2>你选择的水果是：{{fruit}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			fruit: [],
			fruits: [ "李子", "火龙果", "葡萄", "哈密瓜" ]
		}
	})
</script>

v-model 修饰符

1. lazy 修饰符
   • 默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。
   • 也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生。
   • lazy 修饰符可以让数据在失去焦点或者回车时才会更新。
2. number 修饰符
   • 默认情况下，在输入框中，无论我们输入的是字母还是数字，都会被当作字符串类型进行处理。
   • 但是如果我们希望处理的是数字类型，那么最好是直接将内容当作数字处理。
   • number 修饰符可以让在输入框中输入的内容自动转成数字类型。
3. trim 修饰符
   • 如果输入的内容首尾有很多空格，通常我们希望将其去除。
   • trim 修饰符可以过滤内容两边的空格。

v-show 指令

• 根据表达值的真假，切换元素的显示和隐藏。
• 原理是修改元素的 display 值，实现显示隐藏。
• 指令后面的内容，最终都会解析为布尔值。
• 值为 true 元素显示，值为 false 元素隐藏。

<div id="app">
	<input type="button" v-on:click="changeIsShow" value="切换"></input>
	<img v-show="isShow" src="./images/1.jpg" alt="">
</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			isShow: true,
		},
		methods: {
			changeIsShow: function () {
				this.isShow = !this.isShow
			}
		}
	})
</script>

v-if 指令

• 根据表达值的真假，切换元素的显示和隐藏（操纵 DOM 元素）。
• 本质是操纵 DOM 元素来切换显示状态。
• 表达式的值为 true ，元素存在于 DOM 树中，为 false ，从 DOM 树中移除

  <div id="app">
  	<input type="button" value="点击" @click="toggleIsShow">
  	<p v-if="isShow">黑马程序员</p>
  </div>
  <script src="./vue源码/vue.js"></script>
  <script>
  	var app = new Vue({
  		el: '#app',
  		data: {
  			isShow: false
  		},
  		methods: {
  			toggleIsShow: function () {
  				this.isShow = !this.isShow
  			}
  		}
  	})
  </script>

v-bind 指令

v-bind 绑定class

• 设置元素的属性（比如：src，title，class）。
• 语法：v-bing:属性名=表达式。
• 简写：:属性名。
• 需要动态的增删 class 建议使用对象的方式。
• 语法：

<!-- 用法一：直接通过 {} 绑定一个类。 -->
<h2 :class="{'active': isActive}">Hello World</h2>
<!-- 用法二：也可以通过判断，传入多个值。 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
<!-- 用法三：和普通的类同时存在，并不冲突。 -->
<!-- 注：如果 isActive 和 isLine 都为 true ，那么会有 title/active/line 三个类 -->
<h2 class="title" :class="{'active': isActive , 'line':isLine}">Hello World</h2>
<!-- 用法四：如果过于复杂，可以放在一个 methods 或者 computed 中。 -->
<!-- 注：classes 是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>
<!-- 用法五：数组语法。(用的次数较少) -->
<h2 class="title" :class="['active','line']">Hello World</h2>

• 案例：

  <div id="app">
  	<img v-bind:src="imgSrc" alt="">
  	<img :src="imgSrc" alt="">
  	<img :src="imgSrc" alt="" :title="imgtitle+'!!!!'">
  	<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
  	<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
  </div>
  <script src="./vue源码/vue.js"></script>
  <script>
  	var app = new Vue({
  		el: '#app',
  		data: {
  			imgSrc: "https://www.itheima.com/images/logo.png",
  			imgtitle: "黑马程序员",
  			isActive: false
  		},
  		methods: {
  			toggleActive: function () {
  				this.isActive = !this.isActive
  			}
  		}
  	})
  </script>

v-bind 绑定style

1. v-bind:style：可以绑定一些 CSS 内联样式。
2. 在写 CSS 属性名的时候，比如 font-size
   • 采用驼峰式：fontSize 。
   • 或者短横线分隔（记得用单引号括起来）'font-size' 。
3. 绑定 class 有两种方式：

   • 对象语法：:style="{key(属性名): 'value(属性值)'}"

     1）对象的 key 是 CSS 属性名称。

     2）对象的 value 是具体赋的值，值可以来自于 data 中的属性。

   • 数组语法：:style="[baseStyles,overridingStyles]"

     1）多个值以 ， 分隔即可。

v-for 指令

v-for 遍历数组

• 根据数据生成列表结构。
• 数组经常和 v-for 结合使用。
• 语法是：(item,index) in 数据。
• item 和 index 可以结合其他指令一起使用。
• 数组长度的更新会同步到页面上，是响应式的。

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
        <!-- v-for：循环遍历 movies 这个数组，给它展示出来 -->
    </ul>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越','大话西游','你的婚礼','我要我们在一起','我在时间尽头等你']
        },
    }) 
</script>

v-for 遍历对象

<div id="app">
	<ul>
		<li v-for="item in info">{{item}}</li>
        <!-- 也可以同时获取 key 和 value ：格式：(value,key) -->
	</ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			info:{
				name: 'mengzhao',
				age: 20,
				height: 1.75
			}
		},
	})
</script>

• 运行结果：

组件的 key 属性

1. 官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个 key 属性。
2. key 的作用**主要是为了高效的更新虚拟 DOM ** 。
3. 了解内容：
   • 为什么需要这个 key 属性呢？
     • 这其实和 Vue 的虚拟 DOM 的 Diff 算法有关系。
     • 这里我们借用 React' s diff algorithm 中的一张图来简单说明一下
   • 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。
     • 我们希望可以在 B 和 C 之间加一个 F ，Diff 算法默认执行起来是这样的。
     • 即把 C 更新成 F , D 更新成 C , E 更新成 D ，最后再插入 E ，是不是很没有效率？
   • 所以我们需要使用 key 来给每个节点做一个唯一标识。
     • Diff 算法就可以正确的识别此节点。
     • 找到正确的位置插入新的节点。

检测数组更新

1. 因为 Vue 是响应式的，所以当数据发生变化时，Vue 会自动监测数据变化，视图会发生对应的更新。
2. Vue 中包含了一组观察数组编译的方法，使用它们改变数据也会触发视图的更新。
   • push()：在数组最后添加元素。
   • pop()：在数组后面删除最后一个元素，并返回数组。
   • shift()：在数组后面删除第一个元素，并返回数组。
   • unshift()：将一个或多个元素添加到数组的开头，并返回新数组的长度。
   • splice()：删除元素/修改元素/添加元素。
   • sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
   • reverse()：反转数组项的顺序。

作业的回顾

• 数组中包括几个电影，以列表的形式展示在页面上，点击哪个哪个变成红色。

<div id="app">
	<ul>
		<li v-for="(item,index) in movies" :class="{active: currentIndex === index}" @click="liclick(index)">{{item}}</li>
	</ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			movies: ['我在时间尽头等你','我要我们在一起','你的婚礼','当男人恋爱时'],
			currentIndex: 0
		},
		methods: {
			liclick(index){
				this.currentIndex = index
			}
		}
	})
</script>

v-once 指令

1. v-once 指令：
   • 该指令后面不需要跟任何表达式（比如之前的 v-for 后面是跟表达式的）。
   • 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

v-pre 指令

1. 在特定情境下才会使用 v-pre 指令。
   • 如果需要展示{{message}}的时候。

<div id="app">
    <h2 v-pre>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
    }) 
</script>

<!-- 在页面展示效果是{{message}}，而不是你好啊 -->

v-cloak

1. 在 Vue 解析之前，div 中有一个属性 v-cloak。
2. 在 Vue 解析之后，div 中没有一个属性 v-cloak。

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <h2 v-cloak>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
    }) 
</script>

v-show

<div id="app">
	<!-- v-if：当条件为 false 时，包含 v-if 指令的元素，根本不存在 DOM 中。 -->
	<h2 v-if="isShow">{{message}}</h2>

	<!-- v-show：当条件为 false 时，v-show 只是给元素添加了一个行内样式：display: none -->
	<h2 v-show="isShow">{{message}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			message: '你好啊',
			isShow: true
		},
	})
</script>

在开发中如何选择 v-if 和 v-show 呢？

• 当需要在显示与隐藏之间切换很频繁时，用 v-show 。
• 当只有一次切换时，通过 v-if 。

记事本案例

功能

1. 新增
   • 生成列表结构（v-for 数组）。
   • 获取用户输入（v-model）。
   • 回车，新增数据（v-on .enter 添加数据）。
2. 删除
   • 点击删除指定内容（v-on splice 索引）。
3. 统计
   • 统计信息个数（v-text length）。
   • 基于数据的开发方式。
4. 清空
   • 点击清除所有信息（v-on）。
5. 隐藏
   • 没有数据时，隐藏元素（v-show v-if 数组非空）。

<!-- 主体区域 -->
<section id="todoapp">
	<!-- 输入框 -->
	<header class="header">
		<h1>记事本</h1>
		<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
	</header>
	<!-- 列表区域 -->
	<section class="main">
		<ul class="todo-list">
			<li class="todo" v-for="(item,index) in list">
				<div class="view">
					<span class="index">{{ index+1 }}</span>
					<label>{{ item }}</label>
					<button class="destroy" @click="remove(index)">x</button>
				</div>
			</li>
		</ul>
	</section>
	<!-- 统计和清空 -->
	<footer class="footer">
		<span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong>items left</span>
		<button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
	</footer>
</section>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '#todoapp',
		data: {
			list: ['写代码', '吃饭饭', '玩游戏'],
			inputValue: ""
		},
		methods: {
			add: function () {
				this.list.push(this.inputValue)
				this.inputValue = ''
				},
			remove: function (index) {
				this.list.splice(index, 1)
			},
			clear: function () {
				this.list = []
			}
		}
	})
</script>

图书购物车案例

过滤器

1. 在实例的 options 里面定义过滤器。

// 使用过滤器的方法：
// {{item.price | 过滤器}}

// 定义过滤器的方法：
const app = new Vue({
    el: '',
    data: ' ',
    // 过滤器
    filters:{
        函数名(需要过滤的参数){
            函数体
        }
    }
})

案例源码

<div id="app">
	<div v-if="this.books.length">
		<table>
			<thead>
				<th></th>
				<th>书籍名称</th>
				<th>出版日期</th>
				<th>价格</th>
				<th>购买数量</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr v-for="(item,index) in books">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.date}}</td>
					<td>{{item.price | finalPrice}}</td>
					<td>
						<button @click="decresement(index)" v-bind:disabled="item.count <= 1">-</button>
						{{item.count}}
						<button @click="incresement(index)">+</button>
					</td>
					<td>
						<button @click="clearClick(index)">操作</button>
					</td>
				</tr>
			</tbody>
		</table>
		<h2>总价格：{{totalPrice | finalPrice}}</h2>
	</div>
	<h2 v-else>购物车为空！</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			books: [{
				id: 1,
				name: '《算法导论》',
				date: '2020-12-02',
				price: 128.00,
				count: 1
			}, {
				id: 2,
				name: '《C语言程序设计》',
				date: '2002-2-02',
				price: 88.00,
				count: 1
			}, {
				id: 3,
				name: '《Vuejs从入门到基础》',
				date: '2020-3-02',
				price: 48.00,
				count: 1
			}, {
				id: 4,
				name: '《Java程序设计》',
				date: '2004-1-28',
				price: 64.00,
				count: 1
			}, {
				id: 5,
				name: '《JavaScript权威指南》',
				date: '2000-8-05',
				price: 108.00,
				count: 1
			}],
		},

		computed: {
			totalPrice(){
				let totalprice = 0
				for(let i=0;i<this.books.length;i++){
					totalprice += this.books[i].price * this.books[i].count
				}
				return totalprice
			}
		},
		methods: {
			decresement(index) {
				this.books[index].count--
			},
			incresement(index) {
				this.books[index].count++
			},
			clearClick(index) {
				this.books.splice(index, 1)
			}
		},
        // 过滤器
		filters: {
			finalPrice(price) {
				return '￥' + price.toFixed(2)
			}
		}
	})
</script>