【vue】Vue上的API

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

这些在后续单独举例，在这里就不再叙述