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