自定义指令
指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装
当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置
自定义全局指令
指的是可以被任意 Vue 实例或组件使用的指令
<div id="app">
<input type="text" v-focus>
</div>
<!-- ================================ -->
<script>
Vue.directive('focus', {
inserted (el) {
el.focus();
}
})
</script>
自定义局部指令
指的是可以在当前 Vue 实例或组件内使用的指令
<div id="app">
<input type="text" v-focus>
</div>
<!-- ================================ -->
<script>
new Vue({
// =============
directives: {
focus: {
inserted (el) {
el.focus();
}
}
}
})
</script>
过滤器
过滤器用于进行文本内容格式化处理
过滤器可以直接在插值表达式和 v-bind 中使用
全局过滤器
可以将一个数据传入到多个过滤器中进行处理
<div id="app">
<div> {
{ content | filterA | filterB }} </div>
</div>
<!-- ====================================== -->
<script>
Vue.filter('过滤器名称', function (value) {
// 逻辑代码
return '处理结果';
})
</script>
过滤器能在插值表达式和 v-bind 中使用，通过管道符 | 连接数据
<div id="app">
<div v-bind:id="id | filterId"></div>
<div> {
{ content | filterContent }} </div>
</div>
<!-- ====================================== -->
<script>
Vue.filter('过滤器名称', function (value) {
// 逻辑代码
return '处理结果';
})
</script>
一个过滤器可以传入多个参数
<div id="app">
<div> {
{ content | filterContent(par1, par2) }} </div>
</div>
局部过滤器
局部过滤器只能在当前 Vue 实例中使用
new Vue({
// =============
filters: {
过滤器名称: function (value) {
// 逻辑代码
return '处理结果';
}
}
})
计算属性
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>
封装函数是很好的方式，但有时重复的计算会消耗不必要的性能
<div id="app">
<p> {
{ getSum() }} </p>
<p> {
{ getSum() }} </p>
<p> {
{ getSum() }} </p>
</div>
<!-- ========================= -->
<script>
var vm = new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 4, 5]
},
methods: {
getSum () {
var sum = 0;
for (var i = 0; i < this.arr.length; i++) {
sum += this.arr[i];
}
return sum;
}
}
})
</script>
计算属性使用时为属性形式，访问时会自动执行对应函数
<div id="app">
<p> {
{ result }} </p>
<p> {
{ result }} </p>
<p> {
{ result }} </p>
</div>
<!-- ========================= -->
<script>
var vm = new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 4, 5]
},
computed: {
result () {
var sum = 0;
for (var i = 0; i < this.arr.length; i++) {
sum += this.arr[i];
}
return sum;
}
}
})
</script>
methods 与 computed 区别
- computed 具有缓存性，methods 没有
- computed 通过属性名访问，methods 需要调用
- computed 仅适用于计算操作
计算属性的 setter
计算属性默认只有 getter，Vue.js 也允许给计算属性设置 setter
var vm = new Vue({
computed: {
getResult: {
get: function () {
// 逻辑代码
},
set : function (newValue) {
// 逻辑代码
}
}
}
})
侦听器
侦听器用于监听数据变化并执行指定操作
new Vue({
el: "#app",
data: {
value: ""
},
watch: {
vaule (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.js 官方提供的用来调试 Vue 应用的工具
- 注意事项
- 网页必须应用了 Vue.js 功能才能看到 Vue DevTools
- 网页必须使用 Vue.js 而不是 Vue.min.js
- 网页需要在使用 http 写一下打开，而不是使用 file 协议本地打开
Vue.js 生命周期
Vue.js 生命周期指的是 Vue 实例的生命周期
Vue 实例的生命周期，指的是实例从创建到运行，在到销毁的过程
Vue.js 生命周期函数
通过设置生命周期函数，可以在生命周期的特定阶段执行功能
生命周期函数也被称为生命周期钩子
- 创建阶段：
- beforeCreate：实例初始化之前调用
- created：实例创建后调用
- 请求数据
- beforeMount：实例挂载之前调用
- mounted：实例挂载完毕
- 操作 DOM
特点：每个实例只能执行一次
- 运行阶段
- beforeUpdate：数据更新后，视图更新前调用
- updated：视图更新后调用
特点：按需调用
- 销毁阶段
- beforeDestroy：实例销毁之前调用
- destroyed：实例销毁后调用
特点：每个实例只能执行一次