Vue复习四(vue-api)

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>