Vue上的API

  1. Vue.extend
  2. Vue.component
  3. Vue.use
  4. Vue.set
  5. Vue.delete
  6. Vue.directive
  7. Vue.filter
  8. Vue.nextTick
  9. Vue.mixin
  10. Vue.compile
  11. Vue.observable
  12. Vue.version

1 Vue.extend({options})

通过Vue创立一个子类，参数是一个组件选项的对象
data选项必须是函数

在初始化时会判断data是函数还是对象
函数：执行这个函数，返回一个新对象
对象：间接应用这个对象，那么实例化这个子类时，这个对象是私有的，全局净化
//创立子类const myVue = Vue.extend({    template: '<p>衬衫的价格是{{price}}</p>',    data() {        return {            price: "九磅十五便士"        }    },})//实例化子类并挂载const myVm1 = new myVue().$mount("#root1")const myVm2 = new myVue({ el: "#root2" })//后果<p>衬衫的价格是九磅十五便士</p><p>衬衫的价格是九磅十五便士</p>
动静渲染组件，能够像调用函数一样调用组件

2 Vue.component(id , [definition])

定义组件，组件是一个可复用的Vue实例，能够作为自定义元素来应用
definition能够是Vue.extend(options)，也能够间接使一个options对象-还是会执行Vue.extend()

//定义一个组件Vue.component('Child1', {    template: `<p>衬衫的价格是{{price}}</p>`,    data() {        return {            price: "九磅十五便士",        }    },})new Vue().$mount('#root1')//定义子类const myVue = Vue.extend({    template: `<p>我的名字叫{{name}}</p>`,    data() {        return {            name: "韩梅梅"        }    },})Vue.component('Child2', myVue)new Vue().$mount('#root2')
<div id="root1">    <Child1></Child1></div><div id="root2">    <Child2></Child2></div>
下面两种形式都能够去自定义一个组件

3 Vue.use(plugin)

装置插件，通常在装置一个包之后想在Vue中应用，须要先引入而后Vue.use后才能够应用，Vue.use会调用该模块中的install形式
应用use的形式定义组件，模拟插件的装置过程

//MyComponent.vue文件<template>  <div>正在加载中...</div></template>//创立index.js 进行封装import MyComponent from './MyComponent.vue'const My = {    install(Vue) {        Vue.component('My', MyComponent)    }}export default My//在main.js中装置import My from './components/index'Vue.use(My)//在其余组件中援用<My />
use其实就是调用install，而后返回

4 Vue.set(target,key,value) Vue.delete(target,key)

增加或批改响应式对象的property，target不能是Vue实例或者Vue实例的根数据对象

//Vue实例<template>  <div class="main">    <input type="text" v-model="std.name" />    <input type="button" value="批改" @click="Modify" />    <input type="button" value="删除" @click="Delete" />  </div></template><script>export default {  name: "App",  data() {    return {      std: {        name: "张三",      },    };  },  methods: {    Modify() {      this.$set(this.std, "name", "李四");    },    Delete() {      this.$delete(this.std, "name");    },  },};</script>

5 Vue.filter(id,[definition])

注册或者获取全局过滤器

//main.js中全局注册Vue.filter('upperCase', value => {  return value.toUpperCase()})//组件中应用<template>  <div class="main">    <span>{{ name | upperCase }}</span>  </div></template><script>export default {  name: "App",  data() {    return {      name: "bob",    };  },};</script>
过滤器以管道符为分隔，管道符前作为过滤器的第一个参数，能够增加额定的参数
能够再增加一个过滤器接管前一个过滤器的返回值，依然以管道符为分隔

6 Vue.mixin(mixin)

全局混入
能够在所有Vue实例上注入自定义的行为
minxin是一个对象，能够定义相干的属性与办法

//mixin.js文件 定义混入export const mixin = {    mounted() {        console.log(this._uid + "挂载实现")    },}//main.js问价 注册混入import { mixin } from './mixin'Vue.mixin(mixin)

7 Vue.directive(id,[definition])

注册或获取全局指令

//main.js文件 自定义指令Vue.directive('focus', {  inserted(el, binding) {    el.focus()    el.value = binding.value;  },})//在组件中应用<template>  <div class="main">    <input type="text" v-focus="tip" />  </div></template><script>export default {  name: "App",  data() {    return {      tip: "请输出姓名",    };  },};</script>
  • 在定义时id前不必增加v-，在应用时增加
  • definition是一个对象，外部蕴含钩子函数

7.1 自定义指令的钩子函数

bind：指令首次绑定到元素时调用，仅调用一次
inserted：绑定指令的元素插入父节点时调用
update：所在组件的Vnode更新时调用，可能产生在其子Vnode更新之前
componentUpdated：指令所在组件的Vnode及其子Vnode全副更新后调用
unbind：指令与元素解绑时调用，仅调用一次

7.2 钩子函数的参数

  • el：绑定的元素，实在DOM

  • binding：一个对象，属性如下

    • name：指令名
    • value：指令绑定值 =后的值
    • oldValue：前一个绑定值，仅在更新的两个钩子中应用
    • expression：字符串模式的指令表达式
    • arg：传给指令的参数 :后的值
    • modifiers：蕴含修饰符的对象
  • vnode：Vue编译生成的虚构节点
  • oldVnode：上一个虚构节点，仅在更新的两个钩子中应用

8 Vue.nextTick([callback,context])

下次DOM更新循环完结之后执行提早回调
批改数据之后立刻应用这个办法，获取更新后的DOM
无回调返回一个Promise

<template>  <div>    <ul ref="ulEl">      <li v-for="item in list" :key="item">{{ item }}</li>    </ul>    <input type="button" value="增加" @click="add" />  </div></template><script>export default {  name: "App",  data() {    return {      list: ["0", "1"],    };  },  methods: {    async add() {      //批量增加数据      this.list.push(Math.random());      this.list.push(Math.random());      //获取元素      const ulElem = this.$refs.ulEl;      console.log(ulElem.childNodes.length);//2      await this.$nextTick();      console.log(ulElem.childNodes.length);//4    },  },};</script>
在nextTick()之前获取的并不是最新的DOM，在齐全更新实现后才会调用nextTick()，之后就能够获取到最新的DOM了

9 Vue.compile(template)

将一个模板字符串编译成render函数，只在完整版时应用

let res = Vue.compile('<p>衬衫的加个是{{price}}</p>')new Vue({    data() {        return {            price: "九磅十五便士",        }    },    render: res.render}).$mount('#root1')
应用render函数，就不必再增加template

10 Vue.observable(object)

让一个对象可响应，能够在较小的我的项目里代替vuex实现状态治理

//store.js 状态治理import Vue from 'vue'export let store = {    state: Vue.observable({ count: 0 }),    mutations: {        setCount(count) {            store.state.count = count;        }    }}//子组件 展现数据<template>  <span>{{ "子组件的count：" + count }}</span></template><script>import { store } from "../store";export default {  computed: {    count() {      return store.state.count;    },  },};</script>//父组件 批改与展现数据<template>  <div>    <span>{{ "store中的count:" + count }}</span>    <br />    <input type="button" value="+" @click="setCount(count + 1)" />    <input type="button" value="-" @click="setCount(count - 1)" />    <br />    <Child />  </div></template><script>import { store } from "./store";import Child from "./components/Child.vue";export default {  name: "App",  components: {    Child,  },  computed: {    count() {      return store.state.count;    },  },  methods: {    setCount: store.mutations.setCount,  },};</script>
当在父组件批改时，子组件也会同时响应

11 Vue.version

Vue装置版本号

import Vue from 'vue'console.log(Vue.version);//2.6.14

其余

把Vue构造函数打印进去能够看到它还有几个属性

  • Vue.options
  • Vue.util
  • Vue.config
这些在后续独自举例，在这里就不再叙述