2024年最全Vue 学习笔记 —— 常用特性（二），软件前端开发-CSDN博客

本文链接：https://blog.csdn.net/2401_84617246/article/details/138518455

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

在这里插入图片描述

3.3 局部自定义命令

前面定义过的样子就相当于一个全局的自定义命令。因此有全局的定义，就有对应的局部自定义命令的定义。

我们直接在一个 vue 实例当中定义 directives 属性即可。

因此我定义了两个方法，分别是聚焦，和颜色改变的方法

自定义指令

在这里插入图片描述

四、计算属性（computed）

================================================================================

4.1 计算属性功能

首先计算属性和方法的使用基本差不多，但是计算属性也有它独有的特点

对应比较复杂的运算逻辑，使用计算属性可以提高运行效率（因为它还提供了缓存机制）
计算属性是依赖于 data 当中的数据
计算属性第一次计算会将结果缓存起来，第二次在运算的时候会将计算的记过直接取出来

4.2 计算属性的基本使用

下面以一个反转字符串为例，我们来看下综合运行的情况。

自定义指令

原生字符串：{{msg}}

反转字符串：{{msg.split('').reverse().join('')}}

计算属性测试

计算属性方法实现：{{reverseMessage}}

方法测试

方法实现反转字符串：{{reverseMsg()}}

4.3 演示效果

我们看下两个方法分别打印了几次在这里插入图片描述

计算属性只打印了一次，只有第一次调用的时候才会打印。这也证明了计算属性在某方面确实性能比方法搞很多

五、侦听器（watch）

============================================================================

侦听器简单的来说就是数据有变化就通知监听器所绑定的方法。

侦听器主要用来侦听属性

侦听器的关键字是 watch，使用起来和计算属性差不多

5.1 侦听器的基本使用

接下来我们以一个用户姓与名的拼接的小案例来演示侦听器的使用

侦听器

名：

姓：

计算属性：{{fullName}}

在这里插入图片描述

5.2 侦听器小实例，用户验证小 demo

侦听器的使用情景一般在 ajax 验证用的比较多，接下来我们就以一个简单的用户验证为例演示 watch 的使用场景。

验证基本流程

我们使用 v-modal 实现用户的双向绑定
监听器用来监听用户输入的用户名的变化
用户输入完毕，调用后台接口实现验证，这里简化操作，使用定时器模拟 ‘验证’ 的操作。
再将验证的结果返回给前台。

账户验证

用户名：

在这里插入图片描述

六、过滤器（filters）

=============================================================================

6.1 过滤器的基本使用

首先，我们需要自定义一个过滤规则，然后在插值表达式中，加上过滤规则，就完成了过滤器的基本使用，我们将会在下面介绍过滤器的基本定义

使用场景：

插值表达式
属性绑定

过滤器的使用基本有三种方式

普通过滤{{msg | upper}}

级联操作：{{msg | lower | upper}}

全局属性：属性绑定

测试数据

竖杠右边的就是我们定义的过滤规则

6.2 全局过滤器

我们以首字母大小转换的为例，通过过滤器，将首字母变换大写，和小写来演示全局过滤器的使用

过滤器

全局数据

首字母大写 {{msg | upper}}

首字母小写： {{msg | lower}}

级联操作：{{msg | lower | upper}}

全局属性：属性绑定

测试数据

级联操作：解释一下，级联操作，会以最终的为准，我这里是首字母先转换为小写，在转换为大写，所以看到的是大写的效果。

在这里插入图片描述

全局属性绑定：

在这里插入图片描述

6.3 局部过滤器

局部过滤器使用的对象是 filters，同其他的对象一样，都需要将结果返回

过滤器

局部指令：反转字符串

在这里插入图片描述

6.4 携参过滤（小案例，时间格式化）

我们以时间格式化的案例来讲解过滤器携带参数

过滤器

带参数的过滤器：{{date | format(‘yyyy-MM-dd’)}}

当然网上有比较好的方案，这里只是演示基本使用

在这里插入图片描述

七、Vue 生命周期讲解

===========================================================================

7.1 生命周期阶段

挂载（初始化相关属性）
beforeCreate
created
beforeMount
mounted
更新（元素或组件的变更操作）
beforeUpdate
updated
销毁（销毁相关属性）
beforeDestory
destroyed

7.2 使用场景

① beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。

② created 在实例创建完成后被立即调用。

③ beforeMount 在挂载开始之前被调用。

④ mountgd e|被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

⑤ beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。

⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。

⑦ beforeDestroy 实例销毁之前调用。

⑧ destroyed 实例销毁后调用。销毁的时候使用 this.$destory()

7.3 真实案例

我们在开发 Vue 项目的时候，比如要加载列表数据，一般会在 created 方法里调用这个获取数据列表的方法。

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

前端路线图