自定义指令
指令是用于简化DOM操作，相当于对基础DOM操作的一种封装。当我们希望使用一些内置指令不具备的DOM功能时，可以进行自定义指令设置。
自定义全局指令
指可以被任意Vue实例或组建使用的指令。
/**
* 创建自定义全局指令
* Vue.directive(arg1, arg2) 创建函数
* arg1 自定义指令名
* arg2 配置对象
*/
/**
* inserted(el, binding) 钩子函数，定义在元素在插入DOM中时进行的相关操作
* el 可选，设置了当前指令的元素
* binding 可选，当前指令设置的相关信息
*/
Vue.directive('focus', {
inserted (el, binding) {
console.log(el)
console.log(binding)
// 元素获取焦点
el.focus()
}
})
使用自定义指令：
<!-- 自定义指令使用时，需在名称前加v- -->
<input type="text" v-focus>
自定义局部指令
指只可以当前Vue实例或组建使用的指令。
const vm = new Vue({
el: '#app',
data: {},
directives: {
focus: {
inserted (el) {
el.focus()
}
}
}
})
使用自定义局部指令：
<div id="app">
<input type="text" v-focus>
</div>
过滤器
过滤器用于文本内容格式化处理。过滤器可以在插值表达式和v-bind指令中使用，通过管道符 | 传递数据。
全局过滤器
可以在任意Vue实例中使用。
// 设置全局过滤器
Vue.filter('filterA', function (value) {
return value.split('-').join('')
})
// 一个过滤器可以传入多个参数
Vue.filter('filterC', function (par1, par2, par3) {
return par2 + par1.split('-').join('');
})
使用全局过滤器：
<p v-bind:title="value | filterA">这是标签</p>
<p>{{ value2 | filterA }}</p>
<!-- 可以将一个数据传入多个过滤中处理，先左后右 -->
<p>{{ value | filterA | filterB }}</p>
<!-- 传入多个参数，value是参数1，'qqq-'是参数2,200是参数3 -->
<p>{{ value | filterC('qqq-', 200) }}</p>
局部过滤器
只能在当前Vue实例中使用。
new Vue({
el: '#app',
data: {},
filters: {
filterA: function (value) {
return value.split('-').join('')
},
filterB: function (value) {
return value.split('').reverse().join('')
},
filterC (value, prefix) {
return prefix + value;
}
}
})
计算属性
Vue.js的视图不建议书写复杂逻辑，这样不利于维护。封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。而vue.js的计算属性可执行函数，又可避免重复计算。
基本用法
const vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
// 计算属性
computed: {
getResult () {
console.log('执行了计算属性');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
}
})
调用计算属性
<!-- 计算属性不能加() -->
<p>{{ getResult }}</p>
<ul>
<!-- 计算属性和v-for指令结合使用 -->
<li v-for="item in result">{{ item }}</li>
</ul>
methods和computed的区别：
- computed具有缓存性，methods没有
- computed通过属性名访问，methods需要调用
- computed仅适用于计算操作，如果函数内部有DOM操作则不适用
setter
计算属性默认只有getter，但也可以设置setter，一般用来做整体数据的更新。
computed: {
// 默认书写方式：
/* fullName () {
return this.firstName + this.lastName;
} */
// 分开书写 getter 与 setter
fullName: {
get () {
return this.firstName + this.lastName;
},
set (newValue) {
console.log(newValue)
var nameArr = newValue.split(' ');
this.firstName = nameArr[0];
this.lastName = nameArr[1];
}
}
}
设置计算属性
vm.fullName = '张 三'
侦听器
侦听器用于监听数据变化并执行指定操作。
基本用法
var vm = new Vue({
el: '#app',
data: {
value: ''
},
// 侦听器，监听数据value变化
watch: {
value () {
console.log('侦听器执行了')
}
}
})
使用侦听器
<input type="text" v-model="value">
监听对象
需要设置deep: true属性，并使用handler()函数来执行指定操作。
watch: {
obj: {
deep: true,
handler (val, oldVal) {
// 对于对象或数组的内部元素更改，我们监听到的对象引用并没有发生变化，
// 新值与旧值都是相同引用，所以实际只需要val一个参数行了
console.log('obj 被修改了', val, oldVal)
console.log(val === oldVal)
}
}
}
监听数组
watch: {
arr (val, oldVal) {
console.log('arr 被修改了', val, oldVal)
console.log(val === oldVal)
}
}
注意：数组操作不要使用索引和length，可使用push()和Vue.set()，否则无法触发侦听器函数。
Vue DevTools
Vue DevTools是Vue.js官方提供的用来调试Vue应用的工具。
在谷歌浏览器，应用商店搜索Vuejs dev即可添加。
注意事项：
- 网页必须应用了Vue.js功能，才能看到Vue DevTools
- 网页必须使用vue.js而不是vue.min.js
- 网页需要在http协议下打开，而不是使用file协议本地打开
基本使用
- 在VS Code中使用插件Live Server打开需要调试的网页
2. 右键选择检查，在最右边的箭头处找到Vue，并点击
3. 在调试工具中查看修改数据，即可调试
Vue.js的生命周期
指的是Vue实例从创建到运行，再到销毁的过程。
Vue.js生命周期图示：
生命周期钩子
通过生命周期钩子，可以在生命周期特定阶段执行功能。
-
创建阶段
- beforeCreate：实例初始化之前调用
- created：实例创建后调用（data、methods等都已创建）
- beforeMount：实例挂载之前调用
- mounted：实例挂载完毕（实例已挂载到DOM元素）
特点：每个实例只能执行一次。
-
运行阶段
- beforeUpdate：数据更新后，视图更新前调用
- updated：视图更新后调用
特点：按需调用。
-
销毁阶段
- beforeDestroy：实例销毁前调用
- destroyed：实例销毁后调用 特点：每个实例只能执行一次。
