高级白嫖工程师-CSDN博客

原创 optionsAPI与compositionAPI

1、区别optionsAPI：vue2中使用的是optionsAPI，来定义一个组件内部的一些属性，如methods、data等等；其缺点往往会在大项目中体现出来，比如一个简单的计数器功能，可能需要在methods内部书写一部分逻辑，在computed内部也书写一部分逻辑，那么问题来了：如果该组件内部有n个这样的小功能，那么此时代码逻辑是十分分散的，并且后期迭代维护面临的问题也是可能修改一个需求需要在不同的属性内部反复查找相关的代码，而compositionAPI的出现就是为了解决这一问题的。co

2022-02-11 13:40:49 4684 2

原创 Mixin的使用

在组件化开发中，难免会有部分组件内部的部分逻辑是相同的，为了方便减少代码量，vue提供了混入(Mixin)的功能。局部混入：首先需要抽取要混入的内容，单独的放到某一个文件，通过导出的方式被其他组件引用。demoMixin.jsexport const demoMixin = { // 混入导出的文件中可以书写vue实例下的所有属性 data methods等等 data(){ return { msg:'我是通过混入实现的信息！' } },

2022-01-18 13:26:36 1189

原创自定义表单组件多个v-model实现

与自定义表单组件的单个v-model很类似，只不过要绑定多个时，需要在使用v-model时通过v-model:attrName=xxxx的形式指定绑定哪个值到子组件内部哪个组件。同样的，子组件中计算属性触发的自定义事件也需要以update:attrName的形式指定。（单个值绑定参考：自定义组件双向绑定单个值.）假设有App父组件，在该组件内部使用了peanutInput这个子组件，同时在该子组件上双向绑定两个值：App.vue<template> <h1>自定义组件

2022-01-13 06:30:00 652

原创 vue自定义组件的v-model

vue对于原生的表单元素都支持v-model进行双向绑定，同样的，自定义组件也可以使用v-model实现双向绑定（这个个人觉得主要用于自定义组件内部存在表单元素时用的比较多）。对于原生表单元素比如input<input v-model="peantText"></input>vue内部帮我们实现双向绑定的原理如下：<input :value="peantText" @input="inputChange($event.target.value)"></i

2022-01-12 22:00:32 1915 1

原创 element表格单元格点击可编辑

<el-table border size="mini" :data="tableData" style="width: 100%;margin-top: 10px;"> <el-table-column v-for="item in tableColumn" .

2022-01-06 16:48:05 633

原创 vue3中异步组件的使用

vue3的异步组件主要依靠defineAsyncComponent来实现。<template> <AsyncComponent/></template><script> import { defineAsyncComponent } from "vue"; // 使用defineAsyncComponent方法定义异步组件 const AsyncComponent = defineAsyncComponent( {

2021-12-31 13:30:25 900

原创 vue3动态组件与keep-alive

2021-12-30 14:06:56 696

原创 vue3中作用域插槽的使用

vue3的作用域插槽，在我们封装高级组件时，依靠其灵活的slot，可以帮助我们拓展组件的多样性。首先得搞清楚作用域插槽，简而言之就是：父组件只能访问在父组件中编译的内容，子组件只能访问子组件中的内容；假设我们有一个需求，在App.vue中有一个数组需要通过一个子组件来显示，同时我们还希望显示内容的标签可以自定义，也就是说可以用div、span或者其他任何html标签，如何实现呢？当然是插槽。看下面的例子：假设有两个组件，App.vue和SlotComponent.vue要实现上面的需求，可以像这样

2021-12-29 22:13:34 1929

原创 vue3事件总线---依赖于mitt实现

vue3移除了vue2原有的on、on、on、emit，因此事件总线推荐使用第三方库实现，详情参考官方文档，这里主要记录使用mitt的实现。安装mittnpm i mitt --save创建事件总线文件import mitt from 'mitt';export const emitter = mitt(); // 返回值是一个对象/*也就是说 emitter中一共包含以下几个属性方法：on:为给定类型注册事件处理程序；====》 emitter.on('type',(...a

2021-12-28 13:55:48 1112

原创 vue3中非父子组件传值

vue2中非父子组件的传值主要是通过事件总线，创建一个vue实例，通过在不同的组件中导入该实例来实现非父子组件之间的通信行为。vue3提供了**provide**和**inject**属性，可以实现非父子组件之间的通信；假设有三个组件：App.vue(父级)、sub1(子级)、sub2(子级的子级)：App.vue<template> <div style="border: 1px solid pink"> <h1>我是你爹</h1>

2021-12-27 23:04:47 1035

原创 Vue3中子自定义事件传值的验证

vue3自定义事件

2021-12-27 22:03:05 989

原创配置webpack本地服务

安装webpack-dev-servernpm i webpack-dev-server -D如下配置：devServer:{ hot:true, // 开启模块热替换 port:11888, // 指定端口 host:"0.0.0.0", // 指定地址可以是0.0.0.0也可以是localhot compress:true, // 是否启用gzip压缩 },...

2021-12-22 13:35:21 249

原创 webpack打包时html模板设置

对于一些通过hash值设置了动态文件名等的文件，打包后如果需要按照特定的html模板生成最终的html文件，就需要使用插件HtmlWebpackPlugin。安装插件npm install --save-dev html-webpack-pluginwenbpack.config.js中如下配置module.exports = { // 所有插件配置都是在这里 plugins:[ new htmlWebpackPlugin() // 插件一般都是一个class 需要用new

2021-12-20 13:41:13 415

原创 webpack基础配置学习

一、webpack基础配置安装webpack、webpack-cli(建议使用生产环境)npm i webpack webpack-cli --D配置打包指令// 使用全局webapck进行打包命令行执行npx webpack// 如果要使用项目下的webpack打包可以使用以下指令该指令会优先在项目路径下寻找webpack相关的依赖 npx webpack 然而更好的选择是在项目下生成一个包管理文件，统一对项目依赖进行管理：// 生成package

2021-12-17 14:14:03 129

原创 webpack5打包静态资源配置

webpack5打包图片等资源比之前的版本要便捷，不需要配置那么多loader，只要配置asset-module-type即可。{ test:"/\.(png|jpg)$/", type:"asset", generator:{ filename:"[name]_[hash:4][ext]" // 指定文件名格式 }, parser:{ dataUrlCondition:{

2021-12-17 13:54:44 547

原创 webpack将部分图片打包后转化为base64

webpack将部分图片打包后转化为base64主要依靠url-loader实现。使用步骤：安装url-loader：npm install url-loader -Dwebpack配置{ test:"/\.(png|jpg|jpeg)$/", use:[ { loader:"url-loader", options:{ name:"[name]_[hash].

2021-12-17 13:35:40 2563

原创 webpack文件占位符placeholder的使用

webpack打包后的文件名配置实现：主要是通过file-loader提供的占位符去配置实现。常用的主要有下面这几个：[ext] ：目标文件/资源的文件扩展名。[name] ：文件/资源的基本名称。[hash]：指定生成文件内容哈希值的哈希方法。只需要在webpack.config中配置：module:{ // 配置使用的loader rules:[ { test: /\.css$/, use: ['style-loader','css-loader'] },

2021-12-17 13:21:43 406

原创 wangEditor在vue项目中的的使用

wangEditor在vue项目中的的使用1.安装推荐使用npm安装：npm i wangeditor --save2.引入import E from 'wangeditor'const editor = new E('#div1')// 或者 const editor = new E( document.getElementById('div1') )editor.create()3.组件封装子组件封装editorPanel注意：文档中配置是这样写的editor.config.x

2021-08-03 14:31:20 148

原创 10.Symbol类型

1.Symbol的概述与注意点概述引入的原因：在实际开发中，由于对象属性名都是字符串，很容易造成变量冲突，为了解决这一问题，ES6引入symbol类型；Symbol类型：表示独一无二的值；自此，JavaScript已经有七种数据类型：Undefined、null、String、Boolean、Object、Number、Symbol；Symbol值通过symbol函数生成；也就是说自此属性名可以是字符串也可以是symbol值；注意点Symbol值作为属性名时，该属性仍是公开属性，不是私有

2020-10-11 16:30:24 628

原创 09.ES6中对象的扩展

1.属性和方法的简介表示法属性ES6允许直接写入变量和函数作为对象的属性和方法；// es6可以直接写入变量和函数表示对象属性和方法let name = "peanut";let obj1 = {name}; // {name: "peanut"}ES6允许可以只写属性名不指定属性值，此时属性值等于属性名所代表的变量；// ES6允许可以只写属性名不指定属性值，此时属性值=属性名所代表的变量的值；function fn1(x,y) { console.log({x,y});

2020-10-11 16:29:17 141

原创 08.数组的扩展

1.扩展运算符含义扩展运算符是三个点“…”，如图rest参数的逆运算，能将数组转换为用逗号分隔的参数序列；该运算符主要用于函数调用：// 用于函数调用function fn1(x,y) { console.log(x + y);}const numbers = [1,2]; fn1(...numbers);// 3可以和正常参数结合使用：// 可以和正常的函数参数结合使用function fn2(v,w,x,y,z){ console.log(v,w,x,y,

2020-10-07 23:07:33 163

原创 07.ES6函数的扩展

函数参数的默认值基本用法ES6之前只能采用变通的方法为函数参数指定默认值：// ES6之前变通的方法为函数参数指定默认值function fn1(x,y){ /* y = y || "World"; // 短路运算 return x + y; 该方法并不完美，y传入的值为false时无法正确设置默认值*/ // 判断y是否等于false if(typeof y === "undefined"){ y = "World"; } r

2020-10-07 23:06:50 140

原创 06.数值的扩展

1.二进制和八进制表示法ES6提供二进制和八进制的新写法：二进制：0b(或0B)；八进制：0o(或0O)；// 二进制：0b/0Blet res1 = (0b111110111 === 503); console.log(res1); // true// 八进制：0o/0Olet res2 = (0o767 === 503);console.log(res2); // trueES5开始，严格模式下八进制数不允许使用前缀0表示；// 严格模式下，不允许使用0前缀表示八

2020-10-07 23:06:04 146

原创 05.正则表达式的扩展

1.RegExp构造函数回顾ES5中的RegExp构造函数；RegExp构造函数语法：/*text：正则表达式规则的字符串flag:修饰符*/let reg = new RegExp(text,flag);// 或者直接传入一个正则对象let reg1 = new RegExp(/xxx/g);ES5中RegExp构造函数的参数有两种情况1.传入两个参数：// 1.传入两个参数：一个字符串，一个修饰符字符let reg1 = new RegExp("^[\u4e00-\u

2020-10-05 21:00:14 120

原创 04.字符串的扩展

1.字符串的Unicode表示法JavaScript允许采用"\uxxxx"的形式表示一个字符，“xxxx”表示字符的Unicode码点；这种表示法仅限于表示码点在“\u0000~\uFFFF"之间的字符，超过这个范围的字符需要用2个双字节的形式表达；ES6对此进行了改进，只要将码点放入大括号就能正确解读该字符；==大括号表示法等价于utf-16编码；// JavaScript允许使用\uxxxx形式表示字符串console.log("\u0061"); // a// 局限性：超过\uFF

2020-10-04 17:19:00 306

原创 03.变量的结构赋值

1.数组的解构赋值基本用法：ES6允许按照一定模式从对象和数组中提取值，然后对变量进行赋值，称为解构；数组解构赋值本质上是一种模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值；<script> let [a,b,c] = [1,2,3]; console.log(a,b,c); // 1 2 3 // 只要等号两边的模式匹配，就能完成解构赋值 let [, , third] = ["aa","bb","cc"]; con

2020-10-04 17:17:30 130

原创 02.let和const命令

1.let变量声明—作用与var关键字类似let关键字的几个特点：不能重复声明同一个变量；let a = 1;let a = 1; // 抛出错误 Identifier 'a' has already been declared不存在变量提升；console.log(b);let b = 1; // 抛出错误，不存在变量提升 Cannot access 'b' before initialization用let声明的变量仅在块级作用域下有效；// 3.仅在块级作用域下有

2020-10-04 17:16:30 119

原创 jQuery---jQuery操作CSS样式方法

jQuery操作css样式的几种方法css(name|pro|[,val|fn])一个参数：获取css属性值；两个参数：设置css属性；参数可以是属性名对属性值，或者是一个属性，又或者是多个属性组成的对象；使用该方法有三种设置css样式的途径：逐个设置；链式设置（一般不要超过三个，要保证可阅读性）；批量设置；如下代码所示：<div></div><script> // jquery操作样式的方法：css(name|pro[,v

2020-08-27 11:25:58 687

原创 jQuery---jQuery代码、文本、值操作方法

jQuery代码、文本、值操作方法html()方法html([val|fn])：设置/取得第一个匹配元素的html内容；不传递参数时获取元素内容；传递html代码片段时，该方法会生成对应的元素然后插入；；html()方法text([val|fn])：设置/取得所有匹配元素的html内容；不传递参数时获取元素内容；传递html代码时，不会生成元素插入，只会将文本原样插入；val()方法val([val|fn|arr])：获得匹配元素的当前值；不传递参数时获取元素当前值；&l

2020-08-27 11:24:59 135

原创 jQuery---jQuery类操作方法

jQuery中操作css类的方法addClaas()方法addClass(class|fn)：为每个匹配的元素添加指定的类名；添加多个类名时，用空格隔开即可；removeClaas()方法addClass(class|fn)：为每个匹配的元素删除指定的类名；删除多个类名时，用空格隔开即可；toggleClaas()方法addClass(class|fn)：为每个匹配的元素添加指定的类名；添加/删除多个类名时，用空格隔开即可；切换的意思就是，指定的类以及存在的话就删除类，不存在就

2020-08-27 11:23:35 115

原创 jQuery---jQuery属性方法

知识回顾学习jQuery属性方法前，先回顾一些概念：什么是属性？如何操作属性？属性：属性就是对象中保存的变量；操作属性：var obj = {};obj.name = 'peanut';// 或obj["name"] = "peanut";什么是属性节点？如何操作属性节点？属性节点：在编写html时为元素添加的属性就是属性节点，相应地DOM元素的所有属性节点全部保存在attributes集合中；操作属性节点：DOMEle.setAttribute(attr,value): 设置属

2020-08-27 11:22:59 165

原创 jQuery---内容选择器

jQuery内容选择器jQuery中的选择器与css中的选择器大部分相同，本小节主要学习内容选择器；内容选择器有以下四个：属性说明ele：empty匹配所有不包含子元素或者文本的空元素ele：parent匹配含有子元素或者文本的元素ele：contains(text)匹配包含给定文本的元素ele：has(selector)匹配含有选择器所匹配的元素的元素<div></div><div>我div</div

2020-08-27 11:22:13 384

原创 jQuery---静态方法和实例方法

静态方法和实例方法1.知识回顾：静态方法：直接添加到类中的方法就是静态方法，通过类名调用；实例方法：添加到原型对象中的方法就是实例方法，通过类的实例调用；//创建类function MyClass(){};// 1.静态方法MyClass.staticMethod = function(){};// 调用MyClass.staticMethod();//通过类调用// 2. 实例方法MyClass.prototype.instanceMethod = function(){};

2020-08-27 11:21:20 246

原创 jQuery--jQuery对象的本质

jQuery对象什么是jQuery对象？jQuery对象其实是一个伪数组<p>1</p><p>2</p><p>3</p><script> // 先看jQuery对象的打印结果 $(function(){ var $jqObj = $('p'); console.log($jqObj); /* n.fn.init(3)

2020-08-27 11:20:22 297

原创 jQuery--入口函数、核心函数

jQuery的使用引入jQuery库引入jQuery文件，有两种方式：jquery.com下载jquery库并引入；使用CDN（内容分发网络）引入；//1.下载文件后引入<script src="jquery-1.10.2.min.js"></script>//2.使用cdn<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">//百度cdn<script

2020-08-24 22:12:24 104

原创 js基础学习——JSON

为什么说json是JavaScript的子集？json利用了JavaScript中的一些模式来表示结构化数据；1.语法json的语法可以表示哪些类型的值？主要可以表示以下三种类型的值：简单值：使用与js相同的语法，可以表示数值、字符串、null、布尔值；（不支持undefined）数组（可嵌套）：与js相同的表示方式，表示一组有序的值的列表；对象（可嵌套）：表示一组无序的键值对；json不支持变量、函数或对象实例，他只是一种表示结构化数据的格式；1.1 简单值简单值主要有

2020-08-22 17:34:11 201

原创 js基础学习——引用类型的单体内置对象

单体内置对象：由ECMAscript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAscript程序执行之前就已经存在。简而言之，就是可以直接使用，不需要手动实例化的对象，比如Object、Array和String。1.Global对象所有在全局作用域下定义的属性和函数，都是Global对象的属性。1.1 URI编码方法encodeURI（）：用于整个URI，对URI（通用资源标识符）进行编码，以便发送给浏览器，不会对属于URI自身的特殊字符（$、&等）进行编码；encodeUR

2020-06-29 11:15:33 130

原创 js基础学习——引用类型中的基本包装类型

1.基本包装类型的概念ECMAscript提供了三个基本包装类型：Boolean、Number、String；每当读取一个基本数据类型时，后台就会自动生成一个对应的基本包装类型的对象，方便我们能够调用一些方法来操作这些基本数据类型。基本数据类型不是对象，按道理来说是不该有方法的，但是通过后台的以下操作，基本数据类型对应生成了基本包装类型：/*1.创建对应基本数据类型的一个实例 2.在实例上调用指定的方法 3.销毁该实例，释放内存*/var str = new String('test te

2020-06-27 17:58:30 152

原创 js基础学习——引用类型中的Function类型

1.创建函数函数也是对象。每个函数都是Function的实例，都与其他引用类型一样具有属性和方法。function关键字：//语法格式：function fn(){};函数表达式//语法格式：var fn = function(){};

2020-06-23 16:18:17 298 2

原创 js基础学习——引用类型中的RegExp类型

1.创建RegExp类型JavaScript中通过用RegExp类型来支持正则表达式；字面量形式var expre = /pattern/flags//pattern：正则表达式规则（模式）//flags：修饰符RegExp构造函数var expre = new RegExp(pattern,flags);//传递给构造函数的两个参数都是字符串，不能把正则表达式字面量传递给构造函数//要注意对参数中的元字符进行转义关于修饰符的说明：i：表示不区分大小写的匹配；g：全局模

2020-06-22 09:53:39 195

空空如也

空空如也