随笔分类 - Vue
摘要：vue中使用promise.all发送多个请求1.创建两个promise,在promise中使用axios2.调用Promise.all([p1,p2]).then(res=>{}).catch(err=>{})方法 Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个
阅读全文
摘要：最近在做vue项目时，需要引入一个第三方的js文件，在index.html中通过以下方式引入JS文件编译后，就报了这个问题。 根据广大的网页的思路，导致这一现象的原因可能有以下几种： 原因一.引用文件的位置不正确 js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言
阅读全文
摘要：vue 路由如何回退指定页面： 一般页面跳转记录 a => b，想从 b 退回 a this.$router.go(-1) 如果页面跳转记录 a => b => c，想从 c 一步退回 a this.$router.go(-2) 如果页面跳转记录 a => b => c => b，页面的堆栈记录为
阅读全文
摘要：vue-router中的路由钩子函数基本用法 路由钩子函数分为三种类型如下： 第一种：全局钩子函数。 router.beforeEach((to, from, next) => { console.log('beforeEach') //next() //如果要跳转的话，一定要写上next() //
阅读全文
摘要：1、通过keep-alive和router-view实现路由缓存，具体代码如下：在app.vue： <router-view v-if="!$route.meta.keepAlive"/> <keep-alive> <router-view v-if="$route.meta.keepAlive"/
阅读全文
摘要：vee-validate使用方法 *本文适合有一定Vue2.0基础的朋友参考，根据项目的实际情况来使用，关于Vue的使用不做多余解释。 一、安装 npm install vee-validate@next --save 注意：@next,不然是Vue1.0版本 bower install vee-v
阅读全文
摘要：移动端vue配置 REM 适配 Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem amfe-flexible 用于设置 rem 基准值 一、使用 amfe-flexible
阅读全文
摘要：vue2.0 给data对象新增属性，并触发视图更新如下代码，给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新 moun
阅读全文
摘要：在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' },
阅读全文
摘要：// 处理路由拦截器 导航守卫 import router from '../router' import progresss from 'nprogress' import 'nprogress/nprogress.css' // 全局前置守卫 当 路由发生变化时 这个方法里的回调函数就会执行 r
阅读全文
摘要：import Vue from 'vue' import Vuex from 'vuex' import { setItem, getItem } from '@/utils/storage' import decodeJwt from 'jwt-decode' Vue.use(Vuex) expo
阅读全文
摘要：/** * 封装 axios 请求模块 */ import axios from 'axios' import jsonBig from 'json-bigint' import store from '@/store' import router from '@/router' import {
阅读全文
摘要：/** * 封装自定义 dayjs 日期处理模块 */ import dayjs from 'dayjs' import rTime from 'dayjs/plugin/relativeTime' import 'dayjs/locale/zh-cn' // 全局使用中文 dayjs.locale
阅读全文
摘要：路由传参 Vue-router路由传参主要有两种： 1、查询参数 使用对象{name:'path', query:{id:'213', data:'我是参数数据'}} 2、路由参数 使用对象{name:'path', params:{foo:'bar'}}，使用路由传参，需要在router路由配置的
阅读全文
摘要：首先你要熟悉vue-cli2.0 1.项目目录结构 可以明显的看出来，vue-cli2.0与3.0在目录结构方面，有明显的不同（vue3.0我是安装了css预处理器，所以看上去内容更丰富哈） vue-cli3.0移除了配置文件目录，config 和 build 文件夹 同时移除了 static 静态
阅读全文
摘要：vnode的diff算法原理 虚拟dom是对真实dom的一种映射，新旧Vnode比较同层级的节点，然后根据两者的差异只更新有差异的部分，生成新的视图，而不是对树进行逐层搜素遍历，因此时间复杂度是O(n)。虚拟dom可以减少页面的回流和重绘，提升性能
阅读全文
摘要：1.beforeCreate 初始化界面前 2.created 初始化界面后，拿到data，props，methods、computed和watch 3.beforeMount 渲染dom前 4.mounted 渲染dom后，拿到$el 5.beforeUpdate 更新前 6.updated 更新
阅读全文
摘要：hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中
阅读全文
摘要：vue中scoped的作用: 实现组件的私有化, 当前style属性只属于当前模块. 但是当我们使用公共组件的时候会造成很多困难. scoped的实现原理: 在DOM结构中可以发现,vue通过在DOM结构以及css样式上加了唯一标记,达到样式私有化,不污染全局的作用, 可以看出,加上scoped后的
阅读全文
摘要：key 预期：number | string key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变
阅读全文
