【H2O2|全栈】Vue2（二）

目录

前言

开篇语

准备工作

常用修饰符

v-model修饰符（3个）

事件修饰符（3个）

计算属性

案例

get()和set()

监听属性

案例

初始化监听

深度监听

生命周期

加载阶段

更新阶段

销毁

结束语

---

前言

开篇语

本系列博客主要讲述Vue2系列的基础语法，本期的内容为常用修饰符，计算属性，监听属性以及生命周期。

Vue的逻辑可能有些复杂，需要反复琢磨。与此同时，由于Vue2是基于JavaScript的，所以我们不要忘记基础的Web相关知识。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server, htmltagwrap

第三方js库（框架）：【参考版本】Vue.js 2.7.9

浏览器版本：Chrome

浏览器插件：Vue.js devtools

系统版本： Win10/11

常用修饰符

v-model修饰符（3个）

在表单输入时，用户可能会在开头或结尾输入多余的空格（输入法误输入空格），这时候就需要去除这些空格。

为此我们可以在v-model后面进行链式操作，添加 .trim 修饰符以去除首尾空格。

<input type="text" v-model.trim="value"/>

对于表单的输入值来说，它们默认都是字符串类型的，这样就会导致在进行求和运算时，参与计算的数字可能实际上是以字符串的形式进行了拼接操作。

<input type="text" v-model.trim="value1"/>
+
<input type="text" v-model.trim="value2"/>
=
{
  {value1+value2}}

这里我们在两个表单中分别输入1和2，我们预期的求和结果是3，但是实际上算出来却是12。

所以，我们可以为v-model继续添加修饰符 .number ，将字符串类型转化为数字类型。

修饰符支持链式操作。

<input type="text" v-model.trim.number="value1" />
+
<input type="text" v-model.trim.number="value2" />
=
{
  {value1+value2}}

由此一来，本例中的计算结果就正常了：

在上一步的计算例子中，我们发现输入的值实时在右侧更新了。有时我们不希望这种双向绑定实时刷新，而是在鼠标离开当前表单（失焦）时才更新，就可以使用懒加载 .lazy ，它的作用相当于表单的onchange事件。

<input type="text" v-model.trim.number.lazy="value1" />
+
<input type="text" v-model.trim.number.lazy="value2" />
=
{
  {value1+value2}}

在懒加载之后，我们在输入的过程中，只要表单没有失焦，结果就不会更新。

事件修饰符&