qq_48113035的博客

一、介绍Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。二、使用1.基本安装npm install dayjs --save2.引入import dayjs from 'dayjs'3.一些常见的使用<script> // 获取当前日期,xxxx-xx-xx格式 dayjs().format('YYYY-MM-DD') // 或者 dayjs().startOf('day').fo

1.数据回显：指已经提交或未提交的数据，再次出现。如跳转进一个添加用户信息页面，在一个输入框中书写了数据“张三”，点击取消之后，再次跳转进添加用户信息页面，输入框中还未书写却已经出现张三这一问题。2.一行代码解决vue中数据回显问题Object.assign(this._data, this.$options.data());3.解释Object.assign()这个方法能够合并对象，并且会将第二个参数对象覆盖第一个参数对象的相同字段的数据，不相同的字段都会保留。然后返回值和第一个参数对象

一.小知识点1.使用vuex保存的数据，在通过路由跳转而使页面发生变化时，store中的数据并不会丢失，所以在路由跳转回来的时候数据依然存在并展示。但是如果一个页面中还有其他小组件，小组件也使用了vuex存储数据，当路由跳转此页面时，小组件中的数据虽然没有丢失，但是却不展示。...

11

1.lodash插件深克隆浅拷贝、深拷贝（手写深拷贝与浅拷贝）

1.作用域插槽也可以进行组件间的通信，当子组件不能决定组件的结构和样式的时候，就需要将父组件传递的数据以作用域插槽的形式回传给父组件，然后由父组件决定结构和样式。<li v-for="item in todos" :key="item.id"> <!-- 子组件不能决定结构和样式，将每一项传递给父组件去决定 --> <slot :todo="item"></slot></li>子组件此处的 :todo是回传的名称，并不是

1.介绍：本后台管理系统为前端后台管理系统，主要为管理员等提供操作界面。本项目基于一个后台管理系统项目模板进行二次开发：源码网站 https://github.com/PanJiaChen/vue-admin-template2.项目模板结构1.build文件夹，内部有个index.js文件，是webpack的配置文件。2.mock文件夹，mock模拟数据的文件夹。开发时是真实接口数据，因此这个文件夹以后可以删除。3.node_modules文件夹，项目依赖的模块。4.pub

1.element-ui分页器相关代码：<span class="demonstration">完整功能</span> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="8" :page-sizes="[1, 3, 5, 10]" :page-size=

1.$children组件属性官方介绍：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。即$children是组件自带的属性，它可以获取到当前组件的子组件，并以数组的形式返回。2.$parent官方介绍：指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。如果组件没有父组件，他的$parent为undefined，App组件(根组件)的$parent不是u

1.v-model的基本作用v-model的基本作用是做双向数据绑定，多用于表单元素中的双向数据绑定。<!-- 双向数据绑定 --><input type="text" v-model="msg"><span>{{msg}}</span>2.VUE2中v-model的实现原理：单向数据绑定 + 原生DOM事件@input事件@input事件是在表单数据发生变化的时候被触发，然后修改数据值即可实现双向数据绑定。<!-- 不用v-

1.主要用处主要用于对props数据进行双向绑定2.用法例子：父亲有10000元，儿子每次花费100元，同步父子组件中的父亲所拥有的金钱。父组件：<span>爸爸现在有{{ money }}元</span><son :money="money" @update:money="money = $event"/>子组件：<span>小明每次花100元<button @click="$emit('update:money',m

1.$attrs属性它是组件自身的一个属性，可以获取到传递给组件的所有没有用props声明接收的prop属性。当父组件传递给子组件的props数据较多时，子组件可以使用v-bind="$attrs"将所有props属性接收使用。如：父组件<new-button type="success" icon="el-icon-plus" size="mini" />子组件接收使用<el-button v-bind="$attrs"></el-button&g

1.原生DOM绑定原生事件？-就是普通的原生事件，如点击事件、双击事件<!-- 原生DOM绑定原生事件 --><button @click="handler1">原生DOM绑定原生事件</button>2.原生DOM绑定自定义事件？-原生DOM绑定自定义事件vue不会报错，但是没有任何意义，因为不能$emit去触发事件<!-- 原生DOM绑定自定义事件,没有意义 --><button @xxx="handler3">原生

30：项目打包上线30.1：运行npm run build，生成dist文件夹30.2：.map文件：在项目打包后，代码都是经过加密的，如果运行时报错，输出的错误信息无法准确定位是哪里的代码出错，有了map文件之后就可以像未加密的代码一样，准确输出是哪一行出错。但是项目上线时，已经基本保证没有错误，所以可以将map文件删除，并不会影响运行。也可以在 vue.config.js中配置，打包时不会生成map文件module.exports = {...

27：图片懒加载：vue-lazyload插件实现27.1 为什么需要懒加载？在图片很多的网站中，如果所有图片全部一次性加载完毕，可能会增加服务器压力、导致页面卡顿、影响用户体验。为了解决这个问题，就使用懒加载这个方法，就是只显示当前可视窗口的图片，不是可视区的图片先不加载。27.2 步骤1.安装 npm install vue-lazyload -S2.在main.js引入并配置//引入插件import vueLazyload from 'vue-lazyl...

24：二维码支付业务24.1 利用插件qrcode进行生成二维码，它能够将服务器返回的二维码字符串，转为base64格式的图片。24.2 使用过程1.安装 cnpm install qrcode --save2.引入 import QRCode from 'qrcode'3.使用其身上的方法 QRCode.toDataURL(字符串)，返回一个Promise对象，使用async、await解析即可获得base...

23：小知识点 23.1 vuex存储数据默认不是持久化的，刷新之后就会消失 23.2 token：当用户登录成功时，服务器会给浏览器返回一个用户的唯一标识（token），本质是一个字符串，当需要用户信息进行展示时，浏览器需要把token作为令牌来获取用户相关数据。...

22：

20：vue-router进阶：滚动行为 20.1 介绍：使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 20.2 配置：配置在路由配置文件中，与路由配置信息属性routes平级export default new VueRouter({ routes, // 路由跳转时，使滚动条在顶部（滚动行为） scrollBehavior(to, from, savedPosition) { ...

18：阿里图标字体库在线版使用方法 18.1 点击查看在线连接18.2 生成在线代码 18.3 将路径引入到public/index.html中（在最前面添加https使路径完整）<!-- 引入阿里图标--在线生成代码方式 --><link rel="stylesheet" href="https://at.alicdn.com/t/font_3034693_rqbvv7ezmhc.css"> ...

16：

13：

11：mockjs 11.1 mockjs介绍：mockjs可以生成模拟数据，拦截AJAX请求，可以模拟后台接口的数据。 11.2 为什么要使用mockjs？ 在前端开发的时候，往往都需要都需要后端提供接口数据来进行相应页面的开发。但这个时候就需要后端先行开发，之后前端才进行开发，从而可能会影响开发效率。Mock.js这个工具完全可以通过我们设置的规则，来提供数据，从而解决了前端不能独立开发的问题。而且当对接后端接口的时候，也不需要修改既有代码。 ...

11

7：函数的防抖与节流 7.1 卡顿现象 原因：事件的触发非常频繁，每一次的触发都会引起回调函数的执行，如果回调函数内部有计算，且频繁触发，那么就会导致浏览器卡顿。 7.2 防抖 介绍：指频繁触发事件，但是只会执行最后一次的事件回调，之前的回调都会被取消。 技术：lodash中debounce方法封装了防抖的实现 7.3 节流 介绍：指频繁触发事件，但是事件回调在一定的时间内只会执行一...

6：vuex模块化开发 1.为什么要使用vuex？ 答：当项目较大时，组件、数据、接口等都会很多，会导致项目维护不方便，所以采用vuex统一管理共用的数据。 2.vuex的模块化开发。 vuex不仅仅可以用来保存共用的数据，也可以用来模块化开发，将不同组件的数据写到不同的对应文件中来进行保存，使开发条理更加清晰，并且极大的方便后期的维护。 3.使用：在src中新建store文件夹，用来书写vuex相关代码 ...

11

3：路由的有关总结3.1 路由组件与非路由组件的区别？ 1.放置的位置不同：路由组件一般放置在pages文件夹中，非路由组件一般放置在components文件夹中。 2.使用的形式不同：路由组件一般需要在router文件夹中注册，非路由组件一般是以标签的形式使用。3.相同点：路由注册完成以后，不管是路由组件，还是非路由组件，他们身上都有$route和$router属性。$route一...

项目介绍：此项目是基于vue2的前后台项目1：vue-cli脚手架初始化项目生成文件的介绍1.node_modules文件夹：项目依赖文件夹2.public文件夹：一般放置一些静态资源（如网页图标），在webpack打包时，会原封不动的打包到dist文件夹。3.src文件夹： 3.1 assets文件夹：一般放置多个组件共用的静态资源，在webpack打包时，会把此静态资源当作一个模块，打包到JS文件中。...