推广网站加盟,低价网站建设推广优化,怀化网络营销,网站定位的核心意义Vue CLI安装和使用
全局安装最新vue3
npm install vue/cli -g升级Vue CLI#xff1a; 如果是比较旧的版本#xff0c;可以通过下面命令来升级
npm update vue/cli -g通过脚手架创建项目
vue create 01_product_demoVue3父子组件的通信
父传子
父组件
template…Vue CLI安装和使用
全局安装最新vue3
npm install vue/cli -g升级Vue CLI 如果是比较旧的版本可以通过下面命令来升级
npm update vue/cli -g通过脚手架创建项目
vue create 01_product_demoVue3父子组件的通信
父传子
父组件
templatedivdiv classitem v-for(item,index) in user_list :keyindexuser-component :nameitem.name :ageitem.age/user-component/div/div
/templatescriptimport UserComponent from ./components/UserComponentexport default {components:{UserComponent},data(){return {user_list:[{name:why,age:18},{name:zhang,age:26},]}}}
/scriptstyle scoped/style子组件 UserComponent.vue
templatedivdiv名字{{ name }}/divdiv年龄{{ age }}/div/div
/templatescriptexport default {props:{name:{type:String,default:},age:{type:Number,default:0},// 对象类型friend:{type:Object,default:()({name:james})},// 数组类型hobbies:{type:Array,default:()[篮球,rap,唱跳]}}}
/scriptstyle scoped/style子传父
父组件
templatedivdiv{{ counter }}/divJiaComponent jiajia/JiaComponent JianComponent jianjian/JianComponent /div
/templatescriptimport JiaComponent from ./JiaComponentimport JianComponent from ./JianComponentexport default {components:{JiaComponent,JianComponent},data(){return {counter:1}},methods:{jian:function(data){this.counter this.counter - data;},jia:function(data){this.counter this.counter data;}}}
/scriptstyle scoped/style**子组件1 JiaComponent.vue **
templatedivdivbutton clickjia(1)1/buttonbutton clickjia(5)5/buttonbutton clickjia(10)10/button/div/div
/templatescriptexport default {emits:[jia], // 使用的时候会有提醒// emits:{// // 验证// jia:function(data){// if(data 5){// return true// }// return false// }// },methods:{jia(data){this.$emit(jia,data);}}}
/scriptstyle scoped/style** 子组件2 JianComponent.vue **
templatedivdivbutton clickjian(1)-1/buttonbutton clickjian(5)-5/buttonbutton clickjian(10)-10/button/div/div
/templatescriptexport default {methods:{jian(data){this.$emit(jian,data);}}}
/scriptstyle scoped/style插槽基本使用
父组件
templatedivTitleComponents title标题 desc描述描述描述描述描述/TitleComponents !-- 1.插入button --TitleComponents title标题 desc描述描述描述描述描述button按钮/button/TitleComponents!-- 2.插入a链接 --TitleComponents title标题 desc描述描述描述描述描述a hrefhttps://www.baidu.com百度一下/a/TitleComponents!-- 3.插入image --TitleComponents title标题 desc描述描述描述描述描述img srchttps://gimg3.baidu.com/search/srchttp%3A%2F%2Fpics6.baidu.com%2Ffeed%2F34fae6cd7b899e512cb62692d10fdf3ec9950db4.jpeg%40f_auto%3Ftoken%3D8ce9dbae74003846c318068640c41183referhttp%3A%2F%2Fwww.baidu.comapp2021sizef360,240n0g0nq75fmtauto?sec1698944400te504855a1a7b815dfa76940bb9ac2a07 //TitleComponents!-- 4. 默认显示 --TitleComponents title标题 desc描述描述描述描述描述/TitleComponents /div
/templatescript
import TitleComponents from ./TitleComponents.vueexport default {components:{TitleComponents}}
/scriptstyle scoped/style子组件 TitleComponents.vue
templatedivh1{{ title }}/h1div{{ desc }}/divslotdiv这里是默认内容/div/slot/div
/templatescriptexport default {props:{title:{type:String,default:默认标题},desc:{type:String,default:}}}
/scriptstyle scoped/style插槽_具名插槽
父组件
templatedivNavComponenttemplate v-slot:leftbutton返回/button/templatetemplate v-slot:center首页/templatetemplate v-slot:righta href# 登录/a/template/NavComponentNavComponenttemplate v-slot:[position]button返回/button/template/NavComponentbutton clickposition left左边/buttonbutton clickposition center中间/buttonbutton clickposition right右边/button/div
/templatescriptimport NavComponent from ./NavComponent.vue;export default {components:{NavComponent},data(){return {position:left}}}
/scriptstyle scoped/style**子组件 NavComponent.vue **
templatedivdiv styledisplay: flex;flex-direction: row;height: 100px;div classleft slot nameleft左边/slot /divdiv classcenter slot namecenter中间/slot /divdiv classrightslot nameright右边/slot/div/div/div
/templatescriptexport default {}
/scriptstyle scoped.left{width:30%;background-color: aqua;}.center{width: 40%;background-color: bisque;}.right{width: 30%;background-color: blueviolet;}
/style组件插槽_作用域插槽
父组件
templatedivNavComponet :nav_listnav_listtemplate v-slot:defaultporps_val{{ porps_val.item }}---{{ porps_val.abc }}/template/NavComponet!-- --hrNavComponet :nav_listnav_listtemplate #defaultporps_vala href#{{ porps_val.item }}---{{ porps_val.abc }}/a/template/NavComponet/div
/templatescriptimport NavComponet from ./NavComponet.vueexport default {components:{NavComponet},data(){return {nav_list:[{id:1,title:标题1},{id:1,title:标题2},{id:1,title:标题3},]}}}
/scriptstyle scoped/style子组件 NavComponet.vue
templatedivdiv classnavdiv v-for(item,index) in nav_list :keyindex classnav_itemdiv{{ item.title }}/divslot :itemitem.title abccbadiv{{ item.title }}/div/slot/div/div/div
/templatescriptexport default {props:{nav_list:{type:Array,default:(){return [{id:1,title:衣服},{id:1,title:食物},{id:1,title:玩具},];}}},data(){return {}}}
/scriptstyle scoped.nav{display: flex;flex-direction: row;}.nav_item{flex:1;}
/styleProvide和Inject
App.vue
templatediv classapphome-component/home-componenth2app:{{ message }}/h2button clickmessage hello world改变message/button/div
/templatescriptimport { computed } from vueimport HomeComponent from ./HomeComponent.vueexport default {components:{HomeComponent},data(){return {message:Hello App}},provide(){return {name:why,age:18,message:computed((){return this.message}) }}}
/scriptstyle scoped/style**子组件 HomeBanner.vue **
templatedivh2HomeBanner:{{ name }} - {{ age }} - {{ message }}/h2/div
/templatescriptexport default {inject:[name,age,message]}
/scriptstyle scoped/style孙组件 HomeComponent.vue
templatedivhome-banner/home-banner/div
/templatescriptimport HomeBanner from ./HomeBanner.vue;export default {components:{HomeBanner},data(){return {}}}
/scriptstyle scoped/style事件总线的使用
App.vue
templatediv classapp!-- 安装状态管理库 npm install hy-event-store --!-- Mitt事件状态略 --HomeCon/HomeCon h2{{ message }}/h2button clickshow_cate_gory !show_cate_gory是否显示cate_gory/buttoncate-gory v-ifshow_cate_gory/cate-gory/div
/templatescriptimport eventBus from ./utils/event.bus;import HomeCon from ./HomeCon.vueimport CateGory from ./CateGory.vueexport default {components:{HomeCon,CateGory},data(){return {message:hello vue,show_cate_gory:true}},created(){// 事件监听eventBus.on(whyEvent,(name,age,height){console.log(whyEvent事件在app中的监听,name,age,height)this.message name:${name},age:${age},height:${height}})}}
/scriptstyle scoped/style** 子组件 CateGory.vue**
templatedivh2Category/h2/div
/templatescriptimport eventBus from ./utils/event.bus.jsexport default {methods:{whyEventHandler(){console.log(whyEvent在category中监听)}},created(){eventBus.on(whyEvent,this.whyEventHandler)},unmounted(){console.log(category umounted)eventBus.off(whyEvent,this.whyEventHandler)}}
/scriptstyle scoped/style**子组件 HomeBanner.vue **
templatedivbutton clickbannerBtnClickbanner按钮/button/div
/templatescriptimport eventBus from ./utils/event.bus;export default {methods:{bannerBtnClick(){console.log(bannerBtnClick)eventBus.emit(whyEvent,why,18,1.88)}}}
/scriptstyle scoped/style** 子组件 HomeCon.vue**
templatedivhome-banner/home-banner/div
/templatescriptimport HomeBanner from ./HomeBanner.vue;export default {components:{HomeBanner},data(){return {}}}
/scriptstyle scoped/style事件总线 event.bus.js
import { HYEventBus } from hy-event-storeconst eventBus new HYEventBus()export default eventBus生命周期函数演练
App.vue
templatedivh2{{ message }}---{{ counter }}/h2button clickmessage hello world 修改message/buttonbutton clickcounter1/buttonbutton clickshowHome !showHome隐藏home/buttonhome-com v-ifshowHome/home-com/div
/templatescriptimport HomeCom from ./HomeCom.vueexport default {components:{HomeCom},data(){return {message:hello vue,counter:1,showHome:true}},// 1.组件创建之前beforeCreate(){console.log(beforeCreate)},// 2.组件被创建完成created(){console.log(组件被创建完成created)console.log(1.发送网络请求请求数据)console.log(2.监听eventbus事件)console.log(3.监听watch数据)},// 3. 组件template准备被挂在beforeMount(){console.log(beforeMount)},// 4.组件template被挂载虚拟dom》真实dommounted(){console.log(mounted)console.log(1.获取DOM)console.log(2.使用DOM)},// 5.数据发生改变// 5.1 准备更新DOMbeforeUpdate(){console.log(beforeUpdate)},// 5.2 更新DOMupdated(){console.log(updated)},// 6.卸载Vnode-》DOM原生// 6.1 卸载之前beforeUnmount(){console.log(beforeUnmount)},// 6.2 DOM元素被卸载完成unmounted(){console.log(unmounted)}}
/scriptstyle scoped/style子组件 HomeCom.vue
templatedivHome/div
/templatescriptexport default {unmounted(){console.log(unmounted home)},beforeUnmount(){console.log(beforeUnmout home)}}
/scriptstyle scoped/styleref获取元素组件
App.vue
templatedivh2 reftitle classtitle :style{color:titleColor}{{ message }}/h2button refbtn clickchangeTitle修改title/buttonBannerCom refbanner/BannerComBannerCom refbanner/BannerComBannerCom refbanner/BannerComBannerCom refbanner/BannerComBannerCom refbanner/BannerCom/div
/templatescriptimport BannerCom from ./BannerCom.vue;export default {components:{BannerCom},data(){return {message:hello world,titleColor:red}},methods:{changeTitle(){// 1.不要主动去获取DOM并且修改DOM内容this.message 你好啊世界this.titleColor blue// 2.获取h2/button元素console.log(this.$refs.title)console.log(this.$refs.btn)// 3.获取banner组件组件实例console.log(this.$refs.banner)// 3.1在父组件中可以主动的调用子组件的方法this.$refs.banner.bannerClick()// 3.2 获取banner组件实例获取banner中的元素console.log(this.$refs.banner.$el)// 3.3 如果banner template是多个根拿到的是一个node节点console.log(this.$refs.banner.$el.nextElementSibling)// 第二个node节点console.log(this.$refs.banner.$el.previousElementSibling)// 4.组件实例了解console.log(this.$parent); // 父组件console.log(this.$root); //根组件}}}
/scriptstyle scoped/style**子组件 BannerCom.vue **
templatediv classbannerBanner/divdiv classbanner2/div
/templatescriptexport default {methods:{bannerClick(){console.log(bannerClick)}}}
/scriptstyle scoped/style内置组件的使用
App.vue
templatedivbutton v-for(item,index) in tab_arr :styledefault_tab item ? color:red; : :keyindex clickshow_tab(item){{ item }}/button!-- 第一中方法 --!-- div v-ifdefault_tabhomeHomeCom/HomeCom/divdiv v-ifdefault_tababoutAboutCom/AboutCom/divdiv v-ifdefault_tabcategoryCategoryCom/CategoryCom/div --!-- 第二种方式 --component namekb age20 homebtnhomebtn :isdefault_tab/component/div
/templatescriptimport HomeCom from ./views/HomeCom.vueimport AboutCom from ./views/AboutCom.vueimport CategoryCom from ./views/CategoryCom.vueexport default {components:{HomeCom,AboutCom,CategoryCom},data(){return {tab_arr:[HomeCom,AboutCom,CategoryCom],default_tab:HomeCom}},methods:{show_tab(item){this.default_tab item},homebtn(eve){console.log(homebtn,eve)}}}
/scriptstyle scoped/style** 子组件 AboutCom.vue**
templatedivabout组件/div
/templatescriptexport default {}
/scriptstyle scoped/style子组件 CategoryCom.vue
templatedivcategory组件/div
/templatescriptexport default {}
/scriptstyle scoped/style子组件 HomeCom.vue
templatedivhome组件{{ name }} --- {{ age }}button clickhomebtnhomebtn/button/div
/templatescriptexport default {data(){return {}},props:{name:{type:String,default:why},age:{type:String,default:18}},emits:[homebtn],methods:{homebtn(){this.$emit(homebtn,home)}}}
/scriptstyle scoped/styleKeep-Alive的使用-分包
App.vue
templatedivbutton v-for(item,index) in tab_arr :styledefault_tab item ? color:red; : :keyindex clickshow_tab(item){{ item }}/button!-- 第一中方法 --!-- div v-ifdefault_tabhomeHomeCom/HomeCom/divdiv v-ifdefault_tababoutAboutCom/AboutCom/divdiv v-ifdefault_tabcategoryCategoryCom/CategoryCom/div --!-- 第二种方式 --KeepAlive includeHomeCom,AboutComcomponent :isdefault_tab/component/KeepAlive/div
/templatescript
import { defineAsyncComponent } from vueimport HomeCom from ./views/HomeCom.vueimport AboutCom from ./views/AboutCom.vue
// import CategoryCom from ./views/CategoryCom.vueconst AsyncCategory defineAsyncComponent(()import(./views/CategoryCom.vue))export default {components:{HomeCom,AboutCom,CategoryCom:AsyncCategory},data(){return {tab_arr:[HomeCom,AboutCom,CategoryCom],default_tab:HomeCom}},methods:{show_tab(item){this.default_tab item},homebtn(eve){console.log(homebtn,eve)}}}
/scriptstyle scoped/style子组件 AboutCom.vue
templatedivabout组件/div
/templatescriptexport default {name:AboutCom,created(){console.log(about created)},unmounted(){console.log(about unmounted)},}
/scriptstyle scoped/style**子组件 CategoryCom.vue **
templatedivcategory组件/div
/templatescriptexport default {created(){console.log(category created)},unmounted(){console.log(category unmounted)},}
/scriptstyle scoped/style子组件 HomeCom.vue
templatedivhome组件div计数{{ counter }}/divbutton clickjia加1/button/div
/templatescriptexport default {name:HomeCom,data(){return {counter:0}},created(){console.log(home created)},unmounted(){console.log(home unmounted)},// 对于保持keep-alive组件监听有没有进行切换// keep-alive组件进入活跃状态activated(){console.log(home activated)},deactivated(){console.log(home deactivated)}, methods:{jia:function(){this.counter;}}}
/scriptstyle scoped/style组件的v-model
App.vue
templatediv classapp!-- 1.input v-model --!-- input typetext v-modelmessage --!-- input typetext :valuemessage inputmessage $event.target.value --!-- CounterCom :modelValueappCounter update:modelValueappCounter $event/CounterCom --!-- CounterCom v-modelappCounter/CounterCom --CounterCom2 v-model:counterappCounter v-model:whywhy/CounterCom2/div
/templatescriptimport CounterCom2 from ./CounterCom2.vueexport default {components:{CounterCom2},data(){return {message:hello,appCounter:100,why:coderwhy}}}
/scriptstyle scoped/style**子组件 CounterCom.vue **
templatedivcounterdivmodelValue:{{ modelValue }}/divbutton clickchangeCounter修改counter/button/div
/templatescriptexport default {props:{modelValue:{type:String,default:}},emits:[update:modelValue],methods:{changeCounter(){this.$emit(update:modelValue,999999)}}}
/scriptstyle scoped/style子组件 CounterCom2.vue
templatedivdivcounter:{{ counter }}/divbutton clickchangeCounter修改counter/buttondivwhy:{{ why }}/divbutton clickchangeWhy修改why的值/button/div
/templatescriptexport default {props:{counter:{type:String,default:},why:{type:String,default:}},emits:[update:counter,update:why],methods:{changeCounter(){ this.$emit(update:counter,999999)},changeWhy(){this.$emit(update:why,kobi)}}}
/scriptstyle scoped/style组件的混入Mixin
message-mixin.js
export default {data(){return {message:Hello World}},created(){console.log(message:,this.message)}
}**App.vue **
templatedivHomeCon/HomeConAboutCon/AboutConCatetoryCon/CatetoryCon/div
/templatescriptimport HomeCon from ./views/HomeCon.vueimport AboutCon from ./views/AboutCon.vueimport CatetoryCon from ./views/CatetoryCon.vueexport default {components:{HomeCon,AboutCon,CatetoryCon}}
/scriptstyle scoped/style子组件 AboutCon.vue
templatedivh2AboutCon组件/h2/div
/templatescript
import messageMixin from ../mixins/message-mixinexport default {mixins:[messageMixin]}
/scriptstyle scoped/style子组件 CatetoryCon.vue
templatedivh2CatetoryCon组件/h2/div
/templatescript
import messageMixin from ../mixins/message-mixinexport default {mixins:[messageMixin]}
/scriptstyle scoped/style子组件 HomeCon.vue
templatedivh2HomeCon组件/h2/div
/templatescript
import messageMixin from ../mixins/message-mixinexport default {mixins:[messageMixin]}
/scriptstyle scoped/style感谢观看我们下次再见
