黑面狐 sa~-CSDN博客

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

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

2021-07-20 17:23:48 771

原创 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 18:09:26 1047

原创 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 17:59:18 497

原创 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 15:01:50 3441 1

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

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

2021-03-17 10:31:03 332

原创 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 10:45:34 962

原创 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 18:27:11 10075 2

原创 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 18:07:11 514

原创如何在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 18:00:24 3231

原创 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 09:45:58 2759

原创 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 13:24:25 554

原创 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 23:04:47 19632 1

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

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

2020-10-23 14:13:29 828

转载 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 14:34:05 112

转载 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 10:23:49 176

原创 linux、nginx、php快速搭建WordPress网站-一站式

安装NginxUbutun（本教程是基于Ubuntu 16.04）安装nginx还是很简单的，就两句命令（全部root权限）：apt-get updateapt-get install nginx安装好后，可以访问http://xx.xx.xx.xx（或者是你的域名），如果显示下图所示结果，就说明成功了：安装MySQL还是很简单，一行命令：apt-get install mysql-server输入完之后你会被要求输入root的密码，输完之后就安装成功了：安装PHP安装命令：

2020-10-19 16:45:35 355

原创你了解哪些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 15:52:00 2423

原创谈谈对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 15:27:19 1537 4

原创 vue设计理念的理解

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

2020-10-03 14:45:13 794

原创 vue组件化的理解

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

2020-10-03 14:27:33 510

原创怎么理解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 14:16:23 249

原创 vue源码：vue中key的作用和工作原理

结论：1、key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。2、另外，若不设置key还可能在列表更新时引发一些隐藏的bug3、vue中在使用相同标签名元素的过度切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性不会触发过渡效果一、vue的updateChildren方法走到判断虚拟dom节点的老开头

2020-10-03 13:57:34 2431

原创 vue源码: vue组件中的data为什么必须是个函数，而vue得根实例则没有

结论：Vue组件可能存在多个实例，如果使用对象实现定义data，则会导致它们公用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新的data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。1、自定义组件// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: f

2020-10-03 13:35:11 331

原创 vue源码: v-if和v-for哪个优先级高

结论：1、显然v-for优先于v-if被解析（把你怎么知道的告诉面试官）2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能3、要避免出现这种情况，则再外层嵌套template，再这一层进行v-if判断，然后在内部进行v-for循环vue源码中的generate方法是ast转换成代码字符串，其中调用的genElement方法里先判断了v-for，再判断v-if：...

2020-10-03 12:40:04 621

原创解决ElementUI框架的el-select嵌套el-tree导致下拉框定位不准

问题： el-select 内嵌 el-tree, 在下拉框往上的情况下，折叠el-tree导致定位不会自动适应分析：el-select的下拉框有个 x-placement=“top-start” 属性，指示下拉框是往上展示，还是往下展示，并且定位方式是absolute，用top定位，现在懂了为啥折叠tree之后位置没变了吧？解决：在el-tree折叠node-collapse事件的时候，重新计算下拉框的top位置；兼容下拉框朝下：判断 x-placement 属性，做对应计算下拉框to

2020-08-06 17:59:01 3874

原创 VUE源码：二、vue源码剖析01

目标环境搭建掌握源码学习方法vue初始化过程剖析深入理解数据响应式资源vue源码地址：https://github.com/vuejs/vue知识点获取vue项目地址：https://github.com/vuejs/vue迁出项目： git clone https://github.com/vuejs/vue.git当前版本号：2.6.11文件结构源码目录：调试环境搭建安装依赖： npm i安装rollup： npm i -g rollup修改dev脚本，添加s

2020-07-24 14:31:46 317

原创 VUE源码：一、搭建调试环境

搭建调试环境获取源码git地址：https://github.com/vuejs/vue安装依赖：npm i安装rollup: npm i -g rollup修改dev脚本(package.json)：在dev添加–sourcemap"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",执行dev脚本：npm run dev调试技巧：1、在html中引入 dist

2020-07-19 14:01:43 381

转载 git merge和git merge --no-ff的区别

在很多介绍GItFlow工作流的文章里面，都会推荐在合并分支的时候加上**–no-ff**参数，而我们在合并的时候，有时git也会提示使用了 fast-forward，这里我将介绍一下merge的三种状态及 git merge 和 git merge --no-ff 的区别--ffWhen the merge resolves as a fast-forward, only update the branch pointer, without creating a merge commit. Th

2020-07-06 15:08:09 340

原创前端混合开发andriod抓H5页面的包方法

1、wifi设置代理到电脑IP，端口随便填2、手机连接到电脑3、使用charles抓包工具，抓取

2020-06-23 16:52:23 872

转载 element的el-date-picker组件限制只能选择当前时间之后的时间(包括时分秒的限制)

实现的方式：option实现插件只能选取当前时间之后的时候(包括年月日)handle实现插件能选取当前时间的时、分、秒，但是选择完毕之后，只要选择的时、分、秒小于当前时间，会自动填充为当前的时、分、秒如图当前是2020-05-13 17:00;年月日不能选取小于当前时间的，但是时分能选，但是点了ok之后，如果时间小于当前时间，会自动替换成当前时间<el-date-picker v-model="date" type="datetime" for

2020-05-13 17:01:59 24342 10

原创《ECMAScript6入门》-字符串新增方法

1、String.fromCodePoint()ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。在作用上，正好与下面的codePointAt()方法相反。String.fromCodePoint(0x20BB7)// "????"String.

2020-05-13 16:49:25 170

web安全之XSS攻击及防御pdf

wendu.ajaxhook.min

vueJS框架--

jquery-3.1.1.min

Backbone.js实战

空空如也