首页 > 代码库 > vue框架
vue框架
关于vue如何安装以及使用webpack管理项目在这里我就不作介绍了，这边主要是给出我做的一个小demo的例子给大家作为参考，希望 对你们有用吧！
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <title>vueproject</title> 7 <script> 8 document.documentElement.style.fontsize=innerWidth/3.75+"px"; 9 window.onresize=function(){10 document.documentElement.style.fontsize=innerWidth/3.75+"px";11 }12 </script>13 <link rel="stylesheet" href="static/font/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">14 <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_xcl480e81zoos9k9.css"/>15 </head>16 <body>17 <div id="app"></div>18 <!-- built files will be auto injected -->19 </body>20 </html>
里面引入了页面需要的一些图标，用的是font-awesome里的，大家也可以使用阿里巴巴里的图标
APP.vue
<template> <div id="app"> <router-view></router-view> <ul id="tab"> <li :class="{active_btn:iscur==0}" @click="iscur=0" v-on:click="changeImg()"> <router-link to="/home"> <i class="iconfont icon-moren_shouye_icon"></i> <p>首页</p> </router-link> </li> <li :class="{active_btn:iscur==1}" @click="iscur=1" v-on:click="changeImg()"> <router-link to="/category"> <i class="iconfont icon-moren_fenleiicon"></i> <p>分类</p> </router-link> </li> <li :class="{active_btn:iscur==2}" @click="iscur=2" v-on:click="changeImg()"> <router-link to="/group"> <img :src="imgState"/> <p class="tab_group">菌团</p> </router-link> </li> <li :class="{active_btn:iscur==3}" @click="iscur=3" v-on:click="changeImg()"> <router-link to="/mostIn"> <i class="iconfont icon-moren_zuiinicon"></i> <p>最In</p> </router-link> </li> <li :class="{active_btn:iscur==4}" @click="iscur=4" v-on:click="changeImg()"> <router-link to="/mine"> <i class="iconfont icon-wodeicon1"></i> <p>我的</p> </router-link> </li> </ul> </div></template><script>export default { name: ‘app‘, data(){ return{ iscur:0, imgState:"http://img.zhefengle.com/ca7151b676a709b0f9660eac0a274fa5.png" } }, methods:{ changeImg :function () { if(this.iscur==2){ this.imgState="http://img.zhefengle.com/3956d9c44bc8e0093428314d0763dab2.png"; }else{ this.imgState="http://img.zhefengle.com/ca7151b676a709b0f9660eac0a274fa5.png"; } } }}</script><style type="text/css" src="./assets/reset.css"></style><style scoped="scoped">#app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; height: 100%; background:#F3F3F3;}#tab{width:100%;height:2.5rem;position:fixed;bottom:0;border-top: 1px solid #eee;z-index: 1000;background: white;}#tab>ul{width:100%;height:100%}#tab li{float:left;width:20%;height:100%;text-align:center;font-size: .55rem;}#tab li a{position: relative;height: 100%;font-size: .85rem;width:100%;color: #82757d;float: left;vertical-align: top;padding-top: .1rem;}#tab li a i{ position: relative;height: 1.2rem;line-height: 1.2rem;display: inline-block;width: 1.5rem;font-size: 1rem;color: #666;margin-top: .1rem;}#tab .active_btn a i{color: #e61128;}#tab .active_btn a p{color: #e61128;}#tab li a img{ width: 2.05rem;height: 2.05rem;margin-top: -0.8rem;}#tab li a p{font-size: .55rem;position: relative; z-index: 9;}#tab li a .tab_group{margin-top: -0.26rem;}</style>
main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from ‘vue‘import VueRouter from ‘vue-router‘import VueResource from ‘vue-resource‘import App from ‘./App‘import Home from ‘./views/Home‘import Category from ‘./views/Category/Category‘import Cate from ‘./views/Category/Cate/Cate‘import Brand from ‘./views/Category/Brand/Brand‘import Website from ‘./views/Category/Website/Website‘import All from ‘./views/Category/All/All‘import Detail from ‘./views/Category/Detail/Detail‘import Shopdetail from ‘./views/Category/Shopdetail/Shopdetail‘import Gory from ‘./views/Category/Gory/Gory‘import Group from ‘./views/Group‘import Mine from ‘./views/Mine‘import MostIn from ‘./views/MostIn‘import Person from ‘./views/Person‘import Setting from ‘./views/Setting‘import VueAwesomeSwiper from ‘vue-awesome-swiper‘import Validator from ‘vue-validator‘import Choiceness from ‘./components/group/Choiceness‘import Topic from ‘./components/group/Topic‘import Attention from ‘./components/group/Attention‘import Taglist from‘./components/group/Taglist‘import GoodsInfo from‘./components/group/GoodsInfo‘import UserInfo from ‘./views/UserInfo‘import VueScroller from ‘vue-scroller‘Vue.use(VueScroller)Vue.use(Validator)Vue.config.productionTip = falseVue.use(VueRouter)Vue.use(VueResource)Vue.use(VueAwesomeSwiper)const routes=[{path:‘‘,component:Home},{path:‘/home‘,component:Home},{ path: ‘/category‘, component: Category , children:[ { path: ‘/‘, component: Cate }, { path: ‘/cate‘, component: Cate }, { path: ‘/brand‘, component: Brand }, { path: ‘/website‘, component: Website }, ] },{path:‘/group‘,component:Group},{path:‘/mine‘,component:Mine},{path:‘/mostIn‘,component:MostIn},{ path: ‘/All‘, component: All },{ path: ‘/Detail‘, component: Detail },{ path: ‘/Shopdetail‘, component: Shopdetail },{ path: ‘/Gory‘, component: Gory },{path:‘/userInfo‘,component:UserInfo},{path:‘/group‘,component:Group,children:[ {path:‘‘,component:Choiceness}, {path:‘/choiceness‘,component:Choiceness}, {path:‘/topic‘,component:Topic}, {path:‘/attention‘,component:Attention}, {path:‘/taglist‘,component:Taglist}, {path:‘/goodsInfo‘,component:GoodsInfo},]},{path:‘/mine‘,component:Mine},{path:‘/mostIn‘,component:MostIn},{path:‘/person‘,component:Person},{path:‘/Setting‘,component:Setting}]const router=new VueRouter({ routes, mode: ‘history‘, scrollBehavior (to, from, savedPosition) { // 如果你的連結是帶 # 這種 // to.hash 就會有值(值就是連結) // 例如 #3 if (to.hash) { return { // 這個是透過 to.hash 的值來找到對應的元素 // 照你的 html 來看是不用多加處理這樣就可以了 // 例如你按下 #3 的連結，就會變成 querySelector(‘#3‘)，自然會找到 id = 3 的元素 selector: to.hash } } }})/* eslint-disable no-new */new Vue({ el: ‘#app‘, template: ‘<App/>‘, components: { App }, router})
这个部分主要是你组件的部分，需要下载使用什么，需要在这里引入，也可以哪里使用哪里引入，还有就是一般我们都会使用接口拿数据，你也可以单独弄一个js文件来管理那些数据，因为数据是经常变化的 ，方便管理
这里还给大家举一个例子，就是页面下拉的时候，到最底部了，需要重新拿数据，这个时候如何判断已经下拉到最底部了呢？有人会说使用使用可视高度等于滚动的高度就可以了 ，是可以，但是在项目里面用这个方法是不合适的，其实使用下载一个vue-scroller即可解决
<template> <div id="detail"> <div class="title"> <div class="left"> <a href="javascript:void(0)" @click="back()"><</a> </div> <div class="main">{{this.$route.query.name}}</div> </div> <div class="type-list"> <div class="sort-row"> <ul class="sorts"> <li :class="{active_btn:iscur==0}"><a href="javascript:void(0)">综合</a></li> <li :class="{active_btn:iscur==1}" @click="change(0,0,0,0,0,1)"><a href="javascript:void(0)">折扣</a></li> <li :class="{active_btn:iscur==2}" @click="change(-2,0,0,1,0,2)"><a href="javascript:void(0)">价格</a></li> <li :class="{active_btn:iscur==3}" ><a href="javascript:void(0)">筛选</a></li> </ul> </div> </div> <scroller :on-refresh="refresh" :on-infinite="infinite" style="padding-top: 44px;"> <div class="htlist"> <div> <ul> <li v-for="item in items"> <router-link :to="{ path:‘/shopdetail‘, query: { id1: item.shareId} }" class="list-item"> <div class="list-out-lay"> <div class="list-out-img"> <img :src="item.itemImgUrl" alt="" class="img-list"> </div> </div> <div class="main"> <h4>{{item.itemTitle}}</h4> <div class="price"> <div class="left1">￥{{item.itemCurPrice}}</div> </div> <p> <img :src="item.countryImgUrl" alt="" class="icon-qudaotubiao">{{item.shopName}} </p> </div> </router-link> </li> </ul> </div> </div> </scroller> </div></template><script> export default { name: ‘detail‘, data(){ return{ arr3:[], arr4:[], iscur:"", items: [], p:"", page:"", } }, mounted(){ this.p=1; this.$http.jsonp("https://h5api.zhefengle.cn/search/item_search_ext.html?biz_channel=&firstCate="+this.$route.query.first+"&limit=16&page=1&secondCate="+this.$route.query.id2) .then(function (res) { this.arr3=res.body.model.bannerIntroduce; this.arr4=res.body.model.searchList; this.page=res.body.model.totalPage; console.log(this.page); for (var i = 0; i < 16; i++) { this.items.push(res.body.model.searchList[i]); } }); }, methods:{ back:function () { window.history.go(-1) }, change:function (a,b,c,d,f,g) { this.$http.jsonp("https://h5api.zhefengle.cn/search/item_search_ext.html?activeIndex=0&biz_channel=&brandId=&discountOrder="+a+"&firstCate="+this.$route.query.first+"&keyword=&limit=16&maxPrice="+b+"&minPrice="+c+"&page=1&priceOrder="+d+"&secondCate="+this.$route.query.id2+"&sex="+f+"&shopId=&typeName=") .then(function (res) { this.iscur=g; this.arr4=res.body.model.searchList; }) }, refresh: function (done) {// var self = this// setTimeout(function () {// var start = self.top - 1// for (var i = start; i > start - 10; i--) {// self.items.splice(0, 0, i + ‘ - keep walking, be 2 with you.‘);// }// self.top = self.top - 10;// done();// }, 1500) }, infinite: function (done) { this.p++; console.log(this.p,this.page); this.$http.jsonp("https://h5api.zhefengle.cn/search/item_search_ext.html?biz_channel=&firstCate="+this.$route.query.first+"&limit=16&page="+this.p+"&secondCate="+this.$route.query.id2) .then(function (mes) { var self = this setTimeout(function () { for (var i = 1; i < 16; i++) { self.items.push(mes.body.model.searchList[i]); } done(); }, 1500) }); } } }</script><style src="../../../assets/Detail.css"></style><style> .active_btn a{ border-bottom: .1rem solid #e50039; display: inline-block; height: 2rem; color: #e50039; }.main { height: 100%; overflow: hidden; padding: 0 3rem; font-size: .7rem; font-weight: 400; text-align: center; color: #333; }</style>
记住，使用它一定要引入他！
vue框架
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。