关于Vue.js基础部分的个人理解及杂记(v-if, v-else, v-model及修饰符)

本篇记录了一些个人对Vue.js基础使用方法的理解及总结，修饰符的部分或许显得不是那么重要，但抱着“或许哪天会用上”的想法，就一并记录了。

---

1、关于v-if, v-else产生的现象及解决方案

现象：
比如要切换两个input，同样的type，不同的id，不同的placeholder等
但input1里输入了’123’，这时通过v-if, v-else切换至input2，在input1中输入的内容会被保留下来，而不是清空。
- 场景例：

// 1.向这个账号input随便输点内容
<input type="text" id="username" placeholder="用户账号" v-if="isUser">

// 3.原本输入给上面账号input的内容，却保留到邮箱input中了
<input type="text" id="email" placeholder="用户邮箱" v-else>

// 2.点击按钮，切换到邮箱input
<button @click="isUser = !isUser">切换类型</button>

data: {
  isUser: true
},

原因：
Vue在进行DOM渲染时，出于性能考虑，会尽可能复用已经存在的元素，而不是去重新创建新元素。
因此在上面的现象中，由于是两个input之间的切换，但只有id和placeholder内容等不同，Vue在dom渲染时，只将不同的部分（id、placeholder）进行替换，而已输入的value值并不会进行操作。

解决方案：
给对应的input添加一个key值，并确保input之间的key值不相同，这样一来 v-if v-else切换时，能确保已输入的value值会进行清空。

- 解决例：

// 给两个input各添加一个不同的key值，上面的现象就不存在了
<input type="text" id="username" placeholder="用户账号" v-if="isUser" key="username">
<input type="text" id="email" placeholder="用户邮箱" v-else  key="email">

2、v-model 双向绑定

- input值的绑定

单向绑定为model层向view层输入数据渲染页面，而利用v-model则可以通过view层的操作，改变model层的数据，例：input type=“text” 且绑定一个v-model=“text”，此时向该input内输入一些文字，model层内的data.text数据也会根据输入的内容而同步改变

<input type="text" v-model="text">
// 此处input用v-model绑定了text，value值就是Hello
// 同时操作该input进行删除或输入其他文字时，data内的text值也会同步改变

data: {
  text: 'Hello'
},

这个现象的原理就是在input输入内容时，同步监听键盘动作并将input值更新至对应数据（当然了，Vue的代码可没这么简单，这里只是说了个人的简单理解）

<input type="text" :value="text" @input="text = $event.target.value">
// 将input的value值绑定text，并监听input的输入动作，将输入后的input内容同步更新给text

data: {
  text: 'Hello'
},

- 多个input绑定一个data属性

多个input type=“radio” 需要一个name值来确保唯一性，然而如果多个radio使用v-model的data属性为同一个，例如性别: sex，则可以不加name，并且如果需要默认某个radio为选中，则将data内的sex改为该radio的value值即可。
PS: input type=“checkbox” 或 select 也是同样的思想

- 使用例：

// 两者绑定的v-model值相同，可不写name
<input type="radio" id="male" value="男" v-model="sex">男
<input type="radio" id="female" value="女" v-model="sex">女

data: {
	sex: '男' // 此处若赋予“男”，则value值为“男”的radio将默认选中
			// checkbox 及 select 也是同样的思想
}

3、v-model 修饰符

- v-model.lazy

- 场景例：

<input type="text" v-model="text">

在某些场景下，并不需要该input将输入的值进行即时绑定，而是在input输入完成后，敲打回车或失去焦点时，再绑定值，此类场景可以使用 修饰符 lazy

- 使用例：

<input type="text" v-model.lazy="text">
// 输入时，data内的text并不会改变
// 只有当用户敲了回车或input失去焦点，才会将值同步给data内的text

- v-model.number

- 场景例：

<input type="number" v-model="mobile">

在某些需要用户只能输入数字的场景下（如上），v-model会将获取的数字在绑定给data.mobile时自动转换为String格式，在使用该mobile数据时，可能需要开发者额外再次转换为Number格式，而此时修饰符 number 就派上用场了

- 使用例：

<input type="number" v-model.number="mobile">
// 这种情况下，输入的数字，直接就是Number格式

- v-model.trim

- 场景例：

<input type="text" v-model="text">

用户输入内容的过程中，可能存在内容两边不小心加了很多空格的现象，例如:” abc ”，但是在使用数据的时候，是不需要内容两边这些多余空格的，因此修饰符 trim 可以解决这个问题

- 场景例：

<input type="text" v-model="text">
// 用户在这边输入了"     abc        "，两边有很多多余的空格

data: {
	text: "     abc        " // 这样会导致拿到的数据也是如此
}

- 使用例：

<input type="text" v-model.trim="text">
// 用户在这边输入了"     abc        "，两边有很多多余的空格

data: {
	text: "abc" // 使用了.trim，拿到的数据两边空格会自动清除
}

- 多个修饰符同时使用

当然，修饰符是可以同时使用多个的

- 使用例：

<input type="text" v-model.trim.lazy.number="text">

---

- Recorded by Scorpio_sky@2020-08-28