当前位置: 首页 > Web前端 > HTML

04-Vue可复用技术

时间:2023-03-29 11:33:37 HTML

1.Mix-in混入规则:当组件和混入对象有同名选项时,这些选项将以适当的方式合并。(1)当data数据对象混入时,会合并。当发生冲突时,组件的数据将被保留。(2)当value为objectmethods、computed等,混入时,会将同名的methods合并为一个对象。如果对象的键名冲突,则保留组件对象的键值对。(3)生命周期钩子函数同名的钩子函数会合并成一个数组,依次调用,但混入对象的钩子函数会先被调用。全局混入Vue.mixin(mixin)本地混入letvm=newVue({el:"#app",//本地混入mixins:[mixin]})2.自定义命令里面有5个钩子函数(1)bind(el,binding,vnode,oldVnode){}//绑定时调用一次(2)inserted(el,binding,vnode,oldVnode){}//节点追加到父节点时调用(3)update(el,binding,vnode,oldVnode){}//vnode更新(4)componentUpdated(el,binding,vnode,oldVnode){}//组件更新调用(5)unbind(el,binding,vnode,oldVnode){}//解绑定时调用一次每个钩子函数内部有4个形参el当前指令绑定绑定的dom对象绑定指令的当前值详细信息vNodeVue编译的虚拟dom节点oldNodeoldNode上的虚拟dom节点,该参数只有在update和componentUpdated这两个hook被触发时才有实际参数。3.过滤器Vue.js允许自定义过滤器,可用于一些常见的文本格式。过滤器可以用在两个地方:双花括号插值和v-bind表达式。应在JavaScript表达式的末尾添加过滤器,用竖线“|”表示象征。在双花括号中{{message|filterMethod}}inv-bind鼠标悬停查看时间

首先引入'moment'第三方库,然后进行下一步操作。moment的引入只是为了实现功能,与过滤器无关。全局注册Vue.filter("fmtDate",(val)=>{return...val})部分注册过滤器:{fmtDate(val){return...val}}4.renderfunctionrender(createElement){returncreateElement(nodeName,props,childVnode)}createElement函数内部参数说明nodeName:标签名称props:元素'class'的配置信息,style,attrs,props,domProps,On,nativeOnchildVnode:子虚拟节点,一般为数组,代表其子元素5.plugin插件插件插件需要在vue实例构建之前提供一个install方法来调用插件,保证创建的vue实例可以访问插件中的全局方法或属性Vue.user(MyPlugin)letvm=新Vue({})