关于前端:vue-vue基础vue核心内容终结篇

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

14. 收集表单数据

• == 账号密码 == 应用 v -model 失常收集没得问题，自身就是收集 value 的

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

• == 复选框 == 复选框不仅要写 value，而且还要把绑定的值写为数组模式，复选框不写 value，vue 默认 v -model 收集的是 checked 的值，只有当两个条件满足，一个数组模式，一个 value 写上才会失常收集点击了复选框的 value 值
• 剩下的都是失常手机，下拉抉择框手机 value 值，文本域收集 value 值，== 留神一下最初一个点击批准许可协定这里间接应用默认的 checked 的值即可 ==

• 最初可通过提交的点击事件，或者表单的提交事件将数据发送到服务器留神通过事件修饰符进行表单默认提交行为，咱们个别是把 json 格局数据发送到服务器，所以这里数据个别是这样定义的

  这样一来就须要把之前所有的 vue 语法后面增加上 userInfo. 结尾

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

  • v-model.trim=”” 能够将输出的内容前后空格疏忽

  • .number 能够将收集的数值转为数值型，个别是配合表单 type：number 应用，这个能够限度输出的内容为数字，然而是字符型，再通过修饰符变为数值型

  • .lazy 失去焦点再获取数据，比方后面做过的防抖策略，输出完一段时间再去申请数据，这里能够给表单元素增加这个修饰符失去焦点才会将数据读取进来

15. 过滤器

实现一个案例显示格式化的工夫，用到一个库 moment 专门格式化工夫的在这个网站下载 BootCDN

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

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

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

• ==filters 加参数版 ==，除了后面的默认参数，他也能够本人增加参数，这个时候这个过滤器函数就相当于有两个参数了

• 这样一来咱们上一条代码是不是呈现谬误了，因为上一条没有第二个参数，format 格局就没得

== 留神：这里能够应用一个 es6 形参赋值语法，如果第二个参数有那 str 就以第二个参数为准，如果没得就以咱们在形参外面定义的默认值为准 ==

• == 咱们的过滤器能够一层一层来解决，解决完一层将返回的值能够持续交给下一个过滤器持续解决 ==

• == 在 vue 实例外面 filters 定义的过滤器都是部分过滤器，尽管咱们 vm 实例只有一个但当前会碰到组件化开发，a 组件是用不到 b 组件外面定义的 filters 过滤器的，所以怎么来定义全局过滤器 ==

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

== 总结：实用于一些简略的逻辑解决，简单的还是用计算属性等实现 ==

16. 内置指令

16.1 v-text

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

16.2 v-html

同上，然而这个反对标签构造解析

== 留神：该指令语法有安全性问题，在网站上如果要动静渲染任意 html 是很危险的，容易蒙受 xss 攻打 ==

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

16.3 v-cloak

一个非凡属性，会期待 vue 接管容器后就会被 vue 删除，配合 css [属性选择器] 能够解决网速慢 vue 还没加载（== 这种状况页脚 js 阻塞因为 js 加载太慢而导致页面堵车了，无奈进行上来 ==），页面先进去一些{{name}}等字样的状况

16.4 v-once

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

16.5 v-pre

能够跳过 vue 的编译过程，可用它来跳过没有应用指令语法、插值语法的节点，放慢编译

17. 自定义指令

== 新增配置对象：directives，同时外面为咱们的 v - 什么什么的指令然而不必写 v -，当有细节解决应该是为一个对象这里，如果没有太多细节也能够间接简写为一个函数，接管两个参数，第一个参数应用这个自定义指令的标签，第二个参数这个指令绑定的表达式的对象，是一个对象外面蕴含他的值，名字等等 ==

自定义的指令何时被调用？ 指令与元素胜利绑定时，也就是第一次渲染页面时，第二种状况是当页面模板从新解析时，也就是不论哪里发动的从新解析，这个 directives 外面的对象或者函数都会被从新调用

方才说的函数不能解决一些细节上的问题，要对象模式才能够，这里有一个需要，我一点击 n 自加，同时有一个 input 外面的 n 跟着自加，这个逻辑依照依照下面的能够实现，然而还有一个需要，我须要一来 input 就是获取焦点状态

这个时候再用函数的形式就不行了，为什么，== 须要思考到 vue 的一个工作原理，咱们说这个 directives 的触发机会在于指令与元素胜利绑定时，而问题就呈现在这里，vue 首先会把 vue 模板拿来解析，而后这个时候指令和元素胜利绑定了，这个时候就会去执行这个函数，然而这个时候整个过程，整个 dom 还是在咱们的虚构 dom 当中，vue 还没做完工作，所以页面上还没呈现 input，你给他获取焦点天然也不会见效 ==

所以当初要将自定义指令写为对象模式，== 而且三个函数三个期间，还有这三个名字都不不能改变的，必须为这样 ==

== 所以 ==：咱们个别 bind 函数和 update 函数都是做雷同的事，联合下面简写模式两种触发机会，所以简写模式就是写的 bind 和 update 函数外面的逻辑

== 留神 ==

• 名称上的留神点：咱们取名自定义指令如果是两个单词的不能才去驼峰命名法，须要将两头用 - 宰割，同时在 directives 外面回归原始定义方法，也就是属性名加引号，前面函数还是能够简写

• 不论是简写模式还是对象模式外面的 this 都为 window

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

18. 生命周期

18.1 引出生命周期

首先第一个留神点 == 动静绑定，如果外面是一组一组的键值对模式，就比方 style 款式须要写为对象模式 ==

由一个案例引出来生命周期，须要页面一进入这个 h2 题目就产生一个突变的成果，不须要任何触发点，本人就会触发

生命周期函数：我的了解，首先 mounted 函数：Vue 实现模板解析并把初始的实在 DOM 元素放入页面后也就是挂载结束后就会条用这个 mounted，相当于他只会执行一次，vue 的毕生当中只会执行一次，过了就过了，在咱们 vue 的整个期间会有很多节点，很多要害节点，就比方这个解析结束放入实在 DOM 就是一个节点，在这些要害节点 vue 回去调用一些非凡的函数，整个函数实现了 vue 的一个周期一个残缺的生命周期，所以这些函数就叫做生命周期函数（也叫生命周期、生命周期钩子）

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

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

  == 留神一下怎么去打断点，一个一个得看这个阶段之前会产生些啥 ==

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

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

  这个时候的确能够看到了_data 数据

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

  他和咱们写在 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 的挂载流程完结，在这个函数外面能够 == 开启定时器、发送网络申请、订阅音讯、绑定自定义事件等 ==

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

• 挂载结束后会去期待数据的扭转，当咱们数据扭转时，会有一个函数，==beforeUpdate== 这个时候数据是新的，然而页面还没有反馈过去，i 即页面尚未和数据放弃同步

• 随后马上就开始生成新的虚构 DOM 而后会和旧的虚构 DOM 相比拟，实现最终页面更新
• 而后又会有一个生命周期函数 ==updated== 此时数据是新的，页面也是最新的，页面和数据放弃同步

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

是否执行 ==vm.$destroy==, 如果执行了这一句，马上就会进入 ==beforeDestroy== 申明周期函数，个别在这个函数的时候，vm 中所有的 data、methods 都能够拜访，然而最好也不要批改删除什么数据了，因为曾经没有意义了，生命曾经走到了最初，好好修理一下后事吧，比方能够敞开定时器、勾销订阅音讯、解绑自定义工夫等收尾操作

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

18.5 总结

出世生日好比挂载结束，所有要开始的动作能够写在这里，将要永别好比将要销毁，把咱们之前发明的一些货色，在这里解决一下

• vm.$destroy 相当于他杀的性能，个别其实不得本人调用这种办法，大多数状况都是自杀，自杀须要组件反对，前面再说，这里只能勉强他杀，欠缺后面的透明度案例

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