- 博客(29)
- 收藏
- 关注
RSS订阅转载 Vue 中 $listeners 的使用方法
$listeners 的官方介绍：包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。下面代码中包含一个子组件和一个父组件，子组件需要调用父组件中的方法，可以通过$listeners.方法名形式调用。方法名必须在父组件中被定义，因为子组件是在父组件的模块中来使用的，通过$listeners 可以很好的用在多次传递方法<div id="app"> ...
2022-01-24 15:17:32
752
转载 Vue中的$attrs和inheritAttrs
官网的文档简短而又不清晰，实在是看不懂，只好自己找代码验证来看看是什么意思：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
2022-01-24 14:49:02
350
转载 Vue在IE下打开空白的解决方案
不需要装babel-polyfill！首先说前置条件：使用的Vue Cli 4.x 创建的项目 package.json里面的devDependencies节点中的@vue/cli-plugin-babel版本是4.x 装了babel-polyfill请卸载掉npm uninstall babel-polyfill，因为@vue/cli-plugin-babel里面已经包含了这个玩意 vuejs的版本是2.x然后可以看官方文档了：浏览器兼容性 | Vue CLI解决方案：1.pa
2022-01-21 14:32:30
406
原创 修改vant design 的样式
一、全局修改1.新建一个css文件2.在main.js中引入这个css文件即可二、局部改变1.如果只想改变一个组件中的个别样式，则需要使用深度选择器::v-deep
2021-12-20 09:44:24
437
原创 Vue中通过$event获取元素
<button @click = “clickfun($event)”>点击</button>methods: {clickfun(e) {// e.target 是你当前点击的元素// e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素中的class属性 e.currentTarget.clas..
2021-12-17 11:17:32
1474
原创 解决跨域问题
解决跨域问题：1.cors：解决跨域的第三方插件，服务端设置响应头Access-Control-Allow-Origin：指定可访问资源的域名2.jsonp：通过script标签中的 src属性 可以跨越同源策略，但是只支持get 请求，用的不多3.nginx：反向代理4.Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案5.在vue cli 中配置 vue.config.js 文件，在当前开发环境下将 API 请求代理到 另
2021-12-01 16:33:02
229
原创 Vue中props属性
props功能：让组件接受外部传过来的数据（1）：传递数据：<Demo name="xxx"/>（2）：接受数据： 第一种：（只接收）：props: ['name'] 第二种：（限制类型）：props:{ name:Number } 第三种：（限制类型，限制必要性，指定默认值）： props: { name: { type: String, requir...
2021-11-30 14:30:58
20429
1
原创 Vue自定义指令
一、定义语法： 1.局部指令：new Vue({ directives:{ 指令名：配置对象 }})或new Vue({ directives:{ 指令名：回调函数 }}) 2.全局指令：Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)二、配置对象中常用的3个回调： 1、.bind: 指令...
2021-11-26 16:12:42
556
原创 Vue监视数据
1.vue会监视data中所有层次的数据。2.如何检测对象中的数据？ -通过setter实现监视，且要在new Vue时就传入要监测的数据 -（1）对象中后追加的属性，Vue默认不做响应式处理 -（2）如需给后添加的属性做响应式，应使用如下API： Vue.set(target, propertyName/index, value) 或 this.$set(target, proper...
2021-11-25 20:06:50
74
原创 画一条 0.5 px 的线
1.transform：scale（0.5）<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .half-px{/*heig
2021-11-04 10:05:52
206
原创 数组扁平化、数组去重
数组扁平化1、 es6中有提供了一个将数组进行扁平化的方法,第一个参数是指扁平深度，（Infinity是指无限次） let res = arr.flat(Infinity)2、 也可先转换为字符串，然后用split转换为数组，然后把数组中的每一个字符串转换为数字类型 let res = arr.toString().split(',').map(item => Number(item))3、JSON.stringify也可以扁平化数组,但是还...
2021-11-03 20:08:41
279
原创 浅拷贝和深拷贝
浅拷贝指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址下面简单实现一个浅拷贝function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj
2021-10-20 11:07:32
70
原创 虚拟DOM（diff算法） 和 真实DOM
虚拟DOM只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应虚拟...
2021-10-20 09:58:01
452
原创 箭头函数和普通函数的区别
1.箭头函数语法上比普通函数更加简洁 -ES6中每一种函数可以使用形参赋默认值和使用剩余运算符（...arg）2.箭头函数没有自己的this，它里面的this是继承函数所处上下文中的this -使用call / apply 等任何方式都无法改变this的指向3.箭头函数中没有arguments（类数组），只能基于...arg 获取传递的参数的集合（数组）4.箭头函数不能背new执行， -因为箭头函数没有this 且没有 p...
2021-10-13 16:23:52
77
原创 call、apply、bind
call和apply的区别，哪一个性能更好？-call 和 apply 都是Function中的方法，所有函数都是Function的实例，两者都可以改变函数的this指向，而bind 也可以改变this的指向，但是函数并不会立马执行，而是先进行预处理call 的性能要比 apply 好一些，特别是当传递的参数超过三个的时候，所有后期开发可以使用call多一些console.time可以测试出一段程序执行的时间开始 ：console.time ('test')结束：consol
2021-10-13 14:48:15
57
原创 js字符串常用方法
1.charAt(index) 1）返回执行index序号位置上的字符 2）index从0开始，最大到字符串的长度-1 3）调用方式： 字符串.charAt(index)2.indexOf(searchStr, startIndex) 1）返回searchStr从startIndex序号开始往后在原字符串第一次出现的位置 2）startIndex可以省略，默认为0，表示从前到后逐个搜索 3）index从0开始，所以，最终的返回结果序...
2021-10-13 11:24:36
202
原创 indexOf 和 lastIndexOf
indexOf和lastIndexOf的使用https://www.cnblogs.com/loveyaxin/p/5629384.htmlindexOf()和 lastIndexOf()是返回位置index的两个方法：都是接收两个参数，其中，indexOf()方法从数组的开头（位 置 0）开始向后查找；lastIndexOf()方法则从数组的末尾开始向前查找；在没找到的情况下返回-1。为了更能清晰易懂，这里故意将数组多添加了几个重复的数字：1. indexOf();1) var n...
2021-10-13 09:56:26
392
原创 Web Worker多线程
主线程想调用分线程，先在主线程中发送postMessage，然后调用onmessage方法接受分线程传回的数据 // 创建一个Worker对象 var worker = new Worker ('./worker.js') // 绑定接受消息的监听 worker.onmessage = function (event) { console.log('主线程接受分线程返回的数据：' + event.data); aler
2021-09-26 10:35:07
251
原创 进程与线程
-进程：是程序的一次执行，它占有一片独有的内存空间-线程：是进程内一个独立的运行单元，是程序执行的一个完整流程， 是CPU的最小的调度单元
2021-09-25 19:45:12
55
原创 闭包的理解
—闭包是 包含被引用变量（函数）的对象—闭包的产生： -当一个嵌套的内部（子）函数引用了嵌套在外部（父）函数的变量（函数）时，就产生了闭包—闭包产生的条件： -函数嵌套 -内部函数引用了外部函数的数据（变量/函数）...
2021-09-25 15:09:35
58
原创 原型链的简单概括
原型链的作用：查找对象的属性\方法-原型链别名：隐式原型链-实例对象的隐式原型对应其构造函数的显式原型-而 Function.__proto__ == Function.prototype,Function.prototype.__proto__== Object.prototype...
2021-09-25 11:33:19
81
原创 NProgress 使用
1.安装NProgress包 npm install --save nprogerss2.导入 NProgress 包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'3.在 request 拦截器中，展示进度条 NProgress.start()axios.interceptors.request.use(config => { NProgress.start(..
2021-09-23 19:24:07
129
转载 element-UI中级联选择器cascader的问题及解决
-使用新版的cascader，通过官网的代码进行修改<el-cascader :options="parentCateList" :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children', checkStrictly: true }" v-model="selectedKeys" @change="parentCa
2021-09-22 11:55:28
1792
原创 vue cli2/3的项目创建
-Vue CLI2初始化项目 -vue init webpack 项目名称-Vue CLI3初始化项目 -vue create 项目名称
2021-07-28 11:10:29
73
原创 vscode中使用webpack
1.点击VSCode图标，选择以管理员身份运行；2.在终端中执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的；3.这时执行set-ExecutionPolicy RemoteSigned；4.此时再执行get-ExecutionPolicy，显示RemoteSigned，则表示状态解禁，可以运行5.此时在vscode终端就可以使用cnpm淘宝镜像了...
2021-07-22 11:33:06
475
原创 CSS(浮动，高度塌陷，clear，渐变，表格表单，过渡，动画，变形，弹性盒)
目录-float-高度塌陷-BFC--解决高度塌陷的方案--解决高度塌陷的最终方案-定位-图标字体-clear-渐变-float - 通过浮动可以使一个元素向其父元素的左侧或右侧移动元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置所有元素下边的还在文档流中的元素会自动向上移动 - 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围 ...
2021-05-17 09:40:30
311
原创 CSS（长度单位，RGB值，盒子模型）
目录一.长度单位二.RGB值-RGBA：在RGB的基础上增加一个a元素表示不透明（1表示不透明 0表示全透明 .5表示半透明） -十六进制的RGB值三.HSL四.盒子模型 - 组成： - width和height是设置内容区的宽度和高度 -边框的设置，需要设置至少三个样式： - 还有border-xxx-width--border简写属性：-内边距（padding）-外边距...
2021-05-13 22:18:43
186
原创 CSS语法（选择器）
css语法一-注释 /* */ （crtl+/）-基本语法： -选择器，通过选择器可以选中页面中的指定元素（p表示页面中的所有p元素） --例：p{}-声明块，通过声明块为指定元素进行设置样式，由多个声明组成 --声明是一个名值对结构（一个样式对应一个样式值） --名和值之间用“：”连接，以“；”结尾二.常用选择器-元素选择器-id选择器（不可重复使用） --元素设置唯一标识id，然后在style里用#加上id名称再加上{}...
2021-05-11 10:56:26
489
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人