Wilson_gzw-CSDN博客

原创 Vue数据响应式、模板解析的实现原理（实现一个简易的Vue）

实现步骤（实现我们自己的Vue—MyVue）MyVue（主入口的构造函数）Observer（用于实现数据响应化）Compile（解析模板、创建 Watcher、保存更新函数）Watcher（执行更新函数、被 Dep 收集）Dep（管理 Watcher、一旦数据更新就通知相应的watcher更新视图）一、MyVue的构造函数 new MyVue({ el: '#app', data: { name: 'hello world!',

2020-11-08 11:05:41 1199 2

原创 JavaScript深入浅出this、call、apply、bind

前言在方法原型链中有3个能改变方法调用中的this，分别是apply、call、bind，三个都是Function原型链中的方法，可以在我们定义的方法中调用，下面就开始详细的介绍目录方法内的this是什么call、apply方法的原理bind方法的原理总结方法内的this是什么我们在调用方法是通常在方法体内使用到this这个关键字，主要分以下5种情况自然调用this都指向window（浏览器环境下）// 声明方法后，自然调用function a() { console.lo

2021-12-12 19:35:21 506

原创 Vue、uniapp（cli 创建）项目的常用配置 eslint 、 prettier 、 stylelint 、 lint-staged 、 husky 代码格式校验

常用配置项目的代码格式化，方便统一代码规范1、安装依赖复制到跟目录下执行命令npm i eslint babel-eslint eslint-plugin-vue husky lint-staged prettier @vue/eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D2、在根目录下创建以下

2021-03-03 16:37:54 1435 3

原创前端开发vscode的常用插件

vscode常用的开发插件推荐，是本人开发的常用插件汇总1、Auto Close Tag —— 闭合标签2、Better Comments —— 代码注释高亮3、Bracket Pair Colorizer 2 ——为代码中的括号添上一抹亮色4、change-case —— 快速修改当前选定内容或当前单词的命名的插件5、Code Spell Checker —— 代码拼写检查7、CSS Navigation —— 规范提交代码 tag（有助于养成提交规

2020-11-05 17:30:34 486

原创 Vue 总结：组件间的通讯方式（父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参）

Vue 总结：组件间的通讯方式，并实现一个类似element UI的Form表单的实战（包含几种通讯方式）Vue的通讯的方式:1. props、emit(最常用的父子相互通讯方式)父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用子组件$emit(事件名，传递的参数)向外弹出一个自定义事件, 在父组件中的属性监听事件，同时也能获取子组件传出来的参数// 父组件<hello-world msg="hello world!" @confirm="handleCon

2020-10-16 18:03:50 513

原创 vue，react，js 图片上传前对图片进行压缩,主要用于头像上传（利用canvas重绘图片已达到压缩效果）

实现原理:　新建一个web api中FileReader对象，去读取本地选中的图片，新建image对象去记录选中图片的基本信息（如: width,height等），新建"canvas"标签，利用Image对象记录的数据在"canvas"上重绘一个图片，然后再将图片转成base64编码，再处理成Blob类型返回即可　具体如下　当选中图片后，监听选中的方法即可: 例如(在vue的element ui中)// 这是在vue中的template里的代码<el-upload ref="uplo

2020-06-04 11:21:42 387

原创 webpack打包js文件，兼容处理ES6、ES7等语法

推荐使用方法 ③ :方法 ① ： (处理基本的js兼容,缺点:对于promise等无法处理) 所需的插件: babel-loader @babel/preset-env @babel/core/** * webpack配置文件 * webpack.config.js * */const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = { /

2020-06-04 10:54:49 2143

原创 webpack生产环境的配置文件

webpack开发环境的配置文件其中处理了css兼容各种浏览器，js的兼容ES6、ES7等语法，图片或其他文件资源的处理以及css，js等的压缩1、 webpack.config.js 配置文件/** * webpack配置文件 * webpack.config.js */// node.js内置模块const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin')const min

2020-05-31 16:38:44 207

Simple_499的博客