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>