zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    JAVA错误:Unable to find config file. Creating new servlet engine config file: /WEBINF/serverconfig.wsdd
    java axis发布web service(二) 发布web service
    JAVA错误:AXIS Web Service Problem: No compiler found in your classpath! (you may need to add ‘tools.jar’)
    JAVA错误:java.lang.UnsupportedClassVersionError: Bad version number in .class file
    JavaScript中的div和filter错误
    拉格朗日乘数法
    Timeout Detection & Recovery (TDR)
    游戏程序员关心的Autodesk Maya 2013相关操作
    Eclipse开发Android程序如何在手机上运行
    我的第一篇随笔
  • 原文地址:https://www.cnblogs.com/lucky-fellow1/p/10705232.html
Copyright © 2011-2022 走看看