zoukankan      html  css  js  c++  java
  • 关于vue 中的API (nextTick directive filters Vue.use)

      nextTick

        vue在更新数据的时候,其实是一个异步的过程,在我们去修改数据流中的数据,也就是定义在data中的数据的时候,页面组件组件并不会立即去响应,因此说vue在更新数据的时候是一个异步的过程; 每次在更改数据的时候,它都会打开一个队列,并缓冲在同一个事件循环中发生的所有数据更改,也就是说vue会等所有的修改完成之后才去执行页面二次渲染;

        nextTick,就是在这个队列更新之后才会去执行的一个API方法;官方给出的定义是: 推迟下一个DOM更新周期后执行的回调。在您更改了一些数据以等待DOM更新后立即使用它。

        例如  created(){

            this.$nextTIck( () => { 

              console.log( this.name)  //更新

             })

            console.log(this.name)   //undefined

            this.name = "更新"

          }

      directive

        vue中存在了许许多多的指令,但是总有一些功能或者需求场景上,这些已经存在的指令是不能满足我们的应用的,因此,vue提供了 directive  方法,我们可以去自定义指令

        例如定义全局的指令:

          Vue.directive( 'log', {

            inserted: (el) => {

              console.log( el.innerHTML)

            }

          })

          定义局部的指令

          export default {

            data(){ },

            directive: {

              log: {

                inserted: (el) => {  console.log(el.innerHTML)  }

              }

            }

          }

        其中 el 指的是:我们将自定义指令 v-log  写在哪个标签上,那么 el 就代表的是哪个虚拟的dom元素; 而inserted是钩函数,钩函数一般在定义指令的时候会用到,因此对应的还存在一些指令钩参数;

        钩函数包括: bind、inserted、update、componentUpdated、unbind;

        钩参数包括: el、binding、vnode、oldNode;其中binding包括name、value、oldValue、expression、arg、modifers;

      filters

        js允许您定义可用于应用普通文本格式的筛选器。过滤器可以在两个地方使用:胡须插值和v-bind表达(后者在2.1.0+中得到支持)。过滤器应该附加到JavaScript表达式的末尾,用“管道”符号表示:

          {{ msg |  capture}};

        例如 filters: {

            captureA: (value) => {

              if( !value) {  return '----'}

            },

            captureB: (value) => {

              value == '----'    //true
              return "数据不存在"

            }

          }

            定义了filter之后,用法上如上所写,但是其实每个变量是可以接收多个参数的,比如 {{ msg  | carptureA | captureB}};  其中captureA接收到的参数是msg的值,而captureB接收到的参数是

          captureA返回的值;

      Vue.use

        该方法通常用在定义插件即定义组件的时候用到,我们通常在进行组件定义的时候,其实不用像官方文档支出的那样,那么麻烦;官方文档指出:一个vue.js插件应该公开一个install方法。方法将使用

      Vue构造函数作为第一个参数,以及可能的选项。

        其实在定义公共组件(插件)的时候,也并不一定要用到 Vue.use

      例如: import Dialog from './dialog.vue'

         Vue.component( 'VDialog', Dialog);

        这样我们就可以通过 <v-dialog></v-dialog>来直接使用这个组件了

      

  • 相关阅读:
    第1条:考虑用静态工厂方法代替构造器
    代理模式(Proxy Pattern)
    out 和 ref 参数修饰符
    SQL Server 性能调优(一)——从等待状态判断系统资源瓶颈【转】
    Windows下获取Dump文件以及进程下各线程调用栈的方法总结(转)
    sql server内置函数
    ORA-16019 和 ORA-16018 错误的处理方法(转)
    marge into操作
    LogMiner配置使用手册
    课后作业
  • 原文地址:https://www.cnblogs.com/mufc/p/10195475.html
Copyright © 2011-2022 走看看