Gordon-Liu-CSDN博客

原创项目中接口的配置，request.js中的总接口配置以及api内的文件配置等

首先要安装axiosnpm install axios --savepc端的配置（以往的项目，较复杂）import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'let host = "";if (process.env.NODE_ENV === 'development'

2021-03-07 17:40:31 980 1

原创将数组内所有对象，转换为嵌套数组并分类

原本的数据格式let data = [ { a: 'TRANS2021020818545106990', b: '02-08', c: '0.01', d: 1 }, { a: 'TRANS2021020805253108555', b: '02-08', c: '0.01', d: 0 }, { a: 'TRANS2021020805325003626', b: '02-07', c: '0.01', d: 0 }, { a: 'TRANS2021020818545106982', b: '02

2021-03-07 17:25:14 790

原创 Excel表格导入导出数据

Excel表格导入导出将表格数据导出到Excel表格中 <script> import axios from 'axios'; export default { name: "me", methods:{ submitDownload() { axios({ headers: { 'Content-Type': 'application/json' }, t

2021-02-10 21:11:26 234

原创 VUE中搜索栏输入字符，实时更新输出的数据

VUE中搜索栏输入字符，实时更新输出的数据<template> <div>  <form action="/"> <van-search v-model="value" show-action placeholder="请输入搜索关键词" /> </form>

2020-10-24 15:24:32 1082

原创下拉列表加载组件数据（利用vant的UI框架）

上面标签部分下面数据部分代码详情<template> <div class="nowplaying">  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <F

2020-10-24 11:28:44 759

原创点击详情页切换到不同的详情页面

先创建一个一级路由的目录在路由内进行配置详情页的一级路由传输动态id点击电影跳转详情页详情页内接受动态id后进行数据请求

2020-10-24 09:57:05 837

原创数组常用去重的五种方式，简单易理解（最后有12中去重的链接详情）

1、利用new Set（）直接去重最简单的方法，但不能去除空对象（ES6常用）2、双for循环去重当第二个循环的等于第一个循环的，将第二个元素splice（i，1）去除 i–（ES5常用）3、利用indexOf查询去重建立空数组，原数组循环，当空数组内查不到原数组的值时，将其push到新数组 if(newArr.indexOf(arr[i]) === -1）4、利用includes查询去重，与上面方法类似，将式子改为 if(！newArr.includes(arr[i])），然后pus

2020-10-24 09:26:12 2124

原创 keep-alive缓存的数据无法在页面刷新问题，Vue中浏览器全局刷新

问题：vuex数据更新了但页面的数据没有更新，页面的组件是用keep-alive包裹进行缓存的，如何解决组件更新问题简述解决方案：在一级路由下有四个二级路由利用keep-alive将四个组件包裹，进行缓存在城市组件中，添加点击城市的事件点击后判断是否更改了城市，如果更改了就修改vuex的数据，跳转页面，指定浏览器刷新若没有更新就直接跳回页面一级路由中的keep-alivecity组件vuex里面的数据设置浏览器页面：这篇博客完善了之前的城市渲染，解决了keep-alive的bu

2020-10-23 21:16:01 956

原创最全数组方法，最简单易懂，数组方法大全

常用数组：pop：原数组变，返回删除的元素push：原素组变shift：原数组变，返回删除的元素unshift：原素组变slice：返回新数组，截取索引开始，结束splice：原数组变，返回截取的新数组，截取索引开始，长度，截取位插入值reverse：原数组改变颠倒位置sort：原数组改变大小排序join：数组变为字符串（可加分隔符）concat：返回拼接的新数组ES5新增：indexOf（）字符串、数组统用，返回指定字符首次出现的位置（索引值），返回这个索引值，否则返回-1for

2020-10-22 23:14:49 6439 1

原创时间戳的简单用法

安装时间戳插件yarn add monent新建一个文件filter.js第一参数命名，第二参数传入的值（一串数字应为 13位）进行设置import Vue from 'vue';import moment from 'moment';//星期、年月日时间过滤器moment.locale('zh-cn'); //设置本地中文Vue.filter("timeFilter",time=>{ return moment(time*1000).format("ddd YYY

2020-10-22 22:57:37 774

原创城市选择数据渲染

要求：点击右边索引栏时，会自动跳转到对应的索引位置大体解决方案：利用vantUI框架引入indexBar索引栏利用axios拿到后台城市数据，定义两个数据，一个为右边索引栏的字母数组（大写），一个为索引和城市的对象数组先将右侧索引栏字母定义出来，遍历数据的拼音，取出首字母，排序，转大写再定义第二个数组，做一个双for循环，先循环索引的字母，将字母以对象的形式插入到空数组中，再循环数据中拼音的首字母大写，若找出数据中的首字母大写与索引的字母一样的话就进行插入，以对象的形式插入到刚刚的数组中，最后用

2020-10-22 16:54:17 590

原创 webpack.config.js中的css样式、sass、打包抽离，浏览器加前缀（兼容），图片文件处理，ES6处理

1.安装css和style插件yarn add style-loader css-loaderindex.cssbody{ background:skyblue;}将样式引入js文件//引入样式require('./index.css')console.log(2+2)在webpack.config.js中配置文件module.exports内添加： module: { rules: [ { test: /

2020-10-21 22:21:18 456

原创 webpack安装及webpack.config.js与package内部的配置

webpack安装：全局安装先全局安装：npm install webpack -g有可能安装不成功，就用管理员身份进行安装在继续全局安装：npm install webpack-cli -g有可能会出现一坨不认识的选Y项目文件夹内安装全局完后在项目文件夹内安装：初始化yarn init 安装webpack和webpack脚手架yarn add webpack webpack-cli 查看版本npm view webpack versions yarn add we

2020-10-21 17:53:48 389

原创深拷贝、浅拷贝简单理解（适合初学者）

浅拷贝：可以将对象的最外层属性全部复制，里面属性仍然是引用关系以下两种方式都为浅复制只能将最外层拷贝过去，然后原对象更改数据时，新对象数据不会变，而对原对象内部的对象进行数据更改时，新对象数据就会变深拷贝（比较浅的深拷贝）对于这样简单的深拷贝可以用这种方法将所有数据拷贝后，对原对象进行数据更改时，新对象的数据不会进行更改但是这样的就不好用了后来给原对象添加的数据，在新对象内不显示（拷贝的不彻底，没有全部拷贝下来）仅获取可遍历的属性，不可遍历的属性获取不到（属性：h）深拷贝（所有属性

2020-10-17 20:42:53 243

原创 Vue脚手架的安装及项目的创建

Vue脚手架创建项目1.安装node.js1）在node.js官网正常下载安装node.js下载地址：node.js中文官网 http://nodejs.cn/download/2）安装成功后打开命令行工具查看node版本①打开"运行"对话框(Win+R)，输入cmd，打开命令行工具②输入命令行 node -v ，出现版本号说明安装成功2.安装cnpm在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器

2020-10-14 20:26:40 295

原创 Vue中Router的使用方法以及各个步骤配置

router文件夹内的index.js是主文件夹，必须建一个index.js下载安装Router组件npm install vue-router 或cnpm install vue-router -S 或yarn add vue-router配置路由：1、引入vue和vue-routerimport Vue from 'vue'import Router from 'vue-router'2、安装使用routerVue.use(Router);3、实例化路由（必须是routes）

2020-10-01 21:42:54 1075

原创 vue面试题及一些js

axios是什么？axios、fetch、ajax的区别Vuex是什么、流程、作用、核心属性、数据持久化Vue中的通讯方式（3种）Vue中的双向数据绑定、数据驱动的底层原理Vue中Key的作用Vue中的生命周期钩子函数（8个）及执行顺序及解释自定义指令钩子函数（5个）及内部参数Computed和Watch的区别Vue中路由守卫（全局、局部、组件内部）什么是Keep-alive、作用、两个生命周期解释Vue和Jquery的区别Vue-..

2020-09-30 17:57:05 158

原创什么是API、computed和watch的区别及各个原理

什么是API（通俗易懂）官方回答：API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。简单通俗点来说：举个例子：打开一个文件，将文件保存在硬盘上，要经过非常复杂的处理才能显示，这看似简单的操作其实在底层是非常复杂的打开文件首先要扫面硬盘，找到文件的位置，然后从文件中读取一部分的数据，将数据放进I/O缓冲区，放进内存，这些数据

2020-09-29 22:18:58 996

原创 SSR（服务端与客户端渲染）、NUXT.js（介绍安装、配置、路由、视图、异步数据与反向代理解决跨域、vuex状态树）（九）

nuxt一. SSR什么是服务端渲染？核心在于方便seo优化后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。例如：http://www.cnblogs.com/cate/design什么是客户端渲染？分担到客户端数据由浏览器通过ajax动态获得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程就叫做客户端渲染。例如：https://m.maizuo.com/v5/#/films/nowPlaying服务端

2020-09-29 15:06:55 839

原创 Promise是什么、position：sticky特点及用法、async和await是什么、10种以上IE兼容写法

Promise是异步编程的一种解决方案，其实是一个构造函数两个特点：1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变2、Promise对象的状态改变，只有两种可能：从pending（进行中）变为fulfilled（已成功）和从pe

2020-09-29 09:21:43 714

原创 ref属性、类组件定义ref的三种方式、函数式组件定义ref的方式、数据承载-Props/State：定义类组件 / 函数式组件状态、super原理、受控与非受控组件、小案例（三）

ref属性React提供的这个ref属性，表示对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例。ref可以挂载到组件上也可以是dom元素上。挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例：挂载到dom元素上时表示具体的dom元素节点。Refs and the DOM类组件ref的字符串方式如果你目前还在使用 this.refs.textInput 这种方式访问 refs ，建议用回调函数或

2020-09-28 21:28:12 2554

原创 style用法、封装数组遍历、改变数据再次生成真实dom、函数式组件与类组件、对象的处理、简单案例（二）

React的style用法给jsx代码中添加样式，需要将class（保留字） ==> className形式！给jsx代码中添加内联样式，style={ {} } <style> .red{ color:red } </style></head><body> <div id="app"></div> <script type="t

2020-09-27 21:54:08 255

原创 React起源、特点、高性能原理、React与Vue区别、React Fiber协调算法、构建React简易环境、JSX语法糖、React表达式、事件、数组遍历（一）

React起源React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。React的特点1、声明式以声明式编写 UI，可以让你的代码更加可靠，且方便调试。2、组件化创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。3、一次学习，随处编写无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特

2020-09-27 16:05:02 438

原创 es6新增数组、数组去重、es6新特性

ES6新增的数组方法1.forEachforEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.2.mapmap()的主要作用, 其实是创建一个新的数组, map()的参数和forEach()是一样的map()和forEach()有什么区别?, 使用map()遍历数组, 可以返回一个新数组, 并且不会改变原数组里的内容3.filterf

2020-09-23 09:06:06 990

原创 vuex作用、vuex执行流程、核心属性、使用vuex流程、项目结构、辅助函数、数据持久化（八）

VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：问题一：传参、组件通信的方法对于多层嵌套的组件来说非常繁琐，而且对于兄弟组件间的状态传递也无能为力问题二：我

2020-09-23 09:04:55 566

原创 router-view、声明式（router-link）和编程式导航、代码提示片段、路由懒加载、多极路由、命名路由、动态路由匹配（：id）、路由模式、路由守卫、$route和$router区别（七）

vue-router在的应用都流行SPA应用（single page application）传统的项目大多数用的是多页结构，当进行页面跳转的时候，会受到网络和性能的影响，用户体验不好而单页面应用（SPA）就是用户通过操作地址栏来切换对应的组件（卸载和安装），无刷新切换，用户体验良好，Vue会使用官方提供的vue-router插件来使用单页面安装插件：yarn add vue-router or cnpm install vue-router -S简单路由的实现//引用路由import

2020-09-16 10:33:17 834

原创 vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）

vue-cli的使用现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择使用webpack进行项目的构建，在这里我们直接使用vue官方提供的，基于webpack的脚手架工具进行项目开发。注意：要求node.js版本是8+安装方法全局安装vue-cli: cnpm install -g @vue/cli oryarn global add @vue/cli检测安装：vue -V脚手架创建项目vue create 项

2020-09-14 22:53:56 702

原创插槽、组件通信、transition过渡、声明周期（四）

slot插槽vue提供了一种将父组件的内容和子组件模板整合的方法，内容分发如果想在组件内部添加内容的话，就在组件模板内部对应的位置添加slot标签，而且添加上name属性，指明与外部的标签相通，如果不写name属性的话，将外面所有未命名的标签添加到该位置上<div id="app"> <father> <p slot="zha">我叫渣渣辉</p> </father> <hr> &l

2020-09-11 21:43:21 280

原创组件：vue-mixins、fetch、if-else-show、is-：is、filter、虚拟dom、prop验证（三）

vue基础：组件vue-mixins在vue里可以使用mixins来做代码的抽离复用（声明一个对象，包含vue实例里面的一些属性），便于维护若某个实例要用的话，就直接通过mixins导入（数组的方式），并且不会覆盖原来的数据，而是合并在一起*let* commen = { methods:{ a(){ console.log(111) } } } new Vue({ el:"#app", mixins:[c

2020-09-10 22:55:28 194

原创虚拟dom、请求方式、生命周期内共十个钩子函数（一）

面试题： v-if vs v-show区别？v-show 如果为false，会将元素display：nonev-if 如果为false，会将元素直接从dom树删除掉v-else 需配合 v-if一起使用，不能单独使用template因为这个标签不会被浏览器解析，所以v-show对其无效，只能用v-ifv-if 是否可以与 v-for同时使用？不行的？ v-for优先级与v-if优先级高polyfill：判断当前浏览器的版本是否支持fetch，支持就直接用，若不支持就用polyfillpol

2020-09-09 23:31:48 798

原创 http的工作流程

HTTP 的工作流程1. 客户端和服务器建立链接建立链接的主要步骤叫做三次握手a. 客户端发送一个消息给到服务端b 服务端回给客户端一个消息c 客户端再回给服务端一个消息2. 建立链接后，发送一个请求给服务器（请求）每一个请求都要把我们的所有信息都包含请求每一个请求都会有一个请求报文在请求报文中会包含我们所有的请求信息（也就是我们要和服务端说的话都在里面）我们的请求报文中会包含几个东西:1、请求行2、请求头（请求头都是键值对的形式出现的）3、请求空行（请求头和请求主体之

2020-09-08 22:45:15 1812

原创 keep-alive包裹动态组件、v-focus、自定义指令钩子函数（参数、案例）（五）

vue知识点1、vue中的数据发生改变了，vm却知道数据发生改变了？（vue中的双向数据绑定的原理是什么？）vue创建vm的时候，会将数据配置到实例中，然后内部通过Object.defineProperty方法，对数据绑定了get与set。当获取数据的时候，会触发对应的get方法，当设置数据的时候，会触发对应的set方法，一旦set方法触发完毕了，内部会进一步触发watcher,从而数据改变了，视图会重新渲染。2、Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

2020-09-08 17:55:47 645

weixin_46547740的博客