keyCodes
添加全局自定义键位别名(给v-on添加)
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用双引号括起来
"media-play-pause": 179,
// 数组是或者的关系
up: [17, 18]
}
<input type="text" @keyup.media-play-pause="method">
Vue.extends 创建子类
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')
Vue.nextTick DOM更新
下次DOM更新时使用
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})
Vue.set(target,propertyName/index,value) 设置值
当设置的值没有造成视图更新, 设置后是响应式的
let obj={...}
this.$set(obj,'prop',12)
Vue.delete
响应式的,删去值
Vue.use() 插件
Vue.observable( object )
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，
// 记得导入 mian.js 入口函数
export const state = Vue.observable({ count: 0 })
导入
import {state} from './state'
const Demo = {
render(h) {
return h('button', {
on: { click: () => { state.count++ }}
}, `count is: ${state.count}`)
}
}
functional
性能提高70％
使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小。
功能组件是一个不包含状态和实例的组件, 不支持反应性,无法通过this 对关键字对自身的引用
<template functional>
<div>
{{props.someProps}}
</div>
</template>
<script>
export default {
props:{
somePrps:String
}
}
</script>
<script>
export default {
functional:true,
props:{
somePrps:String
}
render(h,ctx){
const someProp=ctx.props.someProps;
}
}
</script>
没有状态或实例,可以通过上下文参数
- props
- children
- slots
- scopedSlots
- data
- parent
- listeners
- injections
vm.$options
当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处
data() {
return {
num: 's'
}
},
sex:333,
created() {
console.log(this.$options.sex);
// 333
},
vm.$parent 父实例
vm.$children 子实例合集
vm.$slots
自定义插槽分发
<blog-post>
<template v-slot:header>
<h1>About Me</h1>
</template>
<p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
<template v-slot:footer>
<p>Copyright 2016 Evan You</p>
</template>
<p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})
vm.$attrs
当一个组件没有声明任何 prop 时, 包含所有父作用域的绑定 (class 和 style 除外)
// 父
<One name="333" :num="num"/>
// 子
One
console.log(this.$attrs);
// {name: "333", num: "s"}
如果props 接收了, 我们发现num消失了
props:['num']
this.$attrs
// {name: "333"}
$attrs 可以很方便的做到属性透传，使用起来也比较简单，避免了多写 props 的痛苦
<component-c v-bind="$attrs"></component-c> 多层穿透可以这样写
vm.$on( event, callback )
非组件之间的通信
// bus.js文件
import Vue from 'vue';
export default new Vue;
// main.js文件
**** // 原有的数据
**** // 原有的数据
import bus from '@/bus.js';
Vue.prototype.Bus = bus;
a.vue
Btn.$emit('nameChanges','我是好人')
b.vue
Btn.$on('nameChanges',val=>{
console.log(val)
})
记得最后销毁
beforeDestroy(){
//最后不要忘了删除传输事件
Bus.$off("this_change")
}
vm.$once(event,callback)
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$destroy()
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子
在大多数场景中你不应该调用这个方法。最好使用
v-if和v-for
v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-on
@
- 参数：
event - 修饰符：
.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.capture- 添加事件侦听器时使用 capture 模式。.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。.native- 监听组件根元素的原生事件。.once- 只触发一次回调。.left- (2.2.0) 只当点击鼠标左键时触发。.right- (2.2.0) 只当点击鼠标右键时触发。.middle- (2.2.0) 只当点击鼠标中键时触发。.passive- (2.3.0) 以{ passive: true }模式添加侦听器
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
监听事件
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
v-bind
<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
.camel 修饰符允许在使用 DOM 模板时将 v-bind property 名称驼峰化，例如 SVG 的 viewBox property：
<svg :view-box.camel="viewBox"></svg>