2021年07月_黑面狐 sa~_CSDN博客

黑面狐 sa~

码龄11年

518,044

总访问量
87

原创
2,179,277

排名
2,046

粉丝

个人简介：今年只变强，不变秃！

IP 属地：广东省

查看详细资料

个人成就

获得211次点赞
内容获得66次评论
获得462次收藏
代码片获得1,932次分享
博客总排名2,179,277名

TA的专栏

兴趣领域设置

前端

javascriptcssvue.jsreact.jses6webpackxhtml前端框架
后端

node.js
移动开发

flutter
网络与通信

https
微软技术

typescript
运维

jenkins
网络空间安全

web安全
服务器

linuxcentos
学习和成长

面试

创作活动更多

王者杯·14天创作挑战营·第2期

这是一个以写作博客为目的的创作活动，旨在鼓励码龄大于4年的博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧！我们一起发掘写作的魅力，书写出属于我们的故事。注： 1、参赛者可以进入活动群进行交流、分享创作心得，互相鼓励与支持（开卷），答疑及活动群请见https://bbs.csdn.net/topics/619735097 2、文章质量分查询：https://www.csdn.net/qc 我们诚挚邀请你们参加为期14天的创作挑战赛！

54人参与去参加

搜TA的内容

vue子组件直接修改props传值警告

在vue中子组件是不允许直接修改父组件传过来的数据，因为如果父组件传过来的数据如果是数组或者是对象的数据的话，在子组件中直接修改传过来数据的话，会影响到其他组件的数据，所以要在子组件data数据里定义一个变量来保存父组件传过来的可以这么改：父组件<child-com @close=close></child-com>methods: { close() {}}子组件<div @click='closeThisDialog'>关闭</div>.

发布博客 2021.07.20 ·

vue ssr报错：Error while initializing app DOMException: Failed to execute ‘appendChild‘ on ‘Node‘: This

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.We [as appendChild]起因是：1、封装了一个自定义loading组件，在组件内部使用v-show="show"来控制显示隐藏2、通过props传入show来控制3、使用vue-server-rendere

发布博客 2021.05.25 ·

html-webpack-plugin因node版本报错问题

const path = require("path")const miniCssEx = require("mini-css-extract-plugin")const htmlWebpackPlugin = require("html-webpack-plugin")const {CleanWebpackPlugin} = require("clean-webpack-plugin")module.exports = { entry: "./src/index.js", out

发布博客 2021.04.27 ·

HtmlWebpackPlugin打包报错：TypeError: Cannot read property ‘tap‘ of undefined at HtmlWebpackPlugin.apply

我使用的webpack版本是4 "html-webpack-plugin": "^5.3.1", //替换为 "html-webpack-plugin": "^4.4.1",解决

发布博客 2021.04.26 ·

记一次vm.$watch的巧妙使用

1、产品的需求是要在发货页面，每个商品下面添加扫码输入框，扫码发货之后验证IMEI是否能发货。如图红框为扫码匡(光标在输入框中，用扫码枪扫码即可填充数据进去)。此处如果扫的是箱标码的话，会出现多个换行的数据，如下图:2、那么问题来了，数据有多少个是不确定的，怎么判断是扫码输入，还是手动输入呢？(因为扫码框扫码是扫码完成自动去请求数据，而不是点击按钮)。3、我的实现是：监听扫码框里的数据变化的时间，如果小于100ms就是扫码枪扫入，如果大于100ms就是手动输入(因为扫的箱规码数据有点多，所以加大

发布博客 2021.03.17 ·

Nuxt.js配置PM2实践

一、方法一：文件启动1、Nuxt.js项目，文件根目录添加 ecosystem.config.js ，配置如下：module.exports = { apps: [{ name: 'anchor', script: './node_modules/nuxt/bin/nuxt.js', append_env_to_name: false, cwd: './', exec_mode: "cluster",

发布博客 2021.01.29 ·

HTTP头中的Content-Type: text/event-stream；是什么鬼？

1、最近在研究nuxt.js。网上找了个vue的项目，改造为nuxt.js架构的SSR程序在首页直出的时候，发现一个/webpack_hmr/client请求。如图：webpack热更新需要向浏览器推送信息，一般都会想到websocket，但是还有一种方式，叫做Server-Sent Events（简称SSE）。SSE是websocket的一种轻型替代方案。和websocket有以下几点不同：SSE是使用http协议，而websocket是一种单独的协议SSE是单向传输，只能服务端向客户端推

发布博客 2020.12.22 ·

11066 阅读 ·

nuxt动态路由配置

1、pages文件结构2、nuxt-link使用<nuxt-link v-for="(val,index) in listCon" :to="{ name:'newsDetail-id', params: { id:val.tag_id, title:val.title, media_info:val.media_info, media_name:val.media_name, datetime:val.datetime,

发布博客 2020.12.21 ·

如何在Nuxt.js中使用axios

1、nuxt的脚手架create-nuxt-app已经默认安装axios"dependencies": { "@nuxtjs/axios": "^5.12.4" },2、nuxt.config.js里面配置 modules: [ '@nuxtjs/axios', ], axios: { proxy: true }, proxy: { "/api": "http://localhost:8080"

发布博客 2020.12.21 ·

Nuxt实现SSR

.Nuxt实现SSR1.SSR简介1.1 传统web开发传统web开发，网页内容在服务端渲染完成，一次性传输到浏览器。![在这里插入图片描述](https://img-blog.csdnimg.cn/20201214094358175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODU5MTE5,size_16,color_

发布博客 2020.12.14 ·

Node express实现允许跨域

var express = require('express');const bodyParser = require('body-parser')var path = require('path');var indexRouter = require('./routes/index');var usersRouter = require('./routes/users');var adminRouter = require('./routes/admin');var app = expre

发布博客 2020.11.22 ·

Linux：-bash: ls: command not found解决方式

一、解决方法原因：修改了 /etc/profile 文件，然后输入ls时报错-bash: ls: command not found只需在命令行执行export PATH=/bin:/usr/bin:$PATH即可二、profile的作用/etc/profile这个文件是每个用户登录时都会运行的环境变量设置Linux /etc/profile文件的改变会涉及到系统的环境，也就是有关Linux环境变量的东西，学习Linux要了解Linux profile文件的相关原理，这里对则以文件进行

发布博客 2020.10.24 ·

20465 阅读 ·

H5动效的常见制作手法 - 腾讯ISUX

众所周知，一个元素，动往往比静更吸引眼球；一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的.

发布博客 2020.10.23 ·

JS 中可以提升幸福度的小技巧

本文主要介绍一些JS中用到的小技巧，可以在日常Coding中提升幸福度，将不定期更新~感兴趣的同学可以加文末的微信群，一起讨论吧～1. 类型强制转换1.1 string强制转换为数字可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN，或者使用 a !== a 来判断是否为NaN，因为 NaN !== NaN'32' * 1 // 32'ds' * 1 // NaNnull * 1

发布博客 2020.10.22 ·

javascript:原型与原型链

javascript——原型与原型链一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。例如：function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinco

发布博客 2020.10.20 ·

你了解哪些Vue性能优化方法？

1、路由懒加载2、keep-alive缓存页面3、使用v-show复用DOM4、v-for遍历避免同事使用v-if// 使用computed属性过滤需要显示的数据项5、长列表性能优化(1)如果列表是纯粹的数据展示，不会有任何改变，就不需要做相应话, 使用object.freeze(data)(2)如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容，参考vue-virtual-scroller、vue-virtual-scroll-list6、事件的销毁vue组件销毁时，会自动解绑它

发布博客 2020.10.03 ·

谈谈对MVC、MVP和MVVM的理解？

Web1.0时代在web1.0时代，并没有前端的概念。开发一个web应用多数采用ASP.NET/JAVA/PHP编写，项目通常由多个aspx/jsp/php文件构成，每个文件中同事包含了HTML、CSS、JavaScript、C#/JAVA/PHP代码，系统整体架构可能是这样：这种架构的好处是简单快捷，但是，缺点也很明显：JSP代码难以维护为了让开发更加便捷，代码更易维护，前后端职责更清晰。便衍生出MVC开发模式和框架，前端展示以模板的形式出现。典型的框架就是Springt、Structs、Hibe

发布博客 2020.10.03 ·

vue设计理念的理解

谈一谈对vue设计原则的理解？vue官网定义和特点：渐进式JavaScript框架易用、灵活和高效渐进式JavaScript框架：与其它大型框架不同的是，vue被设计为可以自底向上组成应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用提供驱动易用性vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会写js、htm

发布博客 2020.10.03 ·

vue组件化的理解

总结：1、组件是独立和可复用的代码组织单元。组件系统是vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用2、组件花开发能大幅提高应用的开发效率、测试性、复用性等3、组件使用按分类有：页面组件、业务组件、通用组件4、vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生炒其构造函数，它们基于VueComponent，扩展于Vue5、vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等6、合理的划分组件，有助于提升应

发布博客 2020.10.03 ·

怎么理解vue中的diff算法

总结：1、diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比(即diff)，将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度O(n)2、vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方3、vue中diff执行的时刻是组件实例执行其更新函数时，它会对比上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch4、diff过程整体遵循深度优先、同层

发布博客 2020.10.03 ·