• vue总结


    vue的生命周期(beforeCreate-created-brforeMount-mounted-beforeUpdate-updated-beforeDestroy-destroy

      1.实例和组件通过new Vue()创建出来之后会初始化事件和生命周期,然后执行beforeCreate这个钩子函数,这个时候数据还没有挂载,只是一个空壳,无法访问到数据和真实的dom,一般不做任何操作。

      2.绑定事件,挂载数据等,然后执行created这个钩子函数,这里可以使用到数据和更改数据,这是渲染前第二次可以更改数据的机会,不会触发updated函数,一般做初始化数据的获取。

      3.接下来开始寻找实例组件对应的模板,编译虚拟dom到render函数中进行渲染,然后执行beforeMount这个钩子函数,在这个函数中虚拟dom已经创建完成,这是渲染前最后一次更改数据的机会,也不会触发updated函数。

    4.接下来开始render,渲染出真实的dom,然后执行mounted这个钩子函数,这个时候组件已经出现在页面中,数据真实的dom都已经创建好了,事件已经挂载好了,可以在这里操作真实的dom。

    5.当组件或实例的数据更改之后,会立即执行beforeUpdate这个钩子函数,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

    6.当更新完成之后,执行updated函数,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom。

    7.当经过某种途径调用$destory方法后,立即执行beforeDestroy,一般在这里做一些善后的工作,例如清除计时器,清除非绑定事件等等。

    8.组件的数据绑定,监听去掉之后只剩下dom空壳,一般会执行destroy这个钩子函数,也是做一些善后的工作。

    vue的组件传值

     1.父组件向子组件传值

         子组件在propd中创建一个属性,用以接受父组件传过来的值

         父组件中注册子组件

          在子组件标签中添加props中创建的属性

         把需要传给子组件的值赋给该属性

      2.子组件向父组件传值

         子组件需要以某种方式例如点击事件的方法来触发自定义事件

          将需要传的值作为$emit的第二个参数,将该值作为实参传给响应自定义事件的方法

          在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

      3.非父子组件传值

         event-bus

     4.多组件之间传值

       vuex

    vue的指令

      v-for v-if   v-show v-else v-bind v-on v-text  v-html

    vueRouter

    https://segmentfault.com/a/1190000014822765

  • 相关阅读:
    mongodb 的主从配置
    python 操作mongoDB数据库
    git常用操作
    基于canvas与原生JS的H5动画引擎
    mongodb的使用(入门)
    mongodb 的安装(Centor OS )
    NIO概述及实例(时钟服务器)
    netty上手
    BootStrap概述
    Spark SQL访问PostgreSQL
  • 原文地址:https://www.cnblogs.com/lucky-fellow1/p/10705232.html
Copyright © 2020-2023  润新知