以下笔记皆基于 Vue 2
自定义指令
指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装。当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置。
自定义全局指令
自定义指令指的是可以被任意 Vue 实例或组件使用的指令。以下是自定义指令的设置方式，自定义指令内钩子函数 inserted 函数可以接收当前使用指令的元素 element ，在函数捏对 element 参数进行操作实现指令，也可以接收 binding 参数获取元素绑定的相关信息，比如修饰符信息以及赋值信息。
<body>
<div id="app">
<input type="text" v-focus.a.b="100+1">
</div>
<script src="lib/vue.js"></script>
<script>
// 自定义全局指令，'focus' 为指令名称
Vue.directive('focus', {
inserted (element, binding) {
console.log(element);
console.log(binding);
el.focus();
}
});
new Vue({
el: '#app',
data: { }
});
</script>
</body>
自定义局部指令
自定义局部指令指的是可以在当前 Vue 实例或组件内使用的指令。
<body>
<div id="app">
<input type="text" v-focus>
</div>
<!-- app2 无法使用 v-focus -->
<div id="app2">
<input type="text" v-focus>
</div>
<script src="lib/vue.js"></script>
<script>
// 自定义局部指令
new Vue({
el: '#app',
data: {},
directives: {
focus: {
inserted (el) {
el.focus();
}
}
}
});
new Vue({
el: '#app2'
});
</script>
</body>
过滤器
过滤器用于进行文本内容格式化处理，通过管道符 |，在插值表达式和 v-bind 中使用，过滤器内返回的值就是最终结果，否则为空。
和自定义指令类似，同样分为全局过滤器和局部过滤器，局部过滤器只能在当前 Vue 实例中使用。
<body>
<div id="app">
<p v-bind:title="value | filterA">这是标签</p>
<p>{{ value2 | filterA }}</p>
</div>
<div id="app2">
<p>{{ value | filterA }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// 设置全局过滤器
Vue.filter('filterA', function (value) {
return value.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c',
value2: 'x-y-z'
}
});
new Vue({
el: '#app2',
data: {
value: 'q-w-e'
},
// 局部过滤器
filters: {
filterA: function (value) {
return value.split('-').join('');
}
}
})
</script>
</body>
在使用过滤器时，可以将一个数据传入到多个过滤器中进行处理，其处理顺序是从左往右依次进行，并且一个过滤器可以传入多个参数，传入的第一个形参固定为使用过滤器的值，后面的形参才是自定义传入的的参数。
<body>
<div id="app">
<p>{{ value | filterA | filterB }}</p>
<p>{{ value | filterC('lagou-', 200) }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// 去除 '-' 过滤器
Vue.filter('filterA', function (value) {
console.log(value, 'filterA');
return value.split('-').join('');
});
// 首字母大写过滤器
Vue.filter('filterB', function (value) {
console.log(value, 'filterB');
return value[0].toUpperCase() + value.slice(1);
})
// 传入参数，去除 value 的 '-' 再拼接到第一个实参的末尾
Vue.filter('filterC', function (par1, par2, par3) {
return par2 + par1.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
});
</script>
</body>
注意：如果局部过滤器与全局过滤器重名，则会使用局部过滤器，类似于全局变量与局部变量的关系。
计算属性
Vue.js 的视图不建议书写复杂逻辑，这样不利于维护。比如：
<div id="app">
<p>{{ Math.max.apply(null, arr) }}</p>
<p>{{ Math.max.apply(null, arr) }}</p>
<p>{{ Math.max.apply(null, arr) }}</p>
</div>
封装函数是很好的方式，但有时重复的计算会消耗不必要的性能，而计算属性使用时为属性形式，访问时会自动执行对应函数，且在视图使用时只会计算一次结果，计算结果放入缓存中，下次调用同样的计算函数会直接在缓存中读取结果。
测试代码
<body>
<div id="app">
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getResult }}</p>
<p>{{ getResult }}</p>
<p>{{ getResult }}</p>
<p>{{ getResult }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
methods: {
getSum () {
console.log('执行了函数功能');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
},
computed: {
getResult () {
console.log('执行了计算属性');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
}
})
</script>
</body>
methods 与 computed 区别
- computed 具有缓存型，methods 没有。
- computed 通过属性名访问，methods 需要调用。
- computed 仅适用于计算操作。
计算属性的 setter
计算属性默认只有 getter，即被访问时要执行的操作，Vue.js 也允许给计算属性设置 setter ，即赋值时要执行的操作。
var vm = new Vue({
computed: {
getResult: {
// getter
get: function () {
// 逻辑代码
}
// setter
set: function () {
// 逻辑代码
}
}
}
});
侦听器
侦听器 watch 用于监听数据变化并执行指定操作。
new Vue({
el: '#app'
data: {
value: ''
},
watch: {
value (newValue, oldValue) {
// 逻辑代码
}
}
});
为了监听对象内部值的变化，需要将 watch 书写为对象，并设置选项 deep: true，这时通过 handler 设置处理函数。
new Vue({
el: '#app',
data: {
obj: {
content1: '内容1',
content2: '内容2'
}
},
watch: {
obj: {
deep: true,
handler (val, oldval) {
console.log(val, oldVal);
}
}
}
});
注意：
- 当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组 、对象。
- 数组操作不要使用索引与length，无法触发侦听器函数。
Vue DevTools
Vue DevTools 是 Vue.js 官方提供的用来调试 Vue 应用的工具，为 Chrome 浏览器插件。
Chrome 网上应用店 - 扩展程序，没法打开可以先安装【iGG谷歌访问助手】插件。
注意：Edge 浏览器的插件商城是没有 Vue DevTools 插件的，但是 Edge 也是 Chrome 内核，所以 Edge 也可以安装 Chrome 插件，因此可以在 Edge 上进入 Chrome 网上应用店安装 Vue DevTools 。
注意事项：
- 网页必须应用了 Vue.js 功能才能看到 Vue DevTools
- 网页必须使用 Vue.js 而不是 Vue.min.js
- 网页需要在 http 协议下打开，而不是使用 file 协议本地打开。
Vue.js 生命周期
Vue.js 生命周期指的是 Vue 实例的生命周期，即实例从创建到运行，再到销毁的过程，通过设置生命周期函数，可以在生命周期的特定阶段执行功能，而生命周期函数也称为生命周期钩子。
-
创建阶段（特点：每个实例只能执行一次）
- beforeCreate：实例初始化之前调用。
- created： 实例创建后调用。
- beforeMount：实例挂载之前调用。
- mounted： 实例挂载完毕。
-
运行阶段（特点：按需调用）
- beforeUpdate：数据更新后，视图更新前调用。
- updated： 视图更新后调用。
-
销毁阶段（特点：每个实例只能执行一次）
- beforeDestroy：实例销毁之前调用。
- destroyed： 实例销毁后调用。
