随笔分类 - Vue
摘要：公司最近项目是后台管理系统，由我负责，网上找模板发现还需要改很多地方，而且那些模板也没有写代码的实现思路，对于vue项目经验不足者很难看懂，所以就按照自己的思路从零实现一遍，过程讲解还是比较详细的，若是有不足之处还请指正。 整体布局： 登录： 菜单： 准备工作： 1、安装elementui npm
阅读全文
摘要：目录： 配置： const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={
阅读全文
摘要：先来回顾一下Vue2.x的响应式规则： 对象：会递归得去循环vue得每一个属性，（这也是浪费性能的地方）会给每个属性增加getter和setter，当属性发生变化的时候会更新视图。 数组：重写了数组的方法，当调用数组方法时会触发更新，也会对数组中的每一项进行监控。 缺点：对象只监控自带的属性，新增的
阅读全文
摘要：计算属性 特点： 默认不执行，等用户取值的时候再去执行，会缓存取值结果， 如果依赖的值发生了变化 会更新dirty的属性，再次取值时，可以重新求值 import {pushTarget,popTarget} from './dep' import { utils } from '../utils'
阅读全文
摘要：watch方法 也叫用户Watcher，是通过new Watcher产生的一个实例。 new Watcher的时候会执行get方法，get方法会将当前用户Wathcer放入Dep.target中，然后执行getter方法，去实例上取值，取值就会调用get方法，进行依赖收集，当值发生变化了就调用wat
阅读全文
摘要：假设页面有四个地方需要更新属性，那我们希望不要更新四次，而是一次性更新。 防止不停的更新 把需要更新的watcher先存起来 放进一个异步队列 把重复的watcher过滤掉 等待这轮更新完就清空队列 就是说等待主执行栈执行完了就执行异步任务，也可以理解为页面所有属性都赋值完再执行这个异步方法 /**
阅读全文
摘要：首先明确为什么药依赖收集？是为了当数据的属性发生了更改之后可以通知那些曾经使用了数据的地方。 对象依赖收集的过程：初始化的时候，会给每一个数据定义响应式，同时会给每一个属性一个new Dep()，每一个dep 有一个 唯一标识id，这个Dep就是用来收集依赖的， 然后当页面取值的时候会调用get方法
阅读全文
摘要：正常我们给组件注册事件是先在子组件的里面监听事件，然后通过$emit向外层触发给父组件，然后再在父组件中接收事件，这样做有点啰嗦，vue提供了 .native修饰符，我们可以直接在父组件通过 .native修饰符来给子组件注册事件，如下：
阅读全文
摘要：此方法是vue cli3 以上的版本 新建一个文件vue.config.js 然后在里面添加这段代码 module.exports = { configureWebpack: { resolve: { alias: { //配置别名,修改后需要重新编译才能生效 'assets': '@/assets
阅读全文
摘要：这里配置的是vue-cli3.0引入jquery的方法，不是vue-cli2.0的配置方法 一、安装jquery npm install jquery --save 二、在vue.config.js 文件中配置 在文件的头部位置加上const webpack = require('webpack')
阅读全文
摘要：在vue中绘制地图需要加载一个本地china.json文件，我用的是get请求的方法加载的，而不是直接import，因为我怕import请求到的部署到线上的时候会有问题。如下是get请求方法： this.$http.get(zhongguo).then(res => { console.log(re
阅读全文
摘要：首先明确一点，在vue cli3以上的版本中，存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下，但是项目中没有这个文件夹，我就自己创建了一个，结果请求的时候总是报错404 这个路径看似没毛病啊，于是我就搜资料 发现在vue cli3中静态资源是需要放
阅读全文
摘要：很多时候我们需要在发送请求和响应数据的时候做一些页面处理，比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header，或者在请求到数据之前页面显示loading等等，还有在响应到数据的之后做一些判断，例如服务器返回401登录状态失效，需要重新登录的时候，跳转到登录页，
阅读全文
摘要：一、axios的功能特点 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求方式: axios(config) axios.request(config) axios.get(
阅读全文
摘要：vue 项目中使用水波球报错Component series.liquidFill not exists. Load it first. 解决办法：安装 echarts-liquidfill npm install echarts-liquidfill --save 组件中引入： import ec
阅读全文
摘要：解决办法：在当前单组件中在引用一次
阅读全文
摘要：https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径，像下面这这种就会报错 backgroundImage: "url("../../assets/img/bac.jpg")"
阅读全文
摘要：第一步、npm install echarts 第二部、在main.js中引入 第三步、创建组件，并且用this.$echarts.init初始化echarts <template> <div class="chinaecharts"> <div id="mapChart" ref="mapChar
阅读全文
摘要：<template> <div class="chinaecharts"> <div id="mapChart" ref="mapChart" ></div> </div> </template> <script> export default { name: 'ChinaEcharts', met
阅读全文
摘要：一、params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的形式传给目标页面 通过$route的方式拿到参数 二、query的类型 配置路由格式: /route
阅读全文