「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」。

1. 收集表单数据

有如下data数据：

data: {
	userInfo: {
		account: '',
		password: '',
		age: 18,
		sex: 'female',
		hobby: [],
		city: 'beijing',
		other: '',
		agree: false
	}
}

下面演示不同表单如何搜集数据。

1. 普通输入框

<input type="text" v-model.trim="userInfo.account" />
<input type="password" v-model="userInfo.password" />

对于普通输入框，v-model绑定的是value值，可以省略写value。

v-model修饰符trim代表去除收尾空格。

若只想输入数字，可使用v-model的number修饰符：

<input type="number" v-model.number="userInfo.age" />

2. 单选框

<input type="radio" name="sex" v-model="userInfo.sex" value="male" />
<input type="radio" name="sex" v-model="userInfo.sex" value="female" />

对于单选框，v-model绑定的是value值，要给标签配置value值。

3. 复选框

<input type="checkbox" v-model="userInfo.hobby" value="study" />
<input type="checkbox" v-model="userInfo.hobby" value="game" />
<input type="checkbox" v-model="userInfo.hobby" value="eat" />

对于复选框：

没有配置value：收集的是checked（布尔值）
配置了value：
- v-model初始值为非数组：收集的是checked（布尔值）
- v-model初始值为数组：收集的是value组成的数组

4. 下拉选择框

<select v-model="userInfo.city">
    <option value="">select</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select>

v-model收集的是option标签的value值。

5. 多行输入框

<textarea v-model.lazy="userInfo.other"></textarea>

v-model修饰符lazy表示失去焦点后再收集数据。

2. 过滤器

Vue 可以自定义创建过滤器，用于一些简单的文本格式化，可以用在两个地方：

{{xxxx}}插值表达式
v-bind表达式

过滤器并没有改变原本的数据，是产生新的对应的数据。

1. 注册过滤器

Vue.filter(name,callback)

new Vue{
	filters: {
        timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
            return dayjs(value).format(str);
        },
        myFilter(value) {
            return `${value}!!!`;
        }
	}
}

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

2. 使用过滤器

过个过滤器可以串联使用：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器也可以接受额外的参数，

<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

3. 生命周期

一张官网的图，来自尚硅谷教程。

按照顺序，生命周期函数如下：

beforeCreate：在初始化事件、生命周期之前，但数据代理还未开始。无法通过vm访问到data、methods等。
created：在初始化数据监测、数据代理之后。可以通过vm访问到data、methods等。
beforeMount：此时页面上是未编译的 DOM，对 DOM 的操作，最终无效。
mounted：此时页面上是编译过的 DOM，对 DOM 的操作是有效的。一般在此进行开启定时器、发送网络请求、订阅消息等初始化操作。
beforeUpdate：此时，数据是新的，页面是旧的。数据页面不同步。
updated：此时，数据是新的，页面也是新的。数据页面同步。
beforeDestroy：只要进入到此状态，所有的data、methods等都还可用，但页面不会更新。一般在此进行关闭定时器、取消订阅消息等收尾工作。
destroy

Vue 学习笔记 —— 表单数据、过滤器、生命周期（五）