2020年10月_qq_36437172

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

转载理解 JS 中的 [].forEach.call() 写法

因为 documtent.querySelectorAll() 返回的并不是我们想当然的数组，而是 NodeList，对 NodeList，它里面没有 forEach 方法，我们使用了这样的方法进行循环遍历，代码如下：var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.style.color = "red";});初次看到 [].for

2020-10-29 22:16:23 720

转载 Vue 实例属性：$attrs 和 $ listeners

vm.$attrs包含了父作用域不作为 prop 被识别（且获取）的 attribute 绑定（class 和 style 除外）。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind=“$attrs” 传入内部组件 -- 在创建高级别的组件时非常有用。总之就是包含了所有父组件在子组件上设置的属性（除了 prop 传递的属性、class 和 style）。<div id="app"> <base

2020-10-27 23:12:26 442

原创 JSX 语法

一、安装依赖npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props在 babel.config.js 文件添加如下信息：module.exports = { presets: ['@vue/babel-preset-jsx'],}您可以切换特定功能，默认情况下，所有功能（除外compositionAPI）均已启用：module.exports = { presets: [ [

2020-10-27 22:16:08 626

转载 element-ui table 组件 fixed 布局遮盖滚动条

问题描述：在 element-ui 的 table 组件中，给前两列设置了 fixed 属性，让前两列可以固定，同时设置操作列固定在右侧，不随着滚动条滚动移动，结果发现设置后，固定列的滚动条被遮挡了一部分。效果图如下：解决方案：.el-table__fixed,.el-table__fixed-right { height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式 bottom: 10px !importa

2020-10-27 20:37:03 4905

原创 Vuex 常用 API 及其使用方式

Vuex是一种状态管理模式。state：驱动应用的数据源；view：以声明方式将state映射到视图；actions:响应在view上的用户输入导致的状态变化。1.State:提供一个响应式数据this.$store.state.xxx/mapState取值2.Getter：借助Vue的计算属性computed来实现缓存this.$store.getters.xxx/mapGetters取值3.Mutation：更改state方法this....

2020-10-25 18:05:32 1281

原创自定义事件之 sync 修饰符

在有些情况下，我们可能需要对一个prop进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。在一个包含prop的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit('update:isShow', false)父组件可以监听那个事件并根据需要更新一个本地的数据property。<add-pickup :is-show.sync="showAddPickup"/>...

2020-10-24 12:13:47 376

原创 Vue 之函数式组件

函数式组件： functional:true 无状态（没有data）、无实例（没有this上下文）、无生命周期用一个简单的render函数返回虚拟节点使他们渲染的代价更小 const lists = [ { name: '客户', prop: 'userName' }, { name: '单据状态', prop: 'status', customRender: (record, list) => { retur...

2020-10-24 12:11:05 321

原创 vue 官网之内置指令

1.v-text:更新文本内容（textContent）。<span v-text="msg"></span><span>{{msg}}</span>v-text可以防止{{}}出现在页面上。2.v-html：把html当成html渲染（innerHTML）。<divv-html="html"></div>3.v-show：根据表达式之真假值，切换...

2020-10-22 22:32:56 205

原创常见前端性能优化

一、图片优化二、DNS 预解析三、预加载四、预渲染五、懒加载六、CDN

2020-10-21 22:25:38 171

转载 Vue 中如何使用 @hook？

一、组件内使用在 mounted 中添加一个监听，需要在 beforeDestroy 中移除这个监听（案例：vue 轮询），这是我们可以使用 hook。mounted () { window.addEventListener('online', this.handleOnline) this.$once('hook:beforeDestroy', function () { window.removeEventListener('online', this.handleOnline

2020-10-20 20:35:43 5467

转载网站性能优化或者网页性能优化

一、网络加载1.DNS预加载通过 dns-prefetch 属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起 DNS 解析请求，节省请求时间。2.CDN 加速解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度和成功率。CDN的优点：本地Cache加速，加快访问速度镜像服务，消除运营商之间互联的瓶颈影响，保证不同网络的用户都能得到良好的

2020-10-18 22:31:54 566

原创 this.$watch 和组件的 watch 有什么区别

watchwatch：一个对象，键是需要观察的表达式，值是对应回调函数，也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch()，遍历 watch 对象的每一个 property。deep: true：将会深度监听对象的 property改变时，被调用。immediate: true：将会载监听开始之后立即调用。注意：不应该使用箭头函数来定义 watcher 函数(例如searchQuery: newValue => this.updateAutocomp.

2020-10-18 22:12:41 12398

原创 Vue 项目中，点击多次按钮禁止重复提交数据

为了阻止用户在某些情况下，短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。方法一：通过控制 loading 来设置 loading，或者 disabled 也行，从而来控制按钮的是否可以点击。通过在 handleSubmit 函数未获取到服务器接口响应之前，该按钮一直处于不可用的状态，直到接收到服务器接口相应后，我们再将按钮恢复为可用状态。<el-button type="primary" class="w312" :loading="loading" @click="hand

2020-10-14 23:36:10 9554

原创 js-cookie 库与 document.cookie 的区别

Document.cookiedocument,cookie 主要是存储数据的，主要是写入、读取、删除操作的 API 掌握。// 1. 写入cookie, 会追加到当前的cookie中document.cookie = 'username=abc'// 2. 读取cookie，可以用正则匹配或者字符串解析查找的方法来读取var usename = /username=(\S+);/.exec(document.cookie)[1] // 这里只是简单的匹配了下，实际开发中要考虑很多情况...

2020-10-14 22:45:14 903

转载骨架屏和 loading 的优缺点

骨架屏 Skeleton Screen Loading 也叫加载占位图，是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。场景适用于布局排版固定的内容区域骨架屏所展现的是内容的大概轮廓，如果内容布局和排版不是固定的，那么轮廓和内容布局的巨大差异，不仅不能给用户顺畅和期待感，反倒会造成落差。因此骨架屏适用于布局排版固定的内容区域，例如列表、文章、个人信息。注意：如果内容区域有空页面的情况，也

2020-10-14 21:57:51 2337 1

原创 element-ui 如何获取未通过校验的字段

在添加了表单校验后，提交表单时，我们使用 validate 方法进行表单校验，代码如下：submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } });},我们可以看到 vali

2020-10-14 21:51:14 3845

转载这15个Vue自定义指令，让你的项目开发爽到爆

Vue 内置了一些非常有用的指令（比如v-html和v-once等），每个指令都有自身的用途。完整的指令列表可以在这里查看.这还没完，更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包，解决了无数的代码问题。以下就是我最喜欢的 Vue.js 自定义指令列表。不用说，这些指令为我的项目开发节省了大量时间！1. V-Hotkey仓库地址:https://github.com/Dafrok/v-hotkeyDemo: 戳这里https://dafrok.g...

2020-10-09 23:21:49 321

原创 vue 自定义指令如何传参

一、可视区域加载指令用来控制组件显隐的指令。当前组件到达可视区域后显示该元素。import Vue from 'vue'const waypoint = Vue.directive('waypoint', { inserted (el, binding, vnode) { const { showStr } = binding.value // 控制组件显隐的变量名称，注意，传字符串 const scroll = () => { if (vnode.con

2020-10-09 22:55:37 2364

转载 axios 全局阻止重复请求

在项目中，我们可能需要对请求进行‘防抖’处理。主要为了阻止用户在某些情况下，短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。常见的情况：PC端-用户双击搜索按钮/提交表单，可能会触发两次搜索请求/重复提交数据移动端-因移动端没有点击延迟，因此极容易造成误操作或者多操作，造成重复请求可能有loading遮罩层依然发生，因此我们要考虑前端阻止重复请求的方法。首先我们需要了解一下 axios 库中的 cancelToken API，其主要是用于取消接口请...

2020-10-09 22:40:58 3888

原创 vue 项目中神策埋点

如何配置神策埋点信息？1.安装依赖npm install --save sa-sdk-javascript2.项目配置在 utils文件夹下新建sensors.js，配置单页应用的固定代码，（非单页应用不需要加上配置对象：is_track_single_page:true）。import sensors from 'sa-sdk-javascript'sensors.init({ // 神策系统配置 server_url: 'http://shence.ap-ec.c...

2020-10-09 22:15:05 4415 2

原创 JavaScript 处理数组对象

一、获取数组对象中某一值封装为数组const data = [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date

2020-10-08 22:22:40 183

转载 vue 组件的 scrollBehavior

一、浏览器对用户访问网页的记录二、vue 对访问记录的管理vue 路由跳转通过对 history,pushState() 和 history.replaceState() 放的模拟来实现的，会往 history 栈中存放一条记录。当调用 router.go() 或者 router.back() 方法时，就和 history.go()、history.back() 效果一样。三、vue 组件滚动行为使用 tab 组件进行路由切换，同时对应的子组件重新进行渲染，而不是保存历史滚动的位置信息。

2020-10-08 21:50:25 531

转载 @keyup.enter 回车表单提交事件

当使用@keyup.enter 事件，敲击 enter 回车之后，直接提交表单。当form 表单中，只有一个输入框时，添加 @keyup.enter.native 事件，在该输入框中按下回车后提交表单；如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent 事件。<el-form label-width="5px"> <el-form-item> <el-input placeholder="请输入手机号..

2020-10-08 10:43:40 3822

原创数据对比处理

首先我们通过接口获取到数据源，结构如下：const data = { applyNo: "GD200922107304", applyTime: "2020-09-22 17:45:46", applyType: "MODIFY", auditMessage: "", consigneeAddressName: "宜州", consigneeContactName: "王大锤", consigneeContactTel: "18719632508", consignee

2020-10-06 12:23:59 263

原创路由拦截 beforeEach 钩子函数

在 axios 库中，我们一般使用interceptors 对接口请求或者接口响应进行拦截，代码如下：const $http = axios.create({ headers: defaultConfig.headers})// request拦截器$http.interceptors.request.use(config => { ...... return config}, error => { // Do something with request e.

2020-10-03 18:12:00 621

原创正则验证 input 输入框，禁止输入表情包

禁止输入表情包方法如下：includeSpecial (value) { if (!value) { return } //eslint-disable-next-line const regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u.

2020-10-03 17:41:11 3531

转载银行卡号建议自动间隔渲染

1.银行卡间隔渲染interceptedBankCard (value) { if (!value) { return } return value.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");}2.显示银行卡后四位数字，其他位数用星号代替interceptedBankCard (value) { if (!value) { return } var lastFour = value.slice

2020-10-03 16:41:50 328