02 2020 档案
摘要：### key值 虚拟DOM对比节点是否需要更新，通过key值比较，key值建议不要用随机数或下标，用id值，保持唯一性。 ### commit()方法没有返回值 commit()方法没有返回值，在mutations中定义的方法就是用来修改state中的值的，如果要封装一些自己用的方法，在store
阅读全文
摘要：let obj={ name:"吴小明", age:24, love:{ pingpang:true } } let obj1=obj; obj.name="孙艺珍"; obj.love.pingpang=false; console.log(obj) console.log(obj1) 输出结果为
阅读全文
摘要：### vuex 1、什么是vuex？ 官方：vuex是一个公共状态管理，通俗来说就是一种最好的非父子组件传值方案。 所谓的vuex就是一个公共的内存对象，它把所有组件需要公用的状态放到了一个公共的内存空间里，并且给每一个状态做了一个数据劫持（给每个状态添加了一个getter和setter方法）。
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div div { width: 20px; text-align: center; line-height: 20
阅读全文
摘要：### 路由 前端路由： 根据用户请求不同的url来展示不同的页面或者数据，前端路由是不会涉及到后端请求的，以及页面不会进行刷新。用户体验比较好，一般用来做单页面开发（SPA）。前端路由底层原理：hashchange和H5的history API中的popState和replaceState来实现。
阅读全文
vue-day06----过渡&动画（transition）、axios、axios以post方式请求数据、axios常用的配置项、axios拦截器、qs处理数据、vue中async和await的使用
摘要：### vue过渡&动画 transition标签 1、在vue中如果需要使用动画的时候必须要给动画的元素/组件包裹一个transition内置组件 2、transition内置组件身上有一个name属性，值为动画的名称 3、vue中应用动画的元素必须经历显示和隐藏的操作（v-if v-show）
阅读全文
摘要：### 自定义指令 directive 全局自定义指令：Vue.directive() 局部自定义指令：directives directive(参数一,参数二) 参数一：指令名称 参数二：指令的配置项，可以是函数，也可以是对象 函数： 参数一：使用当前指令的元素 参数二：指令的详细信息 { mod
阅读全文
摘要：### 组件传值 1、父传子 传递：当子组件中在父组件中当做标签使用的时候，给子组件绑定一个自定义属性，值为需要传递的数据 接收：在子组件内部通过props进行接收，props接收的方式有2种： ①通过数组进行接收 props:["属性"] ②通过对象进行接收 props:{ 属性:{ （1）typ
阅读全文
摘要：### webpack搭建vue环境 webpack工作原理：将入口文件需要的所有文件通过loader进行打包，在需要的时候直接引入。 1、初始化文件夹 创建webpackproject文件夹，在终端中打开，npm init -y 2、安装webpack以及webpack-cli npm insta
阅读全文
摘要：# day01 ### vue基础 vue是一个渐进式的JavaScript框架，是一个MVVM框架。 M：数据层 V：视图层 VM：映射层 vue的特点：通过数据去操作视图 底层原理：Object.defineProperty()（ES5，不支持IE8） vue3.0是使用new Proxy()（
阅读全文
摘要：作用：过滤数据 语法： 全局： Vue.filter("过滤器名",(参数一,参数二)=>{}); 参数一：需要过滤的数据 参数二：传递的数据 局部： filters:{ 过滤器名(){ } } 使用：{{username|过滤器名()}} 全局过滤器： 1、定义过滤器（npm i moment）
阅读全文
摘要：如果在A组件和B组件中有相同的data属性、method方法等，可以将公共部分抽离出来，这就是mixin的作用 A组件： <template> <div> <p>{{ aData }}</p> <p>{{ commonData }}</p> <button @click="aMethod">aMet
阅读全文
摘要：template html的方式做渲染 render js的方式做渲染 render（提供）是一种编译方式 render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。 h就是createElement()方法：createElement(标签名称,属
阅读全文
摘要：全局自定义指令：Vue.directive() 局部自定义指令：directives directive(参数一,参数二) 参数一：指令名称 参数二：指令的配置项，可以是函数，也可以是对象 函数： 参数一：使用当前指令的元素 参数二：指令的详细信息 { modifiers:修饰符（只要自定义指令后面
阅读全文
摘要：1、父传子 传递：当子组件中在父组件中当做标签使用的时候，给子组件绑定一个自定义属性，值为需要传递的数据 接收：在子组件内部通过props进行接收，props接收的方式有2种： ①通过数组进行接收 props:["属性"] ②通过对象进行接收 props:{ 属性:{ （1）type:限制数据的类型
阅读全文
摘要：猫眼电影、天天： 1、安装cssrem插件 2、设置 >搜索cssrem > Fixed Digits 改为2 px转rem小数点最大长度，默认：6 Root Font Size 改为 50 根字体大小，默认是16px，即1rem = 16px，可自定义 修改完要重启vscode，此时输入50.5p
阅读全文
摘要：修改： npm config set registry http://registry.npm.taobao.org/ 配置后验证是否成功（查看当前npm源）： npm config get registry 还原：新的镜像（npm config set https://registry.npmmi
阅读全文
摘要：1、执行 npm config get proxy npm config get https-proxy 2、如果返回值不为null，继续执行 npm config set proxy null npm config set https-proxy null 3、执行 npm config set
阅读全文
摘要：1、先使用淘宝镜像 npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 2、再进行安装 npm install node-sass
阅读全文
摘要：-S 即--save（保存） 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。 -D 即--dev（生产） 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel、sass-loa
阅读全文
摘要：### eCharts 官方文档：基本介绍、示例、API文档、配置项 实例 >官方实例 文档 >教程、配置项手册 echarts基本使用：（App.vue） ①安装插件： npm install echarts（项目名不能和插件名相同） ②引入： import echarts from "echar
阅读全文
摘要：npm ERR! code ENOSELF npm ERR! Refusing to install package with name "echarts" under a package npm ERR! also called "echarts". Did you name your proje
阅读全文
摘要：### 优化 1、加载速度的优化 ①雪碧图 >base64、iconfont ②代码压缩 ③图片视频压缩 ④cdn缓存 ⑤路由懒加载（异步组件） 首页引入的大文件进行分批次引入 2、运行效率优化 ①减少http请求，页面打开之后基本不涉及到数据更改 <keep-alive include="['a'
阅读全文
摘要：### axios Interceptors（拦截器）（P-lyric.vue） 类似于node中的中间件，在请求和响应之间做一次处理。 axios从接收到数据请求到then之间的过程中，拦截器进行拦截。正常的axios请求返回的response对象里有：data、status、statusText
阅读全文
摘要：### 样式作用域 scoped ### vuex的辅助函数（Player.vue） mapState：将state值直接映射到计算属性 原来拿到state中的songList： computed: { songList(){ return this.$store.state.songList; }
阅读全文
摘要：### Singer.vue跳转至Detail.vue 将Fsinger_mid参数（002J4UUk29y8BY）传过去： @click="goDetail(info.Fsinger_mid)" ### 使用阿里巴巴矢量图标库，返回箭头（Detail.vue） 1、先登录iconfont官网，下载
阅读全文
摘要：### axios、jsonp插件使用优化（Singer.vue） 场景：当很多组件都需要用到axios和jsonp的时候，可以考虑将axios和jsonp挂载到vue实例上。 原理：组价继承自实例，在实例里绑定的属性和方法在组件中能访问到。 原来的使用（仅在组件中引入和使用）： 引入： impor
阅读全文
摘要：编码 大小 支持语言 ASCII 1个字节 英文 Unicode 2个字节（生僻字4个） 所有语言 UTF-8 1-6个字节，英文字母1个字节，汉字3个字节，生僻字4-6个字节 所有语言 具体解释： 最早只有127个字母被编译到计算机里，也就是大小写字母、数字和一些符号，这个编译表被称为ASCII编
阅读全文
摘要：### 端口号问题：vue.config.js中devServer中port无效 问题描述：vue项目开发中，用axios请求数据时，用到服务器代理，在vue.config.js中设置服务器代理devServer时，配置 port:3001, 失效。 解决： 第一种方法：修改portfinder版本
阅读全文
摘要：### less报错： 原因：less版本不统一 解决：npm install less@2.7.3 ### 适配 ①index.html中： <script> // 将1rem设置为屏幕宽度的1/10，1rem=37.5px document.documentElement.style.fontS
阅读全文
摘要：### watch监听：监听数据的变化 data:{ age:24 }, methods:{ add(){ this.age++; } }, watch:{ age(newValue,oldValue){ console.log("新值",newValue) console.log("旧值",old
阅读全文
摘要：### 1、vue的组件和实例都有生命周期，而且是一样的 生命周期：（组件从创建到销毁的过程） 创建 挂载 更新 销毁 组件到达某一个阶段就会自动触发某一些函数，这个函数就叫生命周期的钩子函数。 创建：组件创建的时候触发 beforeCreate created 组件刚创建的数据请求 挂载：创建完成
阅读全文
摘要：### 什么是组件？ 将代码进行复用 组件是实例的拓展子类 组件继承自实例，实例有的组件大部分都有，稍有变异 ### 组件创建 创建组件模板的2种方式： 1、通过template标签 template:"#tpl" 2、通过字符串模板 template:"<h1>吴小明</h1>" ### 全局组件
阅读全文
摘要：### 虚拟DOM： 虚拟DOM就是内存中的一个变量，是一个对象结构 前端效率优化：最致命的问题就是DOM操作，尽量减少DOM操作 vue的高效： 1、虚拟DOM页面渲染高效 2、js ①获取数据②根据数据渲染界面DOM操作 for vue将开发者的精力从DOM操作上转移到了数据操作上，数据变页面变
阅读全文
摘要：路由： （1）监听地址栏的变化 （2）根据地址栏的变化切换到对应的组件 使用路由： 1、创建一个vue项目：vue create routerdemo 注意：在选择插件的时候只选择babel 2、安装路由插件：npm install vue-router 3、创建路由：src下新建router.js
阅读全文
摘要：问题描述：vue项目开发中，用axios请求数据时，用到服务器代理，在vue.config.js中设置服务器代理devServer时，配置 port:3001, 失效。 解决： ①第一种方法：修改portfinder版本号： 在node_modules中，依次找到@vue cli-service p
阅读全文
摘要：/* 通用样式 */ body,p,ul,ol,dl,dd,hr,h1,h2,h3,h4,h5,h6,figure,ul,ol,th,td,button,input,fieldset,legend,textarea,option{margin: 0;padding: 0;} table{border
阅读全文
摘要：安装脚手架：npm install -g @vue/cli@3.9.3 ①vue create demo vue版本：3.9.3，node版本：12.8.0 ②Manually select features ③Babel、CSS Pre-processors（Router和Vuex暂时没装） ④L
阅读全文
