随笔分类 - vue
摘要：this.$router.options.routes[5].children[0].children.push({ path: '/resourcesMenu/host/asibc_statistics_detail', meta: { name: '2-2', path: '/resources
阅读全文
摘要：应用场景与需求： 1.当前页面在切换tab的时候会调用不同的接口，如果来回的快速点击那么就会在后台执行大量的接口，这种时候就需要我们手动的去清除请求 2.vue路由快速切换，回继续执行上一个页面的接口，这种时候需要我们手动去清除请求 代码： let CancelToken = axios.Cance
阅读全文
摘要：第一步： npm install vue-amap --save 第二步： main.js中进行配置 第三步： 在页面中进行使用，以下提供的代码的功能包括显示点标记，提供搜索并更新点标记，地图点击后获取地址经纬度与地址。
阅读全文
摘要：{{item.progress}}
阅读全文
摘要：功能需求讲解： 在vue-cli项目中,通常会去刷新页面，一般我们比较暴力的刷新页面的方法为location. reload()，直接将整个页面进行了刷新， 这种方法虽然也达到了效果，但是用户体验却不是很好，我们要的效果只是将当前页面进行刷新。 这里推荐使用provide / inject 组合的方
阅读全文
摘要：很多人在使用vue-cli开发项目的时候，在涉及到上拉下拉加载事件的时候，很多人会使用better-scroll，出于好奇，写了个小demo来测试了一下。 安装：npm install --save better-scroll 代码如下： 这里要特别注意的是wrapper要设置高度才行，否则不会生效
阅读全文
摘要：当我们在开发vue-cli项目的时候，通常前期需要将项目的地基搭建起来，然后才是开发项目，下面是我整理的关于搭建项目的具体步骤： 一、安装一个最初始的vue-cli项目，不清楚的可以访问这个链接 http://www.cnblogs.com/qiuchuanji/p/7662314.html，这是我
阅读全文
摘要：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。 载入前/后：在beforeMoun
阅读全文
摘要：this.$router.push({path: '/shopDetails?id=' + '9527'}) this.$router.push({path: '/shopDetails?id=123', query: { id: 123 }}) this.$router.push({path: '
阅读全文
摘要：有些页面需要登录后才能访问，可以进行判断，如果需要登录就重定向 { path: '/hello', name: 'Dcoument', //不使用全局钩子函数监控路由的时候，可以对路由单个使用 beforeEnter (to,from,next) { console.log('访问这个路由时会执行'
阅读全文
摘要：使用scss详细步骤： 1.安装 npm install node-sass --save-dev npm install sass-loader --save-dev 2.webpack.base.config.js在loaders里面加上 2.在项目入口文件main.js中引入lib-flexi
阅读全文
摘要：let router = new VueRouter({ //点击浏览器的前进后退或切换导航触发 scrollBehavior(to,from,savePosition){ //to 要进入的目标路由对象要去向哪里 //离开的路由对象 从哪里来 //savePosition //记录滚动条的坐标 点
阅读全文
摘要：项目需求场景： 在开发项目过程中，在项目过于庞大，路由信息非常多的情况下，如果将路由配置信息都放在一个文件里面，那么这个JS是不方便维护的， 那么，这个时候需要我们把这个庞大的路由文件，根据项目功能分类，拆分为几个不同的路由文件。 实现步骤: 1.不管你拆分为几个，最后都是要整合到一个js文件里面的
阅读全文
摘要：创建好vue-cli后，如果想安装些开发依赖，那么打开cmd，并进入到对应的项目目录里面，使用命令下载要使用的库，下载完毕后可以在package.json中看下载的库是否存在以及版本， 然后在src下面的main.js中import引入进来，main.js是项目的入口，所有公用的方法都需要在里面引入
阅读全文
摘要：<div id="app"> <p @mouseenter="enter" @mouseleave="leave">{{ message }}</p></div> var vm = new Vue({ el: '#app', data: { message: '默认值' }, methods: {
阅读全文
摘要：思路： 1.页面布局 2.使用CSS来完成滑动特效 3.监控鼠标距离浏览器左侧的距离，滑动值达到一定范围后增加class -- swipeleft，只能左滑不能右滑 4.每次点击的时候要判断当前元素的删除按钮是否已经出现，如果是出现，再次点击当前元素或者是滑动其他元素的时候要关闭显示删除按钮的元素
阅读全文
摘要：<style> .tou{ width: 100%; height:50px; background: #f02e34; }</style> v-long-del挂载自定义事件 <div id="name" v-long-del class="tou"></div>全局自定义事件要放在vue实例前，
阅读全文
摘要：一个数组中有20条数据，控制在初始化展示的时候只显示前3条，点击加载更多按钮后显示全部的按钮
阅读全文
摘要：在vue中定义money：128<p>过滤前的金额：{{money}}</p><p>过滤后的金额：{{money | formatMoney('万')}}</p><p>全局过滤器过滤后的金额：{{money | reverseStr('元')}}</p>局部实例过滤 filters:{ format
阅读全文
摘要：组件的作用是提高代码的复用性，提高效率，在vue中使用组件可以通过如下的方法来传递参数<btn2 :a="Index" v-on:receive="changeValueHandle"></btn2> :a="Index"绑定父组件的Index到a中，然后子组件如下，通过props来接收a的参数 V
阅读全文
