VUE —— 5、vue项目 超、凢脫俗 2022-10-04 12:56 122阅读 0赞 **目录** (9)vue项目 1.方式一 1.轮播 2.点 3.组件化 2.方式二(简单) 3.综合 4.路由 5.加载流程 6.样式 7.完善项目 -------------------- # (9)vue项目 # ## 1.方式一 ## ### 1.轮播 ### **App****.vue** <template> <div id="app"> ------------------------------------- 添加 ----------------------------------------- <Banner /> //或者也可以? ----------------------------------------------------------------------------------- </div> </template> <script> ------------------------------------- 添加 ----------------------------------------- import Banner from './views/Banner' ----------------------------------------------------------------------------------- export default { data(){ return { } }, components:{ ------------------------------------- 添加 ----------------------------------------- Banner ----------------------------------------------------------------------------------- } } </script> **Banner****.vue** <template> <!-- 轮播功能 --> <div class="banner"> ------------------------------------- 添加 ----------------------------------------- <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/> ----------------------------------------------------------------------------------- <div class="banner-circle"> <ul> <li class="{'selected'}"> </li> </ul> </div> </div> </template> <script> export default { data(){ return { ------------------------------------- 添加 ----------------------------------------- cur:0, //初始化 items:[ require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg')], } }, methods:{ autoPlay(){ setInterval(this.play,2000); //定时器 }, play(){ this.cur ++; if(this.cur == this.items.length){ this.cur = 0; } } }, mounted:function(){ //生命周期,挂载完成 this.autoPlay() }, ----------------------------------------------------------------------------------- destroyed(){ //生命周期,销毁 } } </script> <style scoped> //只能在当前作用域内使用 </style> ![20210716174348248.png][] //图片自动轮播 ### 2.点 ### **Banner****.vue** <template> <!-- 轮播功能 --> <div class="banner"> <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/> <div class="banner-circle"> <ul> ------------------------------------- 添加 ----------------------------------------- <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}"> ----------------------------------------------------------------------------------- </li> </ul> </div> </div> </template> <script> export default { data(){ return { cur:0, //初始化 items:[ require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg')], } }, methods:{ autoPlay(){ setInterval(this.play,2000); //定时器 }, play(){ this.cur ++; if(this.cur == this.items.length){ this.cur = 0; } } }, mounted:function(){ //生命周期,挂载完成 this.autoPlay() }, destroyed(){ //生命周期,销毁 } } </script> <style scoped> //只能在当前作用域内使用 </style> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][] //点随轮播图变化 ### 3.组件化 ### **Banner****.vue** <template> <!-- 轮播功能 --> <div class="banner"> <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/> <div class="banner-circle"> <ul> <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}"> </li> </ul> </div> </div> </template> <script> export default { data(){ return { cur:0, //初始化 items:[ require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg'), ------------------------------------- 添加 ----------------------------------------- require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg')], ----------------------------------------------------------------------------------- } }, methods:{ autoPlay(){ setInterval(this.play,2000); //定时器 }, play(){ this.cur ++; if(this.cur == this.items.length){ this.cur = 0; } } }, mounted:function(){ //生命周期,挂载完成 this.autoPlay() }, destroyed(){ //生命周期,销毁 } } </script> <style scoped> //只能在当前作用域内使用 </style> ![20210716174445433.png][] //一样能行 ## 2.方式二(简单) ## **App****.vue** <template> <div id="app"> ------------------------------------- 添加 ----------------------------------------- <Banner :imgData='items' /> //imgData是随便写的名字 ----------------------------------------------------------------------------------- </div> </template> <script> import Banner from './views/Banner' export default { data(){ return { ------------------------------------- 添加 ----------------------------------------- items:[ require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg'), require('@/assets/img/1.jpg')], ----------------------------------------------------------------------------------- } }, components:{ Banner } } </script> **Banner****.vue** <template> <!-- 轮播功能 --> <div class="banner"> <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/> <div class="banner-circle"> <ul> <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}"> </li> </ul> </div> </div> </template> <script> export default { data(){ return { cur:0, //初始化 ------------------------------------- 关掉 ----------------------------------------- items:[ require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg'), require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg')], ----------------------------------------------------------------------------------- } }, ------------------------------------- 添加 ----------------------------------------- //props:['items'], //获取父传的参数 ----------------------------------------------------------------------------------- methods:{ autoPlay(){ setInterval(this.play,2000); //定时器 }, play(){ this.cur ++; if(this.cur == this.items.length){ this.cur = 0; } } }, mounted:function(){ //生命周期,挂载完成 this.autoPlay() }, destroyed(){ //生命周期,销毁 } } </script> <style scoped> //只能在当前作用域内使用 </style> ![20210716174528869.png][] ## 3.综合 ## ![20210716174541661.png][](两个文件、两个组件) **(方式一继续写)** **App****.vue** <template> <div id="app"> ------------------------------------- 添加 ----------------------------------------- <Nav /> <!-- 左侧展示的内容 --> <!-- 右侧展示的内容 --> <div> <Banner /> //或者也可以? </div> ----------------------------------------------------------------------------------- </div> </template> <script> import Banner from './views/Banner' ------------------------------------- 添加 ----------------------------------------- import Nav from './views/Nav' ----------------------------------------------------------------------------------- export default { data(){ return { } }, components:{ Banner ------------------------------------- 添加 ----------------------------------------- Nav ----------------------------------------------------------------------------------- } } </script> **Nav****.vue** <template> <div class="tree" > <ul> <li class="p_item" v-for="(v,i) in items" :key="i"> <a class="p_title" > <i class="iconfont" :class="v.icon"></i> { {v.name}} </a> </li> </ul> </div> </template> <script> export default { name: 'Home', data(){ return { n:1, items:[ { name:'Tab切换', icon:'icon-yonghu'}, { name:'轮播图', icon:'icon-licai'}, { name:'图表展示', icon:'icon-jia'}] } } } </script> <style scoped> //只能在当前作用域内使用 </style> ![20210716174617567.png][] **App****.vue** <template> <div id="app"> <Nav /> <!-- 左侧展示的内容 --> <!-- 右侧展示的内容 --> <div> <Banner /> //或者也可以? </div> </div> </template> <script> import Banner from './views/Banner' import Nav from './views/Nav' export default { data(){ return { } }, components:{ Banner Nav } } </script> ------------------------------------- 添加 ----------------------------------------- <script> @import './assets/css/index.css' ; #app { height: 100%; } </script> ----------------------------------------------------------------------------------- ![20210716174634629.png][]//完成(两个文件、两个组件) ## 4.路由 ## **index****.js(路由)**![20210716174654453.png][] import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ {path: '/', name: 'Home', component: Home}, {path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. ------------------------------------- 添加 ----------------------------------------- {path: '/tab', name: 'tab', component: () => import('../views/Tab.vue')}, {path: '/banner', name: 'banner', component: ()=>import('../views/Banner.vue')}, {path: '/chart', name: 'chart', component: ()=>import('../views/Chart.vue')} ----------------------------------------------------------------------------------- ] const router = new VueRouter({ routes }) export default router **Banner****.vue** <template> <!-- 轮播功能 --> <div class="banner"> <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/> <div class="banner-circle"> <ul> <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}"> </li> </ul> </div> </div> </template> <script> export default { data(){ return { cur:0, //初始化 items:[ require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg'), require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg')], ------------------------------------- 添加 ----------------------------------------- timer:null //定时器初始化 ----------------------------------------------------------------------------------- } }, methods:{ autoPlay(){ ------------------------------- 添加 this.timer =----------------------------------- this.timer = setInterval(this.play,2000); //定时器 ----------------------------------------------------------------------------------- }, play(){ this.cur ++; if(this.cur == this.items.length){ this.cur = 0; } } }, mounted:function(){ //生命周期,挂载完成 this.autoPlay() }, destroyed(){ //生命周期,销毁 ------------------------------------- 添加 ----------------------------------------- clearInterval(this.timer); //清除定时器 ----------------------------------------------------------------------------------- } } </script> <style scoped> //只能在当前作用域内使用 </style> **Nav****.vue** <template> <div class="tree" > <ul> <li class="p_item" v-for="(v,i) in items" :key="i"> ---------------------------- a 换成 router-link ------------------------------------ <router-link :to="v.url" class="p_title" > <i class="iconfont" :class="v.icon"></i> { {v.name}} </router-link> //router-link 跳转,跳到下面(url:'/tab')的地址 ----------------------------------------------------------------------------------- </li> </ul> </div> </template> <script> export default { name: 'Home', data(){ return { n:1, items:[ ---------------------------------- 添加 url: --------------------------------------- { name:'Tab切换', icon:'icon-yonghu', url:'/tab'}, { name:'轮播图', icon:'icon-licai', url:'/banner'}, { name:'图表展示', icon:'icon-jia', url:'/chart'}] ----------------------------------------------------------------------------------- } } } </script> <style scoped> //只能在当前作用域内使用 </style> ![20210716174739259.png][]![20210716174740582.png][] **App****.vue** <template> <div id="app"> <Nav /> <!-- 左侧展示的内容 --> <!-- 右侧展示的内容 --> <div> ------------------------------------- 换成 ----------------------------------------- <!-- 路由出口 --> <router-view /> //渲染 ----------------------------------------------------------------------------------- </div> </div> </template> <script> import Banner from './views/Banner' import Nav from './views/Nav' export default { data(){ return { } }, components:{ Banner, Nav } } </script> <script> @import './assets/css/index.css' ; #app { height: 100%; } </script> **Tab****.vue** <template> <h1>tabtabtabtab</h1> </template> <script> export default { name: 'Home', } </script> <style scoped> //只能在当前作用域内使用 </style> **Chart****.vue** <template> <h1>图表展示 图表</h1> </template> <script> export default { name: 'Home', } </script> <style scoped> //只能在当前作用域内使用 </style> **App****.vue** <template> <div id="app"> <Nav /> <!-- 左侧展示的内容 --> <!-- 右侧展示的内容 --> <div> <!-- 路由出口 --> <router-view /> //渲染 </div> </div> </template> <script> ----------------------------------- 去掉多余 --------------------------------------- import Banner from './views/Banner' ----------------------------------------------------------------------------------- import Nav from './views/Nav' export default { data(){ return { } }, components:{ ----------------------------------- 去掉多余 --------------------------------------- Banner ----------------------------------------------------------------------------------- Nav } } </script> <script> @import './assets/css/index.css' ; #app { height: 100%; } </script> ![20210716174834474.png][] ![20210716174837341.png][] ![20210716174839601.png][] ## 5.加载流程 ## > **App****.vue** > > ![20210716174850424.png][] > > Nav.vue > > ![20210716174904168.png][] > > **index.****js****(路由)**![20210716174916156.png][] > > ![20210716174913380.png][] > > **App****.vue** > > ![20210716174926420.png][] ## 6.样式 ## ** index.****js****(路由)**![20210716174916156.png][] import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ {path: '/', name: 'Home', component: Home}, {path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. {path: '/tab', name: 'tab', component: () => import('../views/Tab.vue')}, {path: '/banner', name: 'banner', component: ()=>import('../views/Banner.vue')}, {path: '/chart', name: 'chart', component: ()=>import('../views/Chart.vue')} ] const router = new VueRouter({ ------------------------------------- 添加 ----------------------------------------- linkActiveClass: 'active', ----------------------------------------------------------------------------------- routes }) export default router ![20210716175004857.png][]//样式 ![20210716175009409.png][] **//**vue有专门加载样式的方式** ** **Nav****.vue** <template> <div class="tree" > <ul> <li class="p_item" v-for="(v,i) in items" :key="i"> <router-link :to="v.url" class="p_title" > <i class="iconfont" :class="v.icon"></i> { {v.name}} </router-link> //router-link 跳转,跳到下面(url:'/tab')的地址 </li> </ul> </div> </template> <script> export default { name: 'Home', data(){ return { n:1, items:[ { name:'Tab切换', icon:'icon-yonghu', url:'/tab'}, { name:'轮播图', icon:'icon-licai', url:'/banner'}, { name:'图表展示', icon:'icon-jia', url:'/chart'}] } } } </script> <style scoped> //只能在当前作用域内使用 ------------------------------------ 添加 ------------------------------------------ .active { color: #f60; //橙色 border-bottom: 1px solid #f60; //橙色 } ----------------------------------------------------------------------------------- </style> ![2021071617503055.png][]//接触时显示蓝色,点击才会生效显示橙色, ![20210716175035643.png][] **优点:**vue有自动加载样式的方法 ## 7.完善项目 ## **Tab****.vue** <template> <!--数组对象--> <div> <ul class="tab-tit"> <li v-for="(v,i) in obj" :key="i" :class="n==i?'active':''" @click="action(i)"> { {v.title}} </li> </ul> <div class="tab-con"> <div v-for="(v,i) in obj" :key="i" v-show="n==i"> { {v.content}} </div> </div> </div> </template> <script> export default { name: 'Home', data(){ return { n:1, obj:[ {title:'标题1',content:'内容1'}, {title:'标题2',content:'内容2'}, {title:'标题3',content:'内容3'}, {title:'标题4',content:'内容4'}], } }, methods:{ //管理函数 action(i){ this.n = i } }, } </script> <style scoped> //只能在当前作用域内使用 ul,li { padding:0; margin:0; } .tab-tit li{ padding: 10px 15px; text-align: center; list-style:none; cursor:pointer; display: inline-block; } .tab-tit .active{ color: #09f; border-bottom: 1px solid #09f; } .tab-con div{ margin:30px; } </style> **Chart****.vue** ![20210716175108692.png][] > cnpm install --save echarts <template> ----------------------------- 方式二 添加ref="chart" ------------------------------- <div id="main" ref="chart" style="width:600px; height:400px; float:left;"></div> ----------------------------------------------------------------------------------- </template> <script> import echarts from 'echarts' //安装:cnpm install --save echarts(优点:局部) export default { name: 'Home', data(){ return { } }, mounted(){ this.init(); }, methods:{ init(){ // 基于准备好的dom,初始化echarts实例 ---------------------------------- 方式一 ------------------------------------------ // var myChart = echarts.init(document.getElementById('main')); ---------------------------------- 方式二 ------------------------------------------ var myChart = echarts.init(this.$refs.chart); ----------------------------------------------------------------------------------- // 指定图表的配置项和数据 var option = { title: {text: 'ECharts 入门示例'}, tooltip: {}, legend: {data:['销量']}, xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } } } </script> <style scoped> //只能在当前作用域内使用 </style> ![20210716175130983.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][] [20210716174348248.png]: /images/20221004/67de6c81467147e3b9f47b84a740829c.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221004/ef63953ac4ef4376af167d00324a9547.png [20210716174445433.png]: /images/20221004/dd520b10270d42de851abb50a29b854a.png [20210716174528869.png]: /images/20221004/2e2eef47ab854d9c974d1195ae331caf.png [20210716174541661.png]: /images/20221004/fce1738548ba48cab6dd25f8ede48fc4.png [20210716174617567.png]: /images/20221004/98b2e801b18249b2b5b25f3537d8993a.png [20210716174634629.png]: /images/20221004/9a25e69508ea4ae6a05aabfeeaf06b2b.png [20210716174654453.png]: /images/20221004/aa1f629cb1a744baa70527acd032a8ff.png [20210716174739259.png]: https://img-blog.csdnimg.cn/20210716174739259.png [20210716174740582.png]: /images/20221004/ef47141f963940658157a6982dc40a75.png [20210716174834474.png]: /images/20221004/d82bdcbb3b1245daace7074fd84bb554.png [20210716174837341.png]: /images/20221004/d6a832aaa54e4d0495b195763d214c8b.png [20210716174839601.png]: /images/20221004/8522110a9b7649038f9f9e70eeaf7906.png [20210716174850424.png]: /images/20221004/700630de8d224c8ea57411c3e6818eed.png [20210716174904168.png]: /images/20221004/d5d37d96c29a4b90a22106aa017e82b4.png [20210716174916156.png]: /images/20221004/06b934be3fd3417287e55b63f1e327a4.png [20210716174913380.png]: /images/20221004/5244abb0070a45358c00fd69b9ed7c55.png [20210716174926420.png]: /images/20221004/2f2d1491ba274871b207965b7e0d6280.png [20210716175004857.png]: /images/20221004/585fc4af44e244bd99f3fb014f1b0aec.png [20210716175009409.png]: /images/20221004/7c852aeaaa0c42f7ab6ff0829c2b5c38.png [2021071617503055.png]: /images/20221004/9f40bd160449450381d0c3fb85ebda51.png [20210716175035643.png]: /images/20221004/d6ec4c8c8dac45bd9f20d09933fe683d.png [20210716175108692.png]: /images/20221004/f172d542265848eb8b57e438fb3570f0.png [20210716175130983.png]: /images/20221004/d48da908906743328e778ce6d2ef04ad.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/03ef18bffb4a4bedb42a1231980ab651.png
还没有评论,来说两句吧...