jieweiwujie的博客

原创 keep-alive缓存组件使用(2)介绍：vue路由-路由缓存的几种方式--路由不变的情况下，刷新页面

在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。下面就简单介绍几种 vue 路由缓存的几种方式。1、全部缓存<keep-alive> <router-view></router-view></keep-alive>直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了2、缓存单个指定路由<keep-alive include="该路由的nam.

原创 webpack9：处理图片文件--分离图片-图片生成在文件夹中

原创 webpack8：清除dist文件夹东西

原创 webpack7：处理图片文件--分离图片

原创 webpack6：处理less文件--分离less

不用const定义引入

原创 webpack5：处理css文件--分离css

使用demo：

原创 webpack4：处理css文件

原创 webpack3：html-webpack-plugin 实现自动修改引入文件名

原创 webpack2：实现各行变色，jq

原创 webpack1：概述

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的setter , getter，在数据变动时发布消息给订阅者，触发相应的监听回调。当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty把这些 property 全部转为getter/setter。Object.defineProperty...

原创 vue组件-- 页面加载进度条组件

<template><transition name="fade"><div class="progress-bar" v-if="isShow"></div></transition></template><script type="text/babel">export default {data() { return { isShow: true, // 是否显示进度条 val: 0, //.

原创 vue--页面加载闪烁出现{{message}}闪退问题的解决方法

方法一v-if 和 v-show 的区别v-if只会在满足条件时才会编译，而v-show不管是否满足条件始终会编译，v-show的显示与隐藏只是简单的切换CSS的display属性。也就是说，在使用v-if时，若值为false，那么页面将不会有这个html标签生成。而v-show：不论其值是false还是true，html元素都会存在，只是简单的切换css的display属性。使用场景一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-s...

原创 vue-this.$forceUpdate()会更新视图和数据，触发updated生命周期。

vue页面中通过v-for进行数据渲染，如果层次太多，有时候数据发生改变但是页面上看到的效果是毫无变化。render函数没有自动更新，可以通过this.$forceUpdate()手动刷新.调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。...

原创 【element】表格自适应-页面elementResizeDetector获取

解决方案 第一步：通过npm install element-resize-detector获取elementResizeDetectorMaker npm install element-resize-detector 第二步：将依赖引入import elementResizeDetectorMaker from ‘element-resize-detector’ import ElementResizeDetectorMaker from "element-res.

原创 面试点：Vue-MVVM模式解析

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。当创建了ViewModel后，双向绑定是如何达成的呢？首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变.

原创 面试点：promise用法

<template> <div class="home"> promise </div></template><script>export default { data(){ return { showEdit:false, time:"" } }, created() { this.getValue1() .then((res)=>{ .

原创 面试点：内存泄露

内存泄露是指一块被分配的内存 既不能被回收也不能被利用的尴尬 那造成内存泄露的常见情况 1 事件委托的原理---委托他们的父级代为执行事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事...

原创 javascript ：事件委托（事件代理）事件冒泡

当事件发生在DOM元素上时，该事件不完全发生在那个元素上。在捕获阶段，事件从window开始，一直到触发事件的元素。

原创 【面试点】：vue中关于this的详解

<template> <div class="home"> 1.window的匿名函数 如settimeout（没有箭头）指向是window；函数里面调用要用that变量接一下，才能拿到vue实例，不然指向window 2.js函数 如foreach ，filter（没有箭头）没有指向，所有函数里面调用，直接指向vue，不用做变量替换 3.箭头函数，没有具体的this指向，在它内部使用，由宿主对象决定 3.1匿名函数使用箭头函数写，指向方法的.

原创 es6 - async await应用

methods: { async getList(){ await this.onAdd(); this.onEdit();//会等到上面的函数执行完才执行下面的函数 }, onAdd(){ this.showEdit = true }, onEdit(){ this.showEdit = true }, },

原创 axios在vue中的使用-axios请求DEMO

1.方法封装api.jsconst CONTACT_API = { // 获取联系人列表 getContactList:{ method:'get', url:'/contactList' }, // 新建联系人 form-data newContactForm:{ method:'post', url:'/contact/new/form' }, // 新建联系人 applicat

原创 axios在vue中的使用-axios取消请求

created() { let source = axios.CancelToken.source() axios.get('/data.json',{ cancelToken:source.token }).then(res=>{ console.log(res) }).catch(err=>{ console.log(err) }) // 取消请求(message可选) source..

原创 axios在vue中的使用-axios的错误统一处理

<template> <div class="home"> </div></template><script>// 错误处理：请求错误时进行的处理import axios from 'axios'export default { name: 'axios3-4', created() { axios.interceptors.request.use(config=>{ return con.

原创 axios在vue中的使用-axios的拦截器

<template><div class="home"></div></template><script>// 拦截器：在请求或响应被处理前拦截它们// 请求拦截器，响应拦截器import axios from 'axios'export default { name: 'axios3-3', created() { // 请求拦截器 axios.interceptors.request.use.

原创 axios在vue中的使用-axios参数配置

axios.create({ baseURL:'http://localhost:8080', // 请求的域名，基本地址 timeout:1000, // 请求超时时长（ms） url:'/data.json', //请求路径 method:'get,post,put,patch,delete', // 请求方法 headers:{ token:'' }, // 请求头 ..

原创 axios在vue中的使用-并发请求all(),spread（）

export default { name: 'axios2-3', created() { // axios.all() axios.spread() //并发请求：同时进行多个请求，并统一处理返回值 axios.all( [ axios.get('/data.json'), axios.get('/city.json') ] ).then( axios.spread(.

原创 axios在vue中的使用-axios的特性

axios的特性：1.支持Promise API2.拦截请求和响应3.转换请求数据和响应数据4.取消请求 5.自动转换json数据 6.客户端支持防御XSRF攻击

转载 vue组件间通信六种方式（完整版）

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent/$children、$attrs/$listeners和..

原创 reduce 数组求和num.reduce((total,num) =＞ total += num, 0)；

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)var num = [1,2,3,4,5];var res = num.reduce(function(total,num){ return total+num;},0);console.log(res)；//15//num.reduce((total,num) => total += num, 0);//没有初始值

原创 金额处理函数，千分位,

1.金额，函数function format(v) { const reg = /\d{1,3}(?=(\d{3})+$)/g //g表示匹配全局 //?=(\d{3})+$ 后面没有三个数字时候，匹配2个数字 //'$&,'后面拿到$&添加, return `${v}`.replace(reg, '$&,')}

原创 vue：知识点3 混入mixin（2）混合应用策略

mixins混合应用策略

原创 【通信】provide和inject传值使用

data() { return { reportData: null, wordCloud: null, mapData: null } }, methods: { getReportData() { return this.reportData }, getWordCloud() { return this.wordCloud }, ..

原创 axios接口封装

import axios from 'axios'const service = axios.create({ baseURL: 'https://apis.imooc.com', timeout: 5000})//响应service.interceptors.response.use( response => { if (response.status === 200 && response.data) { console.log(resp.

原创 eslint报错时解决

原创 【css】:class，:style数组写法和对象写法

:class，:style数组写法和对象写法

原创 echart环形图

echart饼图 this.categoryOptions = { title: [{ text: `${this.radioSelect}分布`, textStyle: { fontSize: 14, color: '#666' }, left: 20, top: 20 }, .

原创 echart-线段百分比柱状图设计

原创 echart-柱状图设计

1柱状图成品2开始3

原创 echart曲面积图

1引入2.使用折线图3成散点图4去掉xy轴5面积颜色6平滑曲线7

原创 mui的点击事件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script...