Vue2学习笔记:第五章
一、收集表单数据1.不同标签的value属性2.v-model的三个修饰符 二、过滤器1.什么是过滤器?2.案例:过滤器格式化时间戳 三、自定义指令1.内置指令2.如何自定义指令(1)定义语法(2)函数式(3)对象式 四、Vue的生命周期1.什么是生命周期?2.生命周期中的8个钩子3.图解生命周期4.小案例:字体闪烁,点击停止(销毁vm)一、收集表单数据
1.不同标签的value属性
若:<input type="text"/>
普通输入框,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>
单选框,则v-model收集的是value值,且要给标签配置value值。
若:<input type="checkbox"/>
多选框
1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2、配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
一句话,想正确收集,那么要写上每个选项的value,且v-model绑定的初始值是数组。
2.v-model的三个修饰符
v-model.lazy
:实现不用实时收集,输入框失去焦点再收集
v-model.number
:输入的字符串收集为数字(Vue内部做了数据转换),经常和type="number"
一起用
v-model.trim
:收集时去掉输入的首尾空格
<!-- 准备好一个容器 --><div id="root"><form v-on:submit.prevent="demo"><!-- v-model.trim去掉收集的首尾空格 -->账号:<input type="text" v-model.trim="userInfo.account"> <br><br>密码:<input type="password" v-model="userInfo.password"><br><br><!--下面是 双向绑定修饰符:收集到的必须是数字类型(Vue内部做了数据转换) -->年龄:<input type="number" v-model.number="userInfo.age"><!-- v-model.number经常和type="number"一起用 --><br><br>性别:男<input type="radio" name="sex" value="male" v-model="userInfo.sex">女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br><br>爱好:抽烟<input type="checkbox" value="smoke" v-model="userInfo.hobby">喝酒<input type="checkbox" value="drink" v-model="userInfo.hobby">跳舞<input type="checkbox" value="dance" v-model="userInfo.hobby"><br><br>玩哪个游戏?<select v-model="userInfo.game"><option value="saibo">赛博朋克2077</option><option value="ditie">地铁:离去</option><option value="dipingxian">地平线4</option><option value="nfsmw">极品飞车21:热度</option><option value="dabiaoge">荒野大镖客2</option></select><br><br><!-- v-model.lazy可以实现不用实时收集,输入框焦点离开了再收集 -->其他信息: <textarea v-model.lazy="userInfo.other"></textarea><br><br><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="">用户协议</a><button>提交</button></form></div><script>const vm = new Vue({el: '#root',data: {userInfo: {account: '',password: '',age: '',sex: 'female',//hobby的数据类型影响着多选框收集到的数据类型hobby: [],game: 'nf smw',other: '',agree: '',},},methods: {demo() {// console.log(JSON.stringify(this._data)); //一般不建议直接访问_data,建议用个对象包住数据console.log(JSON.stringify(this.userInfo)); //只是这么写的话,所有双向绑定都要加userInfo前缀}},})</script>
二、过滤器
1.什么是过滤器?
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理比如价格1999改成1,999等需求,复杂的用计算属性或方法)。
语法:
1、注册过滤器:Vue.filter(name,callback)
或new Vue{filters:{}}
2、使用过滤器:{{ xxx | 过滤器名}}
或v-bind:属性 = "xxx | 过滤器名"
(第二种几乎不用)
备注:
1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据, 是产生新的对应的数据
2.案例:过滤器格式化时间戳
<!-- 准备一个容器 --><div id="hello"><h1>当前时间是:{{time}}</h1><!-- 计算属性实现 --><h1>当前时间是:{{formatTime}}</h1><!-- 方法实现 --><h1>当前时间是:{{getformatTime()}}</h1><!-- 过滤器实现 time传给timeFormater,然后返回值替换整个部分--><h1>当前时间是:{{time | timeFormater}}</h1><!-- 过滤器实现(传参)--><h1>当前时间是:{{time | timeFormater('YYYY——MM——DD')}}</h1><!-- 过滤器的串联,一层一层往后传,后面的接受的是前面的返回值--><h1>当前时间是:{{time | timeFormater('YYYY——MM——DD') | mySlice}}</h1><!-- 下面这个打开控制台看元素节点就明白了 --><h3 :x="name | mySlice">DJ</h3> </div><script>// 全局过滤器Vue.filter('mySlice', function (val) {return val.slice(0, 4);})const vm = new Vue({el: '#hello',data: {time: 1660472948789,name: 'zhangziying'},computed: {formatTime: {get() {return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');}}},methods: {getformatTime() {return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');}},// 局部过滤器filters: {//第一个参数是管道符 | 前边那玩意儿//第二个参数str来个默认值,如果传了str就给,不传就用默认值timeFormater(val, str = 'YYYY年MM月DD日 HH:mm:ss') {// console.log(val);return dayjs(this.time).format(str);},mySlice(val) {//这里的val是上一个过滤器的返回值return val.slice(0, 4);}}})</script>
三、自定义指令
1.内置指令
v-bind
: 单向绑定解析表达式, 可简写为 :xxx
v-model
: 双向数据绑定
v-for
: 遍历数组/对象/字符串
v-on
: 绑定事件监听, 可简写为@
v-if
: 条件渲染(动态控制节点是否存存在)
v-else
: 条件渲染(动态控制节点是否存存在)
v-show
: 条件渲染 (动态控制节点是否展示)
v-text
指令:
作用:向其所在的节点中渲染文本内容。
与插值语法的区别:v-text会替换掉节点中的所有内容,{{xx}}则不会。
比如下面第一行这么写的话,奥里给就没了,页面显示的是name对应的值,但是第二行就不会这样
<h2 v-text="name">奥里给</h2><h2>{{name}},奥里给</h2>
v-html
指令:
作用:向指定节点中渲染包含html结构的内容。
与插值语法的区别:
(1)v-html会替换掉节点中所有的内容,{{xx}}则不会,这点和v-text一样。
(2)v-html可以识别html结构,这点和v-text区别,v-text不能渲染标签。
<h2 v-html="name">奥里给</h2>其中name: '<h3>zzy</h3>'最终显示的是h3渲染后的zzy
严重注意:v-html有安全性问题!!!!
(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-cloak
指令(没有值):
(1)本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
(2)使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题,先隐藏标签,然后Vue渲染完了之后删除v-cloak,那么就能显示渲染完之后的页面了。
/* 选中所有包含v-cloak属性的标签 */[v-cloak]{display: none;}
<h2 v-cloak>{{name}}</h2>
v-once
指令:
(1)v-once所在节点在初次动态渲染后,就视为静态内容了,也就是只读一次。
(2)以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
v-pre
指令:
(1)跳过其所在节点的编译过程。
(2)可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
2.如何自定义指令
(1)定义语法
(1).局部指令:
new Vue({new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}}) })
(2).全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
备注:
1.指令定义时不加v-,但使用时要加v-;
2.指令名如果是多个单词,要使用big-number命名方式,不要用bigNumber命名。
'big-number'(){console.log('')}
3.directives配置对象中所有函数的this都指向window
,这个和其他的不同,尤其注意
(2)函数式
函数中有两个参数,第一个参数是指令所在的标签,第二个参数是一个存着指令值的对象,通过对象名.value
就能获取当前绑定的值
big函数何时调用?
1、指令与元素成功绑定时(一上来,没放入页面之前)
2、指令所在的模板被重新解析时
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
<!-- 准备一个容器 --><div id="hello"><h1>当前n值是:<span v-text="n"></span></h1><h1>放大十倍后的n值是:<span v-big="n"></span></h1><button @click="n++">点我n+1</button></div><script>const vm = new Vue({el: '#hello',data: {n: 1},directives: {//一、函数式// 需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。//第一个参数是指令所在的标签,第二个参数是一个存着指令值的对象big(element, binding) {//big函数何时会被调用? //1.指令与元素成功绑定时(一上来,没放入页面之前) 2.指令所在的模板被重新解析时console.log('我被调用了');element.innerText = binding.value * 10;},}})</script>
(3)对象式
配置对象中常用的3个回调:
(1).bind
:指令与元素成功绑定时(一上来,没放入页面之前)
(2).inserted
:指令所在元素被插入页面时调用(放入页面后)
(3).update
:指令所在模板结构被重新解析时调用(有任意data中的东西被改了)。
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
使用函数调用element.focus()
不奏效,因为big函数执行时页面上还没放入input,focus必须在input插入页面后才能有效果。所以这里我们只能用对象式
<!-- 准备一个容器 --><div id="hello"><h1>当前n值是:<span v-text="n"></span></h1><button @click="n++">点我n+1</button><!-- 在输入框中显示n的值动态变化 --><input v-fbind:value="n"></div><script>const vm = new Vue({el: '#hello',data: {n: 1},directives: {// 需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。//函数无法实现该需求// fbind(element, binding) {//element.innerText = binding.value * 10;////下面这个focus,必须在放到页面之后才调用//element.focus(); //不奏效,因为big函数调用时还没放入页面// }//二、对象式fbind: {// 指令与元素成功绑定时(一上来,没放入页面之前)bind(element, binding) {element.value = binding.value;},// 指令所在元素被插入页面时inserted(element, binding) {element.focus();},// 指令所在的模板被重新解析时update(element, binding) {element.value = binding.value;}}}})</script>
本质上二者差不多,你会发现函数式其实就是对象式中的bind和update
的合并,如果在某些时候要实现一些特殊的效果,比如获取焦点、操作节点父元素等需要等元素插入页面后才能操作它的这些操作,只能用对象式,靠的就是inserted
函数
四、Vue的生命周期
1.什么是生命周期?
生命周期
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
2.生命周期中的8个钩子
常用的生命周期钩子
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件
会失效,但原生DOM事件
依然有效(现在的版本好像也会失效)。(留个疑点,啥是自定义事件?啥是原生DOM事件?答:自定义事件就是定义在组件标签上的事件,是组件通信的一种方式,原生DOM事件就是类似onclick这种的)。销毁后所有的监视也没了
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
来看看代码:
<!-- 准备一个容器 --><div id="hello"><h1>欢迎来到{{n}}年代</h1><button @click="add">点击n+1</button></div><script>const vm = new Vue({el: '#hello',data: {n: 1},methods: {add() {this.n++;}},beforeCreate() {console.log('beforeCreate');console.log(this);// debugger;},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');},destryed() {console.log('destryed');}})</script>
3.图解生命周期
4.小案例:字体闪烁,点击停止(销毁vm)
<!-- 准备一个容器 --><div id="hello"><h1 :style="{opacity: opacity}">欢迎来到90年代</h1><button @click="stop">点击停止闪烁</button></div><script>const vm = new Vue({el: '#hello',data: {opacity: 1},methods: {stop() {// clearInterval(this.timer); vm自杀可以这么写,他杀需要写在beforeDestroy中this.$destroy(); //vm自杀}},//挂载意思就是放在页面上//挂载函数,Vue完成模板的解析并把*初始的(只调用一次)*真实DOM放入页面后(完成挂载)调用mountedmounted() {this.timer = setInterval(() => {console.log('计时器调用');this.opacity -= 0.01;if (this.opacity <= 0) this.opacity = 1; //js里玩儿小数一般碰不到0 }, 16)},beforeDestroy() {console.log('vm即将被销毁');// 为什么vm的后事需要写在这里,是因为vm很有可能是被别人干掉的clearInterval(this.timer);},})//通过外部的定时器实现(不推荐)// setInterval(() => {//vm.opacity -= 0.01;//if (vm.opacity <= 0) vm.opacity = 1; //js里玩儿小数一般碰不到0// }, 16);</script>
如果觉得《Vue2(五):收集表单数据 过滤器 自定义指令 Vue的生命周期》对你有帮助,请点赞、收藏,并留下你的观点哦!