本文深入讲解Vue的核心功能，包括表单数据收集、过滤器、内置指令等，并详细介绍了自定义指令及Vue的生命周期。
Vue 学习笔记04：Vue 核心 - 3
一、收集表单数据
-
<input type="text"/>，v-model 收集的是 value 值，用户输入的也是 value 值。 -
<input type="radio"/>，v-model 收集的是 value 值，需要给标签配置 value 值。 -
<input type="checkbox"/>：
（1）没有配置 input 的 value 属性，那么收集的就是 checked（勾选或未勾选，是布尔值）；
（2）配置了 input 的 value 属性：
① v-model 的初始值是非数组，那么收集的就是 checked；
② v-model 的初始值是数组，那么收集的就是value 组成的数组。 -
v-model 的三个修饰符：
（1）lazy：失去焦点在收集数据
（2）number：输入字符串转为有效的数字
（3）trim：输入首尾空格过滤
- 表单案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
<br><br>账号： <input type="text" v-model.trim="userInfo.account">
<br><br>密码： <input type="password" v-model="userInfo.pwd">
<br><br>年龄： <input type="number" v-model.number="userInfo.age">
<br><br>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<br><br>
爱好：
学习<input type="checkbox" name="hobby" value="stude" v-model="userInfo.hobby">
打游戏<input type="checkbox" name="hobby" value="play" v-model="userInfo.hobby">
吃饭<input type="checkbox" name="hobby" value="eat" v-model="userInfo.hobby">
<br><br>所属校区
<select name="" v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br><br>其他信息：<textarea v-model.lazy="userInfo.other"></textarea>
<br><br><input type="checkbox" name="" v-model="userInfo.agree"> 阅读并接受<a href="#">《用户协议》</a>
<br><br> <button>提交</button>
</form>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
userInfo: {
account: '',
pwd: '',
age: 0,
sex: 'male',
hobby: [],
city: '',
other: '',
agree: true
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo));
}
},
})
</script>
</html>
二、过滤器
-
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理，太复杂的用计算属性或 methods ）。
-
语法：
（1）注册过滤器：Vue.filter(name, callback) 或 new Vue{filter:{}}
（2）使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" -
备注：
（1）过滤器也可以接收额外参数、多个过滤器可以串联。
（2）并没有改变原来的数据，是产生新的对应的数据。
- 定义局部过滤器，写在 vm 中，仅供当前 Vue 实例使用。
filters: {
timeFormater(value, str = 'YYYY 年 MM 月 DD 日 HH:mm:ss') {
return dayjs(value).format(str)
}
}
- 定义全局过滤器，写在 vm 外。
Vue.filter('mySlice', function(value) {
return value.slice(0, 4)
})
- 显示时间案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是 {{fmtTime}}</h3>
<h3>现在是 {{time | timeFormater}}</h3>
<h3>现在是 {{time | timeFormater(YYYY-MM-DD) | mySlice}}</h3>
</div>
</body>
<script>
Vue.config.productionTip = false;
Vue.filter('mySlice', function(value) {
return value.slice(0, 4)
})
const vm = new Vue({
el: "#root",
data: {
time: 1648113604965,
},
computed: {
fmtTime() {
return dayjs().format('YYYY 年 MM 月 DD 日 HH:mm:ss')
}
},
filters: {
timeFormater(value, str = 'YYYY 年 MM 月 DD 日 HH:mm:ss') {
return dayjs(value).format(str)
}
}
})
</script>
</html>
三、内置指令
1. 前面学过的指令
- v-bind：单向绑定解析表达式，可简写为
:xxx - v-model：双向数据绑定
- v-for：遍历数组、对象、字符串
- v-on：绑定事件监听，可简写为 @
- v-if：条件渲染（动态控制节点是否存在）
- v-else-if：同上
- v-else：同上
- v-show：条件渲染（动态控制节点是否展示）
2. v-text
- 作用：向其所在标签渲染文本内容，把所有字符串当作文本解析。
- 与插值语法的区别：v-text 会替换掉节点中的内容。插值语法不会。
<div v-text="name"></div>
3. v-html
-
作用：向指定节点中渲染包含 html 结构的内容。
-
与插值语法的区别：
（1）v-html 会替换掉节点中所有的内容，插值语法不会。
（2）v-html 可以识别 html 结构。 -
严重注意，v-html 有安全性问题：
（1）再网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击。
（2）一定要再可信的内容上使用 v-html，永不要用在用户提交的内容上。
<div v-html="name"></div>
4. v-cloak
- v-cloak 指令没有值
- 本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性。
- 使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题。
- 服务端配置，延迟3秒
// 1. 引入 express
const { response } = require('express');
const { request } = require('express');
const express = require('express');
const { json } = require('express/lib/response');
const res = require('express/lib/response');
// 创建应用对象
const app = express();
app.all('/vue.js', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const fs = require('fs');
new Promise(function(resolve, reject) {
fs.readFile('./vue.js', (err, data) => {
// 判断，改变状态
if (err) reject(err);
resolve(data);
})
}).then(function(value) {
setTimeout(() => {
response.send(value.toString());
}, 3000);
}, function(reason) {
response.send('获取失败！！');
})
})
// 监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动，8000端口监听中');
})
- 客户端
<body>
<div id="root">
<div v-cloak>{{name}}</div>
</div>
<script src="http://127.0.0.1:8000/vue.js"></script>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data() {
return {
name: 'andy'
}
},
})
</script>
5. v-once
- v-once 所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。
- v-once 没有值。
<div id="root">
<h2 v-once>n 初始值：{{n}}</h2>
<h2>n={{n}}</h2>
<button @click="n++">n+1</button>
</div>
6. v-pre
- v-pre 可以跳过其所在节点的编译过程。
- 可利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<h2 v-pre>n={{n}}</h2>
四、自定义指令
-
定义语法：
（1）局部指令：
（2）全局指令：
-
如上图，配置对象中常用的 3 个回调：
（1）bind：指令与元素成功绑定时调用。
（2）inserted：指令所在元素被插入页面时调用。
（3）update：指令所在模板结构被重新解析时调用。 -
备注：
（1）指令定义时不加 v-，但使用时要加 v-
（2）指令名如果是多个单词，要使用 kebab-case 命名方式，不要使用 camelCase。
五、生命周期
1. 引出生命周期
- 生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。
- 生命周期是 Vue 在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的 this 指向 vm 或组件实例对象。
- 常用的生命周期钩子有 mounted【初始化操作】、beforeDestroy【收尾工作】
2. 生命周期——挂载流程
（1）创建
- beforeCreate
beforeCreate()是挂载流程第一个生命周期函数，意思是在数据监测和数据代理创建之前。此时，无法通过 vm 访问到 data 中的数据、methods 中的方法。
还没有 _data 和点击事件回调。
- created
created()是挂载流程第二个生命周期函数，此时数据监测和数据代理已经创建完成，可以通过 vm 访问到 data 中的数据、methods 中的方法。
（2）挂载
- beforeMount
beforeMount()是挂载流程第三个生命周期函数，此时，页面呈现的是【未经 Vue 编译】的 DOM 结构，所有对 DOM 的操作最终都不会奏效。
还未开始解析。
- mounted（重要）
mounted()是挂载流程第四个生命周期函数，此时，页面呈现的【经过 Vue 编译】的 DOM 结构，对 DOM 的操作均有效。
至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
3. 生命周期——更新流程
-
beforeUpdate
beforeUpdate 是更新流程中的第一个生命周期函数，此时数据是新的，但页面时旧的，即：页面尚未和数据保持同步。
-
updated
updated 是更新流程中的第二个生命周期函数，此时数据是新的，页面也是新的，即：页面和数据保持同步。
3. 生命周期——销毁流程
- beforeDestroy（重要）
beforeDestroy 是销毁流程中的第一个生命周期函数，此时，vm 中所有的 data、methods、指令等等，都处于可用状态，马上要执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
备注：
（1）销毁后借助 Vue 开发者工具看不到任何信息
（2）销毁后自定义事件会失效，但原生 DOM 事件依然有效
（3）一般不会在 beforeDestroy 操作数据，因为即便操作数据，也不会触发更新流程。
- destroyed
destroyed 是销毁流程中的第二个生命周期函数，没啥用。
扫一扫
32万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
