vue - vue基础/vue核心内容（终结篇）

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

14.收集表单数据

image-20220503123546590

  • 账号密码使用v-model正常收集没得问题，本身就是收集value的

    image-20220503123636428

  • 单选框只是使用v-model就有问题，vue管理工具返回null，因为v-model本身默认是收集value值的，所以需要给单选框配置value

image-20220503123938454

  • 复选框复选框不仅要写value，而且还要把绑定的值写为数组形式，复选框不写value，vue默认v-model收集的是checked的值，只有当两个条件满足，一个数组形式，一个value写上才会正常收集点击了复选框的value值

  • 剩下的都是正常手机，下拉选择框手机value值，文本域收集value值，注意一下最后一个点击同意许可协议这里直接使用默认的checked的值即可

image-20220503131444130

image-20220503131530958

  • 最后可通过提交的点击事件，或者表单的提交事件将数据发送到服务器注意通过事件修饰符停止表单默认提交行为，我们一般是把json格式数据发送到服务器，所以这里数据一般是这样定义的

    image-20220503131945764

    这样一来就需要把之前所有的vue语法前面添加上userInfo.开头

  • 新增三个v-model的修饰符

    • v-model.trim=""可以将输入的内容前后空格忽略

    • .number可以将收集的数值转为数值型，一般是配合表单type：number使用，这个可以限制输入的内容为数字，但是是字符型，再通过修饰符变为数值型

      image-20220503132348208

    • .lazy失去焦点再获取数据，比如前面做过的防抖策略，输入完一段时间再去请求数据，这里可以给表单元素添加这个修饰符失去焦点才会将数据读取进来

15.过滤器

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

  • 通过计算属性、methods函数实现

    image-20220503140159912

  • 通过过滤器实现，过滤器其实就跟模板引擎的过滤器一样，就连语法都一样，只是在实例里面添加了全新的配置项：filters

    在vue语法里面前面的time是管道符后面函数的参数，不用调用，vue会自动调用进去

    image-20220503140518542

    image-20220503140529953

  • filters加参数版，除了前面的默认参数，他也可以自己添加参数，这个时候这个过滤器函数就相当于有两个参数了image-20220503140726964

    image-20220503140742694

  • 这样一来我们上一条代码是不是出现错误了，因为上一条没有第二个参数，format格式就没得

image-20220503140841086

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

image-20220503141017642

image-20220503141028726

  • 我们的过滤器可以一层一层来处理，处理完一层将返回的值可以继续交给下一个过滤器继续处理image-20220503141306284

    image-20220503141319874

    image-20220503141326195

  • 在vue实例里面filters定义的过滤器都是局部过滤器，虽然我们vm实例只有一个但以后会碰到组件化开发，a组件是用不到b组件里面定义的filters过滤器的，所以怎么来定义全局过滤器

    image-20220503141609619

  • 过滤器除了可以用在插值语法，还可以用在v-bind绑定语法，只能是v-bind，v-model或其他都不行(不常用 )

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函数里面的逻辑

注意

  • 名称上的注意点：我们取名自定义指令如果是两个单词的不能才去驼峰命名法，需要将中间用-分割，同时在directives里面回归原始定义方法，也就是属性名加引号，后面函数还是可以简写

    image-20220503163559610

    image-20220503163606446

  • 不管是简写形式还是对象形式里面的this都为window

  • 我们在directives定义的指令是局部指令，如果其他组件需要用到这个指令需要定义全局指令，跟过滤器一样定义方法（都没有了s，在实例里面都有s）

    image-20220503163758741

18.生命周期

18.1 引出生命周期

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

image-20220503172318465

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

image-20220503172808728

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

18.2 解析生命周期（挂载流程）

Vue 实例生命周期

  • 挂载流程是从new Vue开始到mounted生命周期函数结束，首先一切万物都是从new Vue一个实例开始，先是进入初始化，在这个初始化阶段，vue会把一些生命周期的函数比如什么名字、定义在哪里还有我们的一些事件的定义，比如事件修饰符这些初始化好，但是要注意，这个时候还没有解析到我们的data数据，数据代理还没开始，紧接着这个时候就出现了第一个生命周期函数——beforeCreate

    注意一下怎么去打断点，一个一个得看这个阶段之前会发生些啥

    image-20220503180322250

    image-20220503180515064

    可以看到页面没有解析，vm实例也没有_data这个数据

  • 接下来开始第二次初始化，这个阶段开始做数据代理，数据监测，同时第二个生命周期函数created

    image-20220503181000701

    这个时候确实可以看到了_data数据

    然后开始判断有没有el这个选择项，如果有就判断有没有template模板，先说一下这个模板，这个模板是定义在vm实例里面的，当我们vue执行完毕就会把这个模板放入容器

    image-20220503181436022

    image-20220503181450769

    他和我们写在html结构里面的有点区别就是我们写在html里面会有root这个div吧，但是这个必须用一个div或者一个盒子来包着，然后这个div会代替root这个容器

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

  • 接下来回去创造一个vm的api $el来放我们的el里面的所有标签，这个api的作用就是当我们比较虚拟dom的时候发现万一有元素可以复用，那你也要拿得出来能复用的dom在哪里才行，所以就在这里保存的，这个时候就来到了另一个事件，mounted，现在页面中已经有编译好的dom了，至此初始化结束，vue的挂载流程结束，在这个函数里面可以 开启定时器、发送网络请求、订阅消息、绑定自定义事件等

    image-20220503182339525

18.3 解析生命周期（更新流程）

  • 挂载完毕后会去等待数据的改变，当我们数据改变时，会有一个函数，beforeUpdate这个时候数据是新的，但是页面还没有反应过来，i即页面尚未和数据保持同步

    image-20220503203137578

  • 随后马上就开始生成新的虚拟DOM然后会和旧的虚拟DOM相比较，完成最终页面更新

  • 然后又会有一个生命周期函数 updated此时数据是新的，页面也是最新的，页面和数据保持同步

image-20220503203956807

18.4 解析生命周期（销毁流程）

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

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

18.5 总结

image-20220503210125144

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

  • vm.$destroy 相当于自杀的功能，一般其实不得自己调用这种方法，大多数情况都是他杀，他杀需要组件支持，后面再说，这里只能勉强自杀，完善前面的透明度案例

    image-20220503211523647

    为什么可以在点击事件就停止定时器，非要在销毁的生命周期函数停止，因为这里是模拟的自杀操作，很多时候是他杀，先不说他杀有没有触发这个事件，不管谁杀，你被销毁了，那都要走beforeDestroy这个函数的流程，所以一切善后工作放在这里是最好的

posted @ 2022-05-03 21:23  Heymar-10  阅读(1126)  评论(2)  编辑  收藏  举报