vue接口keyCodes、extend、nextTick、directive

keyCodes

加在main中
Vue.config.keyCodes = {
  ssss: 86,
  asd: [37,38,39],
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179
}
//用法：唯有按键码的数字是不变的；名字随便起；
<div @keyup.sss=fun ></div>
<div @keyup.media-play-pause=fun ></div>

Vue.extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下：

<p>Walter White aka Heisenberg</p>

上面是官方的说法

//新建一个vue文件；然后引用
import Son from './son.vue'// 引入先前写好的vue
const sonVue = {};
//install方法可以在函数内直接使用Vue
sonVue.install = function (Vue) {
	// 生成一个Vue的子类
    const ToastConstructor = Vue.extend(ToastComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor();

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el);
}
export sonVue;
//mian中
import sonVue from 'sonVuepath';
Vue.use(sonVue);
这样就是注册进去了；

Vue.nextTick( [callback, context] )

//照例，贴上官方文档；
这个挺有意思，一个异步按照这晦涩的解释永远也不知道用在哪~
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

实际上在数据驱动dom的改变过程中也是需要时间的；

<input id="id" type="text" value=""  v-model="val">
let that = this;
setInterval(()=>{
     this.val ++;
     console.log(that.$el.querySelector("#id").value)；
 },1500);
 //打印发现；打印出来的数字永远都是比this.val小一；
 let that = this;
 setInterval(()=>{
     this.val ++;
     this.$nextTick().then(()=>{
         console.log(that.$el.querySelector("#id").value)
     })
 },1500);
 //这样就同步了；~

Vue.directive

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//全局指令
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
//使用
<input v-focus>