[vue]Vue上的API

时间：2023-04-01 00:11:25 vue.js

VueVue.extendVue.componentVue.useVue.setVue.deleteVue.directiveVue.filterVue.nextTickVue.mixinVue.compileVue.observableVue.version1上的APIVue.extend({options})通过Vue创建子类，参数为组件options的对象data选项必须是函数在初始化的时候会判断data是函数还是对象函数：执行这个函数返回一个新的object对象：直接使用这个对象，那么在实例化这个子类的时候，这个对象是public和globalpollution//创建一个子类constmyVue=Vue.extend({template:'

衬衫的价格是{{price}}

',data(){return{price:"九和fifteentpence"}},})//实例化子类并挂载constmyVm1=newmyVue().$mount("#root1")constmyVm2=newmyVue({el:"#root2"})//结果

衬衫的价格是九十五便士

动态渲染组件，可以调用componentlikeafunction2Vue.component(id,[definition])定义Component，component是一个可重用的Vue实例，可以作为自定义元素定义可以是Vue.extend(options)，或者直接make一个options对象-仍然执行Vue.extend()//定义一个组件Vue.component('Child1',{template:`

衬衫的价格是{{price}}

`,data(){return{price:"九磅十五便士",}},})newVue().$mount('#root1')//定义子类constmyVue=Vue.extend({template:`

我叫{{name}}

`,data(){return{name:"韩梅梅"}},})Vue.component('Child2',myVue)newVue().$mount('#root2')

以上两个您可以以任何方式自定义组件。3Vue.use(plugin)安装一个插件。通常，安装一个包后，如果想在Vue中使用，需要先导入，然后在Vue.use之后使用。vue.use会调用模块的install方法使用use方法定义组件，模仿插件的安装过程//MyComponent.vue文件//创建用于打包的index.js./components/indexinmain.js'Vue.use(My)//在其他组件use中引用其实就是调用install，然后返回4Vue.set(target,key,value)Vue.delete(target,key)添加或修改responsive对象的属性和target不能是Vue实例或Vue实例的根数据对象//Vueinstance5Vue.filter(id,[definition])注册或者获取全局filter//在main.js中全局注册Vue.filter('upperCase',value=>{returnvalue.toUpperCase()})//在组件中使用过滤器由管道符分隔，管道符作为过滤器的第一个参数，可以添加额外的参数。可以添加一个filter接收上一个filter的返回值，仍然使用管道字符作为Separation6Vue.mixin(mixin)全局mixin可以在所有Vue实例上注入自定义行为minxin是一个可以定义相关的对象属性和方法//mixin.js文件定义mixinexportconstmixin={mounted(){console.log(this._uid+"Mountingcomplete")},}//main.js问价注册mixinimport{mixin}from'./mixin'Vue.mixin(mixin)7Vue.directive(id,[definition])注册或获取全局指令//main.js文件自定义指令Vue.directive('focus',{inserted(el,binding){el.focus()el.value=binding.value;},})//Useid定义的时候不需要在id前面加v-，使用的时候加上definition。Definition是一个对象，里面包含了hooksFunction7.1自定义指令的hook函数bind：指令第一次绑定到元素时调用，只调用一次inserted：绑定指令的元素插入到元素时调用parentnodeupdate：组件的Vnode更新时调用，可能发生在其子Vnode更新前componentUpdated：指令所在组件的Vnode及其子Vnode全部更新后，unbind：调用时指令与元素解绑定，只调用一次传递给指令的参数：值修饰符之后：包含修饰符的对象vnode：Vue编译生成的虚拟节点oldVnode：最后一个虚拟节点，仅在下一次DOM更新周期结束后的两个更新钩子中使用Vue.nextTick([callback,context])执行延迟回调后立即使用此方法修改数据以获取更新的DOM返回无回调的Promise在nextTick()之前没有获取到最新的DOM，直到全量更新完成后才会调用nextTick(),然后你可以得到最新的DOM9Vue.compile(template)将模板字符串编译成渲染函数，只使用letres=Vue.compile('

在完整版中添加一件衬衫是{{price}}

')newVue({data(){return{price:"九十五便士",}},render:res.render}).$mount('#root1')使用render函数，所以不需要添加template10Vue.observable(object)来让一个对象响应式，在更小的项目中可以代替vuex实现状态管理//store.js状态管理importVuefrom'vue'exportletstore={state:Vue.observable({count:0}),mutations:{setCount(count){store.state.count=count;}}}//子组件显示数据//父组件修改显示数据当父组件修改时，子组件也会同时响应11Vue.versionVue安装版本号importVuefrom'vue'console.log(Vue.version);//2.6.14别人可以打印出Vue的构造函数看到它还有几个属性Vue.optionsVue.utilVue.config这些后面会单独举例，就不说了在这里描述它们