进入src目录下的components建立header.vue，第一步，在App.vue中引入import header from './components/header/header';第二步，在App.vue中注册export default {components: {'v-header': header}};第三步，在App.vue中使用<v-h

项目开发后端接口如果没写好，前端调试可以使用mock.js模拟后台接口，当然数据是自定义的，后台接口写好后替换掉mock模拟的接口就行了。方法如下：第一，打开cmd进入项目下载mock至项目中：npm intsall mockjs --save-dev第二，在src目录下建立文件夹mock，mock文件夹下建立mock.js文件，js文件代码如下：import Mock from 'mockjs

官方解释是：ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：如template里使用购物车组件 <shopcartref="shopcart" ></shopcart>methods里就能使用refs来指向购物车组件的实例，比如定义在购物车组件里的dr

可能应用的场景：比如我当前是个介绍新闻资讯的页面，它的子路由是点击某条新闻跳转到的详情组件，实现思路倒很简单：主路由的新闻列表写在一个div里，并给该div一个v-if=”news”，当监测到路由处于新闻资讯的主路由就让news等于true，即显示。如果不在主路由（比如跳转去子路由详情页面）则为false，如下：router.js：{path: '/new',...

项目是vue-admin-element做的，在Safari下表格出现样式宽度错乱，这个问题这里用css样式解决：body .el-table th.gutter {display: table-cell !important;}body .el-table colgroup.gutter {display: table-cell !important;}table {...

网上搜的分页器大多是jQuery实现的，而且也不太完善，于是自己写了个分页器组件，以后再用也不慌，直接复制过去就ok，下面说说具体实现的代码和原理吧。新闻组件template：&lt;template&gt;&lt;div v-if="news"&gt;&lt;div v-for="(item, index) in newLis

读了一遍官网资料总结一下vuex的基本用法，这里介绍的是基于vue-cli开发的用法因此跟官方的写法略有不同。一，vue是什么。官方解释Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在一些应用比较复杂的单页面项目里使用vuex比较合适，因为当兄弟、父子组件数据通信、共用状态过多时这些状态会

举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示：随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图：style代码：.router-link-exact-active{color: #8fc526!impo...

vue组件里操作dom以及dom上的数据变化很频繁，this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来，如下例子：在methods定义一个方法，这个方法来定义BScroll滚动轴插件可以点击，并且监听滚动轴位置：_initScroll () {this.menuScroll = new BScroll(this.$refs.m