• Vue ---day03


    nextTick: 当数据改变时,dom元素不会立即改变,获取更新后的DOM。

      Vue.nextTick(funciton(){})

      vm.$nextTick(function(){})

      vm.$nextTick().then();   没有提供回调函数且支持Promise环境中,则返回一个 Promise。(注意vue不自带 Promise的 polyfill)

    Vue生命周期:生命周期钩子自动绑定this上下文到实例中。 this指向vm

      创建阶段  created 数据观测 ,属性和方法的运算,watch/event 事件回调---实例已完成的配置, $el属性尚不可用

      挂载阶段  mounted实例被挂载后调用,el 被新创建的  vm.$el 替换

      更新阶段

      销毁阶段

      errorCaptured    (err: Error, vm: Component, info: string) => ?boolean

    内置组件

      component    动态组件的问题  <component :is="componentId"></component>   (多个组件切换,避免在模板中做大量的判断)--组件依然会重复创建和销毁

      transition        

      transition-group

      keep-alive   保留组件和数据状态,  避免重复调用 created和destroy  (作用于直接子组件被开关的情况,且只有一个子元素被渲染)

      slot  组件模板的内容分发插槽   或 避免传给子组件props内容太长

        slot组件和组件模板在一个作用域内

        slot内部定义组件包含的元素(定义影子 DOM)

        影子dom和组件模板不在一个作用域内(不能直接访问组件内部数据)

        通过slot组件向 影子DOM传递参数

        影子DOM在这里实际上也是一个子组件

    安装插件

      Vue.use(plugin)

      如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。

      install 方法调用时,会将 Vue 作为参数传入。(obj.install方法接收的第一个参数是Vue,第二个参数是 options)

      在调用 new Vue() 之前调用;

      插件只会被安装一次

    为自定义选项注入处理逻辑

      Vue.mixin(Object)  全局的

        影响每一个之后创建的 Vue 实例,包括第三方组件

        只应当应用于自定义选项--如 下面的 myOption 选项(vue内部时没有的)

        建议作为插件发布,避免重复发布

      Vue.mixin({

        created: function () {  // 生命周期可以重复

            var myOption = this.$options.myOption

             if (myOption) { console.log(myOption) }  // ===> 'hello!'

        }

       })

      new Vue({

        myOption: 'hello!'   // myOption 为自定义选项

      })

     

    // 发布插件的一个例子 ----   给实例添加 http 选项

      // 定义一个插件

      function axios(){ console.log("axios");}

      .................................................................Vue.prototype.http = axios;  //改Vue的原型,不推荐

      Vue.use(function(_Vue){

        _Vue.mixin({

          beforeCreate: function(){

            console.log('beforeCreate1');

            if(this.$options.adaptor){   // this  每一个组件实例 

              this.$http = this.$options.http;

            }

            if(this.$options.parent && this.$options.parent.$http){  // 给子组件增加 方法

              this.$http = tthis.$options.parent.$http

            }

          }

        });

      })

      new Vue({

        el:"#pp",

        adaptor: axios, //  定义了一个 http 库

        beforeCreate:function(){

          console.log("实例beforeCreate2");

        }

      })

      

      

     

      

      

           

  • 相关阅读:
    PostgreSQL使用MySQL外表(mysql_fdw)
    使用node+puppeteer+express搭建截图服务
    零碎知识
    miniconda 搭建tensorflow框架
    有效需求分析阅读笔记(六)
    有效需求分析阅读笔记(五)
    索引原理和优势
    存储过程的优缺点
    RestSharp
    在vue中安装sass/scss报错
  • 原文地址:https://www.cnblogs.com/baota/p/12333051.html
Copyright © 2020-2023  润新知