【Vue全解6】options之资源(directive、filter、components)+修饰符

目录

• 系列文章
• 指令Directive
• 自定义指令
• filter
• components
• 修饰符
• .sync修饰符

---

一、系列文章

【Vue 全解 0】Vue 实例
【Vue 全解 1】构造选项 options 之 data
【Vue 全解 2】Vue 模板语法摘要
【Vue 全解 3】Vue 的 data 代理和数据响应式
【Vue 全解 4】options 之生命周期钩子（created、mounted、updated、destroyed）
【Vue 全解 5】options 之 DOM（el、template、render）
【Vue 全解 6】options 之资源（directive、filter、components）和修饰符
【Vue 全解 7】options 之组合（mixin、extends、provide/inject）
【Vue 全解 8】Vue 表单输入绑定 v-model

二、指令Directive

• 什么是指令？

  在Vue中，以v-开头的就是指令

• 语法

v-指令名:参数=值，如：v-on:click='add'

1. 如果值里无特殊符号，可以不加引号
2. 有些指令没有参数和值：如：v-pre
3. 有些指令没有值，如：v-on:click.prevent

• 作用

  主要用于DOM操作：Vue实例/组件用于数据绑定、事件监听、DOM更新。

  Vue主要目的就是原生DOM操作

  减少重复–如果某个DOM操作比较复杂或者你经常使用，就可以封装成为指令。

• 缩写

  1. v-on:click=add可以缩写成@click=add

  2. v-bind:src='xxx'可以缩写成 :src='xxx'

  3. 注意只有这两个能缩写！

• 常用指令

---

三、自定义指令

1、定义一个全局指令：Vue.directive('x',directiveOptions);

• 副组件--文件名为Demo.vue

<template>
<div>
	/* 点击该盒子，在这里使用v-x指令 */
	<div v-x class='square'>这是div盒子</div>
</div>
</template>
<script>
	export default{
		data:{
			return {
				n:0
			}
		},
	}
</script>
<style scoped>
	.square{
		width:100px;
		height:100px;
		border:1px solid red;
	}
</style>

• 主组件

import Vue from "vue/dist/vue.js";	//导入完整版vue
import Demo from './Demo.vue'
/* 定义一个全局指令：v-x */
Vue.directive('x',{
	inserted(el){
		el.addEventListener('click',()=>console.log('你执行了自定义指令v-x');)
	}
});
new Vue({
	data:{
		n:n
	},
	render:h=>h(Demo)
}).$mount('#app');

---

2、定义一个局部指令：new Vue({...,directives:{"x":directiveOptions}})

• 副组件

<template>
<div>
	/* 点击该盒子，在这里使用v-x指令 */
	<div v-y class='square'>这是div盒子</div>
</div>
</template>
<script>
	export default{
		data:{
			return {
				n:0
			}
		},
		directives:{
			"y":{
				inserted(el){
					el.addEventListener('click',()=>console.log('你在这个组件里面使用了局部指令v-y');)
				}
			}
		}
	}
</script>
<style scoped>
	.square{
		width:100px;
		height:100px;
		border:1px solid red;
	}
</style>

---

3、directiveOptions

五个函数属性

• bind(el,binding(info),vnode,oldVnode)--类型created
• inserted(参数同上)--类似mounted
• update(参数同上)--类似updated
• componentUpdated(参数同上)--用得不多
• unbind(参数同上)--类似destroyed

举例：自定义指令v-on2 模仿v-on

import Vue from "vue/dist/vue.js";	//导入完整版vue
new Vue({
	directives:{
		'on2':{
			inserted(el,info){
				el.addEventListener(info.arg,info.value)
			},
			/* 简化版v-on2，因为没有事件委托。注意最好在最好使用unbind解除该事件，不然垃圾内存会越来越多 */
			unbind(){
				el.removeEventListener(info.arg,info.value)

			}
		}
	},
	template:`
		<button v-on2:click='hi'>点击我</button>
	`,
	methods:{
		hi(){
			console.log('hi!');
		}
	}
}).$mount('#app')

---

四、filter

不常用，这是Vue作者自己封装的filter。但是一般我们使用原生的filter函数也行，不会有什么差别。

---

五、components

组件相信大家也不陌生了，就是为了使代码更具模块化，代码有更好的维护性。下面简单示例以下组件的使用

注意：组件里面的data只能使用函数，不能使用对象。

• 副组件--文件名为Demo.vue

<template>
<div>
	<span class='text'>这是副组件</span>
</div>
</template>
<script>
	export default{
		data(){
			return {
				n:0
			}
		},
	}
</script>
<style scoped>
	.text{
		display:inline-block;
		width:100px;
		height:100px;
		border:1px solid red;
	}
</style>

• 主组件

import Vue from "vue/dist/vue.js";	//导入完整版vue
import Demo from './Demo.vue';	//导入副组件
new Vue({
	data:{
		n:n
	},
	/* 解构赋值 */
	components:{Demo},
	template:`
		<span>下面是副组件</span>
		<hr/>
		<Demo/>
	`
}).$mount('#app');

---

六、修饰符

修饰符是用于限定类型以及类型成员的声明的一种符号。

1、有些指令支持修饰符

• @click.stop='add'表示阻止事件传播/冒泡
• @click.prevent='add'表示阻止默认动作
• @click.stop.prevent='add'连写表示同时包含上面两种意思

2、一共有哪些修饰符呢？

• v-on支持的有

.{keyCode|keyAlias--别名} | .stop | .prevent | .capture |
.self | .once | .passive | .native |

1. 快捷键相关

.ctrl | .alt | .shift | .meta |.exact

2. 鼠标相关

.left | .right | .middle

---

• v-bind支持的有

.prop | .camel | .sync

• v-model支持的有

.lazy | .number | .trim

---

3、修饰符用法举例

import vue from 'vue/dist/vue.js';	//导入完整版vue
new Vue({
	template:`
		<div>
			/* 当用户输入1的时候才执行y函数 */
			<input @keypress.1='y' />
			/* 别名alias */
			/* 用户打了回车后才执行x函数 */
			<input @keypress.enter='x' />
		</div>
	`,
	methods:{
		x(){
			console.log('用户打了回车');
		},
		y(){
			console.log('用户输入了1');
		}
	}
})

4、修饰符传送门

---

七、.sync修饰符

• 情景一

  爸爸给儿子钱，儿子要花钱怎么办？

  答：儿子打电话或直接问（触发事件）爸爸要钱，爸爸知道了才决定给或不给，给又是给多少。

1、Vue规则

• 组件不能修改props外部数据
• $emit可以触发事件，并传参
• $event可以获取$emit的参数
• $emit和$event就是EventBus
• props外部数据解释示例

2、由于情景一很常见，Vue作者就发明了.sync修饰符

• 代码示例
• 副组件--App.vue

<template>
	<div class='app'>
		App.vue 我现在有{{total}}
		<hr>
		<child :money="total" v-on:update_money="total=$event"/>
	</div>
</template>
<script>
	import child from './child.vue';
	export default{
		data(){
			return {
				total:10000
			}
		},
		components:{child}
	}
</script>
<style>
	.app {
		border: 3px solid red;
		padding: 10px;
	}
</style>

• 副组件--child.vue

<template>
	<div class='child'>
		{{money}}
		/* $emit在这里触发事件:'update_money，并传递参数money-100' */
		<button @click="$emit('update_money',money-100)">
			<span>花钱100</span>
		</button>
	</div>
<template>
<script>
	export default {
		/* 外部数据money */
		props:['money']
	}
</script>
<style>
	.child {
		border: 3px solid green;
	}
</style>

• 主组件

import Vue from 'vue';	//使用非完整版Vue
import App from './App.vue';	//导入组件
new Vue({
	render: h=>h(App)
}).$mount('#app')

---

## 单独看这一段代码

<child :money="total" v-on:update_money="total=$event"/>

其实上面的一句代码挺长的是不是？那么.sync的功能就是替代它！

<child :money.sync="total"/>

3、小结

• :money.sync="total"等价于:money="total" v-on:updata_money="total=$event"