今天是vue基础、vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏活累活都给他做,我们只管调用,说的我都于心不忍如此对待vue了,所以思来想去,我绝对对待它最好的办法,那就是多练练代码优化,能省就省,意思就是让他少干点活。

14.收集表单数据

image-20220503123546590

image-20220503123938454

image-20220503131444130

image-20220503131530958

15.过滤器

完成一个案例显示格式化的时间,用到一个库moment专门格式化时间的在这个网站下载[BootCDN][https://www.bootcdn.cn/]

image-20220503140841086

注意:这里可以使用一个es6形参赋值语法,如果第二个参数有那str就以第二个参数为准,如果没得就以我们在形参里面定义的默认值为准

image-20220503141017642

image-20220503141028726

image-20220503141812941

总结:适用于一些简单的逻辑处理,复杂的还是用计算属性等实现

16.内置指令

16.1 v-text

向其所在的标签渲染文本内容,会替换掉整个标签里面的内容,插值语法只是在某个位置插入进去

image-20220503142757799

16.2 v-html

同上,但是这个支持标签结构解析

注意:该指令语法有安全性问题,在网站上如果要动态渲染任意html是很危险的,容易遭受xss攻击

image-20220503145208437

v-html,永远不要用在用户提交的内容上

16.3 v-cloak

一个特殊属性,会等待vue接管容器后就会被vue删除,配合css [属性选择器]可以解决网速慢vue还没加载(这种情况页脚js阻塞因为js加载太慢而导致页面堵车了,无法进行下去),页面先出来一些{{name}}等字样的情况

image-20220503150758725

image-20220503150844577

16.4 v-once

也是没有值得指令语法,在所有节点初次动态渲染后就为静态内容了不再变了,以后数据的改变不会引起v-once的更新有利于优化性能

image-20220503151227108

16.5 v-pre

可以跳过vue的编译过程,可用它来跳过没有使用指令语法、插值语法的节点,加快编译

image-20220503151536204

image-20220503151446829

17.自定义指令

新增配置对象:directives,同时里面为我们的v-什么什么的指令但是不用写v-,当有细节处理应该是为一个对象这里,如果没有太多细节也可以直接简写为一个函数,接收两个参数,第一个参数使用这个自定义指令的标签,第二个参数这个指令绑定的表达式的对象,是一个对象里面包含他的值,名字等等

image-20220503154154872

image-20220503154221027

自定义的指令何时被调用?指令与元素成功绑定时,也就是第一次渲染页面时,第二种情况是当页面模板重新解析时,也就是不管哪里发起的重新解析,这个directives里面的对象或者函数都会被重新调用

刚才说的函数不能处理一些细节上的问题,要对象形式才可以,这里有一个需求,我一点击n自加,同时有一个input里面的n跟着自加,这个逻辑按照按照上面的可以完成,但是还有一个需求,我需要一来input就是获取焦点状态

image-20220503155737729

这个时候再用函数的方式就不行了,为什么,需要考虑到vue的一个工作原理,我们说这个directives的触发时机在于指令与元素成功绑定时,而问题就出现在这里,vue首先会把vue模板拿来解析,然后这个时候指令和元素成功绑定了,这个时候就会去执行这个函数,但是这个时候整个过程,整个dom还是在我们的虚拟dom当中,vue还没做完工作,所以页面上还没出现input,你给他获取焦点自然也不会奏效

所以现在要将自定义指令写为对象形式,而且三个函数三个时期,还有这三个名字都不不能改动的,必须为这样

image-20220503161016691

所以:我们一般bind函数和update函数都是做相同的事,结合上面简写形式两种触发时机,所以简写形式就是写的bind和update函数里面的逻辑

注意

18.生命周期

18.1 引出生命周期

首先第一个注意点 动态绑定,如果里面是一组一组的键值对形式,就比如style样式需要写为对象形式

image-20220503172318465

由一个案例引出来生命周期,需要页面一进入这个h2标题就产生一个渐变的效果,不需要任何触发点,自己就会触发

image-20220503172808728

生命周期函数:我的理解,首先mounted函数:Vue完成模板解析并把初始的真实DOM元素放入页面后也就是挂载完毕后就会条用这个mounted,相当于他只会执行一次,vue的一生当中只会执行一次,过了就过了,在我们vue的整个期间会有很多节点,很多关键节点,就比如这个解析完毕放入真实DOM就是一个节点,在这些关键节点vue回去调用一些特殊的函数,整个函数完成了vue的一个周期一个完整的生命周期,所以这些函数就叫做生命周期函数(也叫生命周期、生命周期钩子)

18.2 解析生命周期(挂载流程)

Vue 实例生命周期

继续我们的生命周期,如果发现没有template模板,就会去解析我们的el这个容器作为模板,若果有模板就去解析模板,这个阶段是vue开始解析模板,生成虚拟dom页面还不能显示解析好的内容,这个阶段一出来就会有一个生命周期函数beforeMount,这个时候页面呈现的是未经vue编译的dom结构,所有对dom的操作都不会奏效,因为我们的虚拟dom马上要插入页面了

18.3 解析生命周期(更新流程)

image-20220503203956807

18.4 解析生命周期(销毁流程)

是否执行vm.$destroy,如果执行了这一句,马上就会进入 beforeDestroy声明周期函数,一般在这个函数的时候,vm中所有的data、methods都可以访问,但是最好也不要修改删除什么数据了,因为已经没有意义了,生命已经走到了最后,好好修缮一下后事吧,比如可以关闭定时器、取消订阅消息、解绑自定义时间等收尾操作

最后过了这一个事件之后,这个vm实例就被销毁了,身上的全部指令和事件监听器(自定义事件)全部失效

18.5 总结

image-20220503210125144

出生生日好比挂载完毕,一切要开始的动作可以写在这里,将要永别好比将要销毁,把我们之前创造的一些东西,在这里处理一下

发表回复