Vue 学习笔记 —— 常用特性 （二）

• 6.3 局部过滤器

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

• 七、Vue 生命周期讲解

• • • 7.1 生命周期阶段

• 7.2 使用场景

• 7.3 真实案例

做一名在校大学生，我的梦想是做一名独立的开发者，具备全栈思维额能力的一名开发者，我的技术栈是 SpringBoot + Vue 学习记录来自

一、学习概览

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

1. 表单操作

2. 自定义指令

3. 计算属性

4. 监听器

5. 滤器器

6. 生命周期

二、表单操作

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

2.1 基于 Vue 的表单操作概览

• input 单行文本

• textarea 多行文本

• select 下拉多选

• radio 单选框

• checkbox 复选框

2.2 input 处理

我们点击 form 表单，默认需要点击 submit 按钮就会提交，然后 action 就会跳转到相对的页面，但是我们要禁用 action 跳转，就得使用 js 来处理点击事件，后台调用 ajax 来请求后端的数据。

但是在 vue 中，可以使用 v-model 来绑定我们存储的数据，然后使用 @click 来解决点击事件

姓名：

<input type=“submit” value=“提交” @click.prevent=“handleClick”>

2.3 radio 单选框处理

单选框也是通过 v-model 显示指定数据

性别：

男

女

<input type=“submit” value=“提交” @click.prevent=“handleClick”>

2.4 checkbox 处理

checkbox 可以一次选择多个值，所以 checkbox 的值使用 数组来保存，数据绑定同样是使用 v-model 来完成

爱好：

篮球

唱歌

写代码

<input type=“submit” value=“提交” @click.prevent=“handleClick”>

2.5 select 下拉框处理

2.5.1 选择一条数据

下拉框选择一条值的时候和单选框的情况是一样的，一样使用 v-model 来绑定

专业：

请选择专业.. 计算机 软件工程 通信工程 物联网工程

<input type=“submit” value=“提交” @click.prevent=“handleClick”>

2.5.2 select 选择多条数据

我们在 select 中加一条属性， multiple ，然后就和 多选框的情况是一样的啦，下面就会默认选中 2 和 4的 option

专业：

请选择专业.. 计算机 软件工程 通信工程 物联网工程

2.6 textarea 文本框处理

使用的方法和 input 是一样的，但是要注意，在 vue 中不能在 textarea 中加入内容，如果该标签被 v-model 处理，他得知最终会显示为 data 中的数据

介绍：

2.7 表单域修饰符

• number 转换为数值

• trim：去掉开始和结尾的空格

• lazy：将 input 事件转换为 change 事件

2.7.1 number 类型

一般情况在 JavaScript 中计算的都是 字符串拼接，如果我们要进行数值类型计算，就要使用类型转换

number

<button @click=“calc”>计算

要计算整数，我们只需要这么做：<input type="text" v-model.number="num"/> ，将 v-model 加上 .number 属性就好了

2.7.2 trim 去除两边空格

2.7.3 lazy 事件

默认 v-model 使用的是 input 事件，我们可以在输入的内容加一个插值表达式，发现数值是和我们输入的内容一起变化的。但是我们加上 lazy 事件之后，就会变成 change 事件，简而言之，就是变成了失去焦点事件，当失去焦点了才会触发

这个 lazy 事件非常适合用于验证账户是否符合条件，这里集合 ajax 就会很简单

三、自定义命令

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

官网

前面用过的 v-xxx 都是vue 中的内置指令，但是内置指令不满足某些场景的使用功能，所以我们可以使用自定义组件，接下来编写一个简单的自动聚焦的方法

3.1 不带参数的自定义指令

3.2 带参数的自定义指令

根据自定义指令，改变颜色

3.3 局部自定义命令

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

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

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

四、计算属性 （computed）

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

4.1 计算属性功能

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

1. 对应比较复杂的运算逻辑，使用计算属性可以提高运行效率 （因为它还提供了缓存机制）

2. 计算属性是依赖于 data 当中的数据

3. 计算属性第一次计算会将结果缓存起来，第二次在运算的时候会将计算的记过直接取出来

4.2 计算属性的基本使用

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

原生字符串：{{msg}}

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

计算属性测试

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

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

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

方法测试

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

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

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

4.3 演示效果

我们看下两个方法分别打印了几次

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

五、侦听器 （watch）

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

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

侦听器主要用来侦听属性

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

5.1 侦听器的基本使用

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

名：

姓：

{{fullname}}

计算属性：{{fullName}}

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

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

验证基本流程

1. 我们使用 v-modal 实现用户的双向绑定

2. 监听器用来监听用户输入的用户名的变化

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
ZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWRld2VpMTIx,size_16,color_FFFFFF,t_70)

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

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

验证基本流程

1. 我们使用 v-modal 实现用户的双向绑定

2. 监听器用来监听用户输入的用户名的变化

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-9eoEIr6q-1715654979688)]

[外链图片转存中…(img-EiFcIfRI-1715654979689)]

[外链图片转存中…(img-L6ZBXMNi-1715654979689)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！