• 关于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>来直接使用这个组件了

      

  • 相关阅读:
    Sqoop架构(四)
    为什么选择Sqoop?(三)
    Sqoop 是什么?(二)
    Sqoop 产生背景(一)
    Ambari是啥?主要是干啥的?
    Ambari架构及安装
    Hadoop Hive概念学习系列之HDFS、Hive、MySQL、Sqoop之间的数据导入导出(强烈建议去看)(十八)
    Effective C++ -- 构造析构赋值运算
    pcduino v2安装opencv2.4.8
    Struts2 拦截器具体配置过程
  • 原文地址:https://www.cnblogs.com/mufc/p/10195475.html
Copyright © 2020-2023  润新知