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

        }

      })

      

      

     

      

      

           

  • 相关阅读:
    Configure JSON.NET to ignore DataContract/DataMember attributes
    Visual Studio 独立 Shell 下载
    Xamarin.Forms 自定义 TapGestureRecognizer 附加属性
    Xamarin 自定义 ToolbarItem 溢出菜单实现(Popover/Popup) 弹出下拉效果
    xamarin.forms 动态条件更换数据模板
    Xamarin.Forms FlexLayout 布局扩展+ 模板扩展+弹性换行
    Xamarin.Forms 开发资源集合
    Xamarin Forms Api请求开源框架Refit
    Xamarin Forms error MSB6006: “java.exe”已退出,代码为 2 解决办法
    Xamarin.Forms 未能找到路径“x:platforms”的一部分
  • 原文地址:https://www.cnblogs.com/baota/p/12333051.html
Copyright © 2011-2022 走看看