西部数码网站备份,wordpress 数据库查询插件,电商培训班一般学多久,如何对现有的网站改版删除Vue-cli预设
在用户根目录下(C:\Users\你的用户名)这个地址里有一个.vuerc 文件,修改或删除配置
组件
Props(组件之间的数据传递) Prop 的大小写 (camelCase vs kebab-case)不敏感Prop 类型: String Number Boolean Array Object Date Function Symbol传递静态或动态 Pr…删除Vue-cli预设
在用户根目录下(C:\Users\你的用户名)这个地址里有一个.vuerc 文件,修改或删除配置
组件
Props(组件之间的数据传递) Prop 的大小写 (camelCase vs kebab-case)不敏感Prop 类型: String Number Boolean Array Object Date Function Symbol传递静态或动态 Prop单向数据流:只能父传子不能子传父Prop 验证 类型验证 空验证(是否允许为空) 默认值(缺省值) 注意对象或数组默认值必须从一个工厂函数获取 自定义事件 子传父 .sync修饰符插槽 插槽内容tab切换编译作用域:父级模板里的所有内容都是在父级作用域中编译的子模板里的所有内容都是在子作用域中编译的。(动态数据写在哪里就在哪里声明)后备内容(默认值缺省值)具名插槽作用域插槽解构插槽 Prop具名插槽的缩写 v-slot: - #废弃了的语法(了解性知识) 动态组件 异步组件 动态组件keep-alive include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。异步组件:程序运行时不加载组件什么时候组件被使用了才会被加载 处理边界情况 $root property $parentVue 实例 Vue是MVVM的模型但是大家记住他并不是完整的MVVM MModel VMViewModel VView MVC标准的设计模型Angular **实例生命周期钩子:生命周期函数会随着我们对程序理解越深可参考价值越高进入/离开 列表过渡自定义指令 全局指令局部指令 自定义指令存在三个钩子函数 bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted被绑定元素插入父节点时调用 (仅保证父节点存在但不一定已被插入文档中)。 update所在组件的 VNode 更新时调用但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind只调用一次指令与元素解绑时调用。 渲染函数 JSX 过滤器:商城平台价格 局部过滤器全局过滤器
目录结构 App.vue
templatediv idapp!-- MyComponent :titlenum :ageage :bannerbanner demohello/MyComponent --ullihello/liliworld/li/ulhr!-- Parent / --hr!-- SlotParent / --hrkeep-alive includeHomecomponent v-bind:iscurrentPage/component/keep-alivebutton clickchangeComponent切换组件/buttonhrp{{ $root.foo }}/pp{{ $root.getVue() }}/phr!-- ComponentInstance / --hr!-- AnimComponent / --hr!-- DirectiveComponent / --RenderComponenth3我是插槽/h3/RenderComponentFilterComponent //div
/templatescript
//引入各个组件
import MyComponent from ./components/MyComponent
import Parent from ./components/group/Parent
import SlotParent from ./components/slotComponents/SlotParent// import HomePage from ./components/pages/HomePage
// 异步加载
const HomePage () import(./components/pages/HomePage);
import UserPage from ./components/pages/UserPage
import ComponentInstance from ./components/ComponentInstanceimport AnimComponent from ./components/AnimComponent
import DirectiveComponent from ./components/directiveComponentimport RenderComponent from ./components/renderComponent
import FilterComponent from ./components/fitlerComponentexport default {name: App,data(){return{num:100,age:300,banner:[导航,新闻],currentPage:UserPage,flag:true}},components: {MyComponent,Parent,SlotParent,HomePage,UserPage,ComponentInstance,AnimComponent,DirectiveComponent,RenderComponent,FilterComponent},methods:{changeComponent(){if(this.flag){this.currentPage HomePage}else{this.currentPage UserPage}this.flag !this.flag}}
}
/scriptstyle langless
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/styleindex.js
import Vue from vueVue.filter(rmb, (value) {// value就是{{}}或者v-bind绑定的值if (value) {return value}
})focus.js文件
import Vue from vue
// 全局指令
Vue.directive(focus, {inserted(el) {el.focus(); // focus是js的获取input焦点的方法}
})Vue.directive(red,{inserted(el){el.style.color #ff0000}
})AnimComponent.vue
templatedivdivbutton clickflag !flag切换/buttontransition namefadep v-ifflagHelloAnim/p/transition/divdivbutton clickflagAnim !flagAnim切换/buttontransitionnamecustom-classes-transitionenter-active-classanimated rollInleave-active-classanimated rollOutp v-ifflagAnimHelloAnim/p/transition/div/div
/template
script
export default {name: Anim,data() {return {flag: true,flagAnim: true};}
};
/script
style scoped
.fade-enter,
.fade-leave-to {opacity: 0;font-size: 15px;
}.fade-enter-to,
.fade-leave {opacity: 1;font-size: 30px;
}.fade-enter-active,
.fade-leave-active {transition: all 1s;
}
/styleComponentInstance.vue
templatedivp{{ msg }}/pbutton clickmsg 生命周期钩子函数重新渲染修改数据/button/div
/template
script
export default {name: Life,data() {return {msg:生命周期钩子函数};},beforeCreate() {// 做初始化操作console.log(组件创建之前:beforeCreate);},created() {// 做初始化操作console.log(组件创建之后:created);},beforeMount(){// 判断组件渲染之前要做的额外事前console.log(组件渲染之前:beforeMount);},mounted(){// 网络请求console.log(组件渲染之后:mounted);},beforeUpdate(){console.log(数据更新之前:beforeUpdate);},updated(){console.log(数据更新之后:updated);},beforeDestory(){// 将组件中需要清除掉的在次函数中清除// 定时器、持续事件、组件数据清空、清除未完成的网络请求console.log(组件销毁之前:beforeDestory);},destoryed(){console.log(组件销毁之后:destoryed);}
};
/scriptdirectiveComponent.vue
templatediv自定义指令input v-focus typetextp v-red{{ msg }}/pbutton click msg 嘿嘿嘿 修改/button/div
/template
script
export default {name:dir,data(){return{msg:哈哈哈哈}},// 局部指令只能在当前组件中使用directives:{focus:{inserted(el){el.focus();}},red:{bind(el,binding,vnode,oldVnode){console.log(初始化);},inserted(el,binding,vnode,oldVnode){el.style.color #ff0000},update(el,binding,vnode,oldVnode){console.log(指令有更新的时候调用);},componentUpdated(el,binding,vnode,oldVnode){console.log(指令有更新的时候调用!!);},unbind(el,binding,vnode,oldVnode){console.log(解绑调用);}}}
}
/script
filterComponent.vue
templatedivfilter过滤器:span{{ money | rmb }}/spanp{{ text | author | rmb}}/p/div
/templatescript
export default {data(){return{money:101.00,text:喧闹任其喧闹自由我自为知我自风情万种与世无争}},filters:{author(value){if(value){return value ____ 陈果}}}
}
/scriptstyle/styleMyComponent.vue
templatedivMyComponent:{{ title }}:{{ age }}ulli v-for(item,index) in banner :keyindex{{item }}/li/ulp v-ifuser{{ user.username }}/p/div
/template
script
export default {name:MyComponent,data(){return{}},// props:[title]props:{title:{type:Number},age:{type:[Number,String],default:1},banner:{type:Array,required:true},user:{type:Object,default:function(){return{username:iwen}}}}
}
/script
style langless scopedli{list-style: none;
}/stylerenderComponent.vue
script
export default {name:RenderComponent,data(){return{count:10,username:}},methods:{clicikHandle(){this.count 1}},render(){return(divRender函数:{ this.count }button onClick{ this.clicikHandle }按钮/buttondiv{ this.$slots.default }/divinput v-model{this.username} /p{ this.username }/p/div)}
}
/script作为引入的js registerServiceWorker.js
/* eslint-disable no-console */import { register } from register-service-workerif (process.env.NODE_ENV production) {register(${process.env.BASE_URL}service-worker.js, {ready () {console.log(App is being served from cache by a service worker.\n For more details, visit https://goo.gl/AFskqB)},registered () {console.log(Service worker has been registered.)},cached () {console.log(Content has been cached for offline use.)},updatefound () {console.log(New content is downloading.)},updated () {console.log(New content is available; please refresh.)},offline () {console.log(No internet connection found. App is running in offline mode.)},error (error) {console.error(Error during service worker registration:, error)}})
}
components/group/ Child.vue
templatedivChildinput typetext v-modelusername keyupchangeHandlep{{ username }}/pbutton clicksendMsgHandle发送数据/buttonbutton clicksendMsg2Handle发送数据2/button/div
/template
script
export default {name:Child,data(){return{msg:[1,2,3],username:,msg2:数据}},methods:{sendMsgHandle(){this.$emit(onEvent,this.msg)},changeHandle(){this.$emit(myChange,this.username)},sendMsg2Handle(){this.$emit(update:msg2Event,this.msg2)}}
}
/scriptcomponents/group/ Parent.vue
templatedivParent:{{ msg }}:{{ username }}:{{ msg2 }}!-- Child update:msg2EventgetMsg2Handle onEventgetMsgHandle myChangegetChangeHandle/ --Child :msg2Event.syncmsg2 onEventgetMsgHandle myChangegetChangeHandle//div
/template
scriptimport Child from ./Childexport default {name:Parent,data(){return{msg:,username:,msg2:}},components:{Child},methods:{getMsgHandle(data){this.msg data},getChangeHandle(data){this.username data},getMsg2Handle(data){console.log(data);}}
}
/scriptcomponents/pages/ HomePage.vue
templatedivHome:{{ msg }}button clickmsg 我是修改之后的数据修改数据/button/div
/template
script
export default {name:Home,data(){return{msg:我是修改之前的数据}}
}
/scriptcomponents/pages/ UserPage.vue
templatedivUser:{{ msg }}button clickmsg 哈哈哈哈修改数据/button/div
/template
script
export default {name:User,data(){return{msg:呵呵呵呵}}
}
/scriptcomponents/slotComponents/ SlotChild.vue
templatedivslot :useruser/slotslot namehead :msgmsg我是默认值1/slotSlotChildslot namefoot我是默认值2/slotp{{ $parent.message }}/p/div
/template
script
export default {name:SlotChild,data(){return{msg:我是插槽数据,user:{name:iwens}}}
}
/scriptcomponents/slotComponents/ SlotParent.vue
templatedivSlotParentSlotChildtemplate v-slot:headslotPropsh3我是头部{{ demo }}:{{ slotProps.msg }}/h3/templatetemplate #footh3我是底部{{ demo }}/h3/templatetemplate v-slot:default{ user }h3哈哈哈:{{ user.name }}/h3/template!-- template slotdefault slot-scopeslotPropsh3哈哈哈:{{ slotProps.user.name }}/h3/template --/SlotChild/div
/template
script
import SlotChild from ./SlotChild;export default {name: SlotParent,data() {return {demo: 我是demo,message:我是SlotParent的数据!!};},components: {SlotChild}
};
/script运行效果图
