明天是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这个函数的流程，所以所有善后工作放在这里是最好的