1、自定义指令
指令用于简化 DOM 操作,相当于对基础 DOM 操作的一种封装
当我们希望使用一些内置指令不具备的 DOM 功能时,可以进行自定义指令设置
- 自定义全局指令
全局指令指的是可以被任意 Vue 实例或组件使用的指令
Vue.directive('focus', { // focus 指令的名称 参数二是一个配置对象
inserted: function(el) { // el 是设置这个指令的 DOM 元素
el.focus(); // 自动获取焦点
}
})
<div id="app">
<input type="text" v-focus>
</div>
- 自定义局部指令
局部指令指的是可以在当前 Vue 实例或组件内使用的指令
new Vue ({
// 省略其他代码
directives: {
focus: {
inserted (el) {
el.focus();
}
}
}
})
2、 过滤器
过滤器用于进行文本内容格式化处理
过滤器可以在插值表达式和 v-bind 中使用
- 全局过滤器
全局过滤器可以在任意 Vue 实例中使用
Vue.filter('过滤器名称', function (value) {
// 逻辑代码
return '处理结果';
})
过滤器能在插值表达式和 v-bind 中使用,通过管道符|连接数据
<div id="app">
// 在 b-bind 中
<div v-bind:id="id | filterId"></div>
// 在差值表达式中
<div>{{ content | filterContent }}</div>
</div>
可以将一个数据传入到多个过滤器中进行处理
<div id="app">
<div>{{ content | filterA | filterB }}</div>
</div>
一个过滤器可以传入多个参数
<div>{{ content | filterContent(par1, par2) }}</div>
3、计算属性
Vue.js 的视图不建议书写复杂逻辑,这样不利于维护
封装函数是很好的方式,但有时重复的计算会消耗不必要的性能
计算属性使用时为属性形式,访问时会自动执行对应函数
computed : {
result() {
var sum = 0;
for(var i = 0; i < this.arr.length; i++) {
sum += this.arr[i];
}
return sum;
}
}
methods 与 computed 区别:
computed 具有缓存型,methods 没有;
computed 通过属性名访问,methods 需要调用;
computed 仅适用于计算操作;
4、计算属性 案例
准备一个数组,根据数组数据创建列表;要求:当数值大于 10 时创建li,否则不创建
以下三种方式:
v-if 与 v-for 结合
v-for 与 methods 结合
v-for 与 计算属性结合 // 执行效率高
5、 计算属性的 setter
计算属性默认只有 getter, Vue.js 也允许给计算属性设置 setter
computed: {
getResult: {
// getter
get: function() {},
// setter
set: function(newValue){}
}
// 以下是自己写的案例
fullname : {
get() {
return this.name1 + this.name2;
},
set(newValue) {}
}
}
6、侦听器
侦听器用于监听数据变化并执行指定操作
new Vue ({
el: "#app",
data: {
value: ""
},
watch: {
value (newValue, oldValue) {
// 逻辑代码
}
}
})
为了监听对象内部值的变化,需要将 watch 书写为对象, 并设置选项 deep:ture, 这时通过 handler 设置处理函数
watch: {
obj: {
deep: true,
handler(val, oldVal) {
console.log(val, oldVal);
}
}
}
注意: 当更改(非替换)数组或对象时,回调函数中的新值与旧值相同,因为它们引用都是指向同一个数组、对象;
数组操作不要使用索引与length,无法触发侦听器函数
watch: {
// todos 监听对象的名字
todos : {
deep: true,
handler: todoStorage.set
}
}
7、Vue DevTools
是 Vue.js 官方提供的用来调试 Vue 应用的工具
(更多工具 => 扩展程序 => 左上 三 => 下 打开谷歌商店 => 搜索Vue.js DevTools(提供方是 https://vue.js.org)
注意事项: 网页必须应用了 Vue.js 功能才能看到 VueTools;
网页必须使用 Vue.js 而不是 Vue.min.js;
网页需要在 http 协议下打开,而不是使用 file 协议本地打开
8、Vue.js 生命周期
Vue.js 生命周期指的是 Vue 实例的生命周期
Vue 实例的生命周期,指的是实例从创建到运行,再到销毁的过程
Vue.js 生命周期函数: 通过设置生命周期函数,可以在生命周期的特定阶段执行功能; 也叫生命周期钩子
生命周期函数
创建阶段:
beforeCreate: 实例初始化之前调用
created: 实例创建后调用
beforeMount: 实例挂载之前调用
Mounted: 实例挂载完毕
特点:每个实例只能执行一次
运行阶段:
beforeUpdate: 数据更新后,视图更新前调用
updated: 视图更新后调用
特点: 按需调用
销毁阶段:
beforeDestroy: 实例销毁之前调用
destroyed: 实例销毁后调用