【vue】Vue上的API vue.js属性方法api

Vue上的API

Vue.extend
Vue.component
Vue.use
Vue.set
Vue.delete
Vue.directive
Vue.filter
Vue.nextTick
Vue.mixin
Vue.compile
Vue.observable
Vue.version

1 Vue.extend({options}) 通过Vue创建一个子类，参数是一个组件选项的对象
data选项必须是函数

在初始化时会判断data是 函数还是 对象
函数：执行这个函数，返回一个新对象
对象：直接使用这个对象，那么实例化这个子类时，这个对象是公有的，全局污染

//创建子类 const myVue = Vue.extend({ template: '衬衫的价格是{{price}} ', data() { return { price: "九磅十五便士" } }, }) //实例化子类并挂载 const myVm1 = new myVue().$mount("#root1") const myVm2 = new myVue({ el: "#root2" })//结果衬衫的价格是九磅十五便士衬衫的价格是九磅十五便士

动态渲染组件，可以像调用函数一样调用组件

2 Vue.component(id , [definition]) 定义组件，组件是一个可复用的Vue实例，可以作为自定义元素来使用
definition可以是Vue.extend(options)，也可以直接使一个options对象-还是会执行Vue.extend()

//定义一个组件 Vue.component('Child1', { template: `衬衫的价格是{{price}} `, data() { return { price: "九磅十五便士", } }, }) new Vue().$mount('#root1')//定义子类 const myVue = Vue.extend({ template: `【【vue】Vue上的API】我的名字叫{{name}} `, data() { return { name: "韩梅梅" } }, }) Vue.component('Child2', myVue) new Vue().$mount('#root2')

上面两种方式都可以去自定义一个组件

3 Vue.use(plugin) 安装插件，通常在安装一个包之后想在Vue中使用，需要先引入然后Vue.use后才可以使用，Vue.use会调用该模块中的install方式
使用use的方式定义组件，模仿插件的安装过程

//MyComponent.vue文件 //创建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)//在其他组件中引用

use其实就是调用install，然后返回

4 Vue.set(target,key,value) Vue.delete(target,key) 添加或修改响应式对象的property，target不能是Vue实例或者Vue实例的根数据对象

//Vue实例

5 Vue.filter(id,[definition]) 注册或者获取全局过滤器

//main.js中全局注册 Vue.filter('upperCase', value => { return value.toUpperCase() }) //组件中使用

过滤器以管道符为分隔，管道符前作为过滤器的第一个参数，可以添加额外的参数
可以再添加一个过滤器接收前一个过滤器的返回值，仍然以管道符为分隔

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 = https://www.it610.com/article/binding.value; }, }) //在组件中使用

在定义时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

在nextTick()之前获取的并不是最新的DOM，在完全更新完成后才会调用nextTick()，之后就可以获取到最新的DOM了

9 Vue.compile(template) 将一个模板字符串编译成render函数，只在完整版时使用

let res = Vue.compile('衬衫的加个是{{price}} ') 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; } } } //子组件展示数据 //父组件修改与展示数据