搜索词>>Vue导航 耗时0.0030
  • Vue.js底部导航三种写法

    普通写法​vantUI 使用字体图标和文字<template>l; <van-tabbar v-model="active" active-color="#07c160">l; <van-tabbar-item :to="{普通写法​vantUI 使用字体图标和文字<template> <van-tabbar v-model="active" active-color="#07c160"> <van-tabbar-item :to="{name:'home'}"> <span>首页</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.homeActive : icon.homeNormal" > </van-tabbar-item> <van-tabbar-item :to="{name:'money'}"> <span>钱包</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.moneyActive : icon.moneyNormal" > </van-tabbar-item> <van-tabbar-item :to="{name:'user'}"> <span>个人中心</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.userActive : icon.userNormal" > </van-tabbar-item> </van-tabbar> </template> <script> export default { data() { return { active: 0, icon:{ homeNormal: require('./home.png'), homeActive: require('./homeActive.png'), moneyNormal: require('./money.png'), moneyActive: require('./moneyActive.png'), userNormal: require('./user.png'), userActive: require('./userActive.png'), }, } } } </script>手写 适用于背景图等复杂样式<template> <div class="footer"> <div class="foot"> <router-link v-for="(item,i) in footnavs" :key="i" :to="item.to" :class="{'selected':($route.meta.nav_index==item.nav_index)}" > <img :src="$route.meta.nav_index==item.nav_index?item.selected:item.no_selected" alt> <span v-show="!($route.meta.nav_index==item.nav_index)">{{item.name}}</span> </router-link> </div> </div> </template> <script> export default { data() { return { footnavs: [ { to: "/", name: "首页", no_selected: require("@img/home/shouye@2x.png"), selected: require("@img/home/shouye2@2x.png"), nav_index: 1 }, { to: "/money", name: "钱包", no_selected: require("@img/home/qianbao@2x.png"), selected: require("@img/home/qianbao2@2x.png"), nav_index: 2 }, { to: "/my", name: "个人中心", no_selected: require("@img/home/gerenhzongxin@2x.png"), selected: require("@img/home/gerenzhongxin@2x.png"), nav_index: 3 } ] }; } }; </script> <style lang="less" scoped> .footer { width: 100%; height: 98px; margin-top: 12px; .foot { width: 100%; position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 10px 20px; background: rgba(255, 255, 255, 1); box-shadow: 0px 1px 16px 0px rgba(192, 192, 192, 0.4); a { width: 33%; text-align: center; display: flex; flex-direction: column; justify-content: space-around; align-items: center; img { width: 47px; height: 47px; } span { font-size: 28px; color: rgba(102, 102, 102, 1); } &.selected { img { width: 85px; height: 85px; } } } } } </style>路由文件import Vue from 'vue' import Router from 'vue-router' import home from '@/pages/home/home' import noticeList from '@/pages/home/noticeList' import money from '@/pages/money/money' import my from '@/pages/my/my' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'home', component: home, meta: { index: 0, hasFooter: true, nav_index: 1 }, }, { path: '/money', name: 'money', component: money, meta: { index: 0, hasFooter: true, nav_index: 2 }, }, { path: '/my', name: 'my', component: my, meta: { index: 0, hasFooter: true, nav_index: 3 }, }, { path: '/noticeList', name: 'noticeList', component: noticeList, meta: { index: 1, hasBar: true, }, }, ], //该方法用于控制滚动行为, scrollBehavior(to, form, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } })app.vue文件<template> <div id="app"> <tabBar v-show="$route.meta.hasBar"/> <transition :name="transitionName"> <router-view/> </transition> <Footer v-show="$route.meta.hasFooter"/> </div> </template> <script> import "./common/css/common.css"; // bug:不能为小写footer会报错 import Footer from "@/components/footer"; import tabBar from "@/components/tabBar"; export default { name: "App", data() { return { transitionName: "" }; }, components: { Footer, tabBar }, mounted() {}, watch: { /* * 使用watch 监听$router的变化 * 如果to索引大于from索引,判断为前进状态,反之则为后退状态 * 设置动画名称 */ $route(to, from) { if (to.meta.index == from.meta.index) { this.transitionName = ""; } else if (to.meta.index > from.meta.index) { this.transitionName = "slide-left"; } else { this.transitionName = "slide-right"; } } } }; </script>​​​​​​​
  • Vue中main.js App.vue index.html之间关系

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页,项目入口App.vue---根组件ma在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页,项目入口App.vue---根组件main.js---入口文件那么这几个文件之间的联系如何呢?1.先看index.html中的内容:(为了很好的识别各个文件,我对各文件内容进行了文字标记)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-start|来自index.html的标题</title> </head> <body> <div id="app"> 来自index.html的内容 </div> <!-- built files will be auto injected --> </body> </html> 2.在App.vue中,我做了如下处理:<template> <div id="app"> <img src="./assets/logo.png"> <div>来自App.vue的内容</div> <!--<router-view/>--> </div> </template> <script> export default { name: 'App' } </script> <style> #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; } </style> 3.在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 App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })  接下来运行这个项目,观察显示网页效果如下: ​也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分)那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,而index.html中 <div id="app"> 来自index.html的内容 </div>上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上; main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过new Vue({ el: '#app', router, components: { App }, template: '<App/>' })告诉该实例要挂载的地方;(即实例装载到index.html中的位置)接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢? import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })这个局部组件是当前目录下的App.vue;模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容) 所以Vue这个实例就是展示的是App.vue这个组件的内容。 总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。而index.html中的Title部分不会被取代,所以会一直保留。
  • vue-router 中 routers 定义写法

    vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 router的index.jsimport Vue from 'vue' import Router from 'vue-router' //首页vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 router的index.jsimport Vue from 'vue' import Router from 'vue-router' //首页 //import index from '@/components/index' //产品中心 import productCenter from '@/components/productCenter/productCenter.vue' //商务合作 import teamwork from '@/components/teamwork/teamwork.vue' //咨询中心 import askCenter from '@/components/askCenter/askCenter.vue' //关于中棋 import aboutUs from '@/components/aboutUs/aboutUs.vue' Vue.use(Router) export default new Router({ routes: [ //首页 { path: '/', name: 'index', component:resolve =>require(['index'],resolve) } //产品中心 ,{ path: '/productCenter', name: 'productCenter', component: productCenter } //商务合作 ,{ path: '/teamwork', name: 'teamwork', component: teamwork } //咨询中心 ,{ path: '/askCenter', name: 'askCenter', component: askCenter } //关于我们 ,{ path: '/aboutUs', name: 'aboutUs', component: aboutUs } ] }) 重点说明:提示:import 引入时用到的“@”就相当于“..”;我们看到index页面是用的require的方式写的路由,所以上面的import就注释掉了,这种写法的好处,不仅仅是简单,还有这样写是按需加载,访问此路由时才加载这个js,会避免进入首页时加载内容过多,因为import引入,当项目打包时路由里的所有component都会打包在一个js中,而用require会将你的component分别打包成不同的js。最后总结:推荐使用require 方式编写routers,按需加载节约资源。 图像 小部件
  • Bootstrap 的导航菜单navba的高度修改

    Bootstrap 的导航菜单navba的高度修改Bootstrap 的导航菜单navba的高度修改,需要重写以下几个属性的高度,不推荐修改源文件,自己写一个名字一样的覆盖 <pre> <code class="language-css">.navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .navbar-brand { height: 40px; padding-top: 10px; } .navbar { min-height: 40px; } .navbar-toggle { margin-top: 4px; margin-bottom: 4px; }</code></pre>
  • Vue v-if判断数组长度

    Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataList).length == 0"  >l;</li>l;Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataList).length == 0"  ></li>
  • Vue 2.0项目配置CDN服务解决加载慢问题

    vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body>l;     <div id="app">l;</div>l;       <script srvue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body>     <div id="app"></div>       <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>     <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>     <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>步骤二 添加配置在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,如下:module.exports = {   entry: {     app: './src/main.js'   },   externals:{     'vue': 'Vue',     'vue-router': 'VueRouter',     'vuex':'Vuex'   }  【注意】 externals的key:value不要随便修改,暂时理解为 key是npm安装使用的名称,value为组件对外提供的名称不可随意更改(打开组件源码可见)步骤三 去掉原有的引用1.main.js  文件中注释掉vue // import Vue from 'vue'2.router--> index.js  文件中注释掉 vue和 vue-router:// import Vue from 'vue' // import VueRouter from 'vue-router'3.修改名vue 使用路由配置为以下Vue.use(VueRouter)
  • Vue 登录后返回上一页完美解决办法

    Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//返回上一页 } } //...省略注意Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//返回上一页 } } //...省略注意:前提是使用了Vue 的route组件
  • webstorm中vue项目不能用ip访问解决

    在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来。​默认方式运行  我们在浏览器里输入localhost:8080就可以访问该项目了。但是要是手机想访问的话,就得通过ip地址,但当我输入ip地址进行访问时,却发现不行。于是我找项目的配置文件,发现config/index.js,有个host的配置项,默认值为“localhost”,我把localhost改成ip地址,重启,发现可以访问,但localhost:8080这个地址就没办法访问了。​index.js修改本着一点强迫症,在网上百度的基础与向dalao请教的基础之上,找到了有个解决办法。既能通过ip地址访问,也能通过localhost访问。方法1.将index.js中的host的值改为‘0.0.0.0’方法2.修改package.json中script下dev的值,在后面加入--host 0.0.0.0 也可以解决​package.json修改  
  • Vue 全局变量防刷新优雅实现

    1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     return window.localStorage.toke1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     return window.localStorage.token;   },  setToken(token) {   window.localStorage.token = token;  },  getInfo() {   if (window.localStorage.info)     return JSON.parse(window.localStorage.info);   return null; },  setinfo(user) {   window.localStorage.info = JSON.stringify(user); } }上面代码分别实现了对象和字符串的存储,由于基于localStorage所以需要H5浏览器支持。2 vue项目main.js配置  import global from './global'; Vue.prototype.global = global; 其他你的代码3 vue全局变量使用  let _self=null; export default {     name: "demo-vue",     created:function(){      _self=this;    },     data() {     },     methods: {          test(){              var token=_self.global.getToken();              console.log(token)          }     }   };遗留一个小问题,localStorage必须手动清除,否则永久存放,也可以试试sessionStorage。如果你有更好的方法,欢迎告知。感谢。
  • vue watch监控对象属性变化

    vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } },或者下面写法watch:{ 'objvue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } },或者下面写法watch:{ 'object.attr'(value){ //处理操作 } },