- 博客(75)
- 收藏
- 关注
RSS订阅转载 vue3 provide 和 inject 底层组件的值不是响应式的处理
但是，直接在setup根节点处传递，由于数据是异步获取的，直接传递时数据是还没有值的，传递过去的都是声明时的初始值。解决：使用方法包装需要传递的值，然后provide()传递过去的是方法，inject()时通过方法调用获取值。3.父组件值更改后，子组件的值不具备响应性。
2023-08-21 17:44:23
728
原创 vue3 provide 和 inject 底层组件的值不是响应式的处理
前景提示:在学习provide和inject是发现一个问题就是顶层组件使用功provide传递的值在基层组件中使用inject接收后不是响应式的,如下代码所示。博主的文章给予的帮助,在这里贴上链接,里面的内容更加的全面,大家有相关问题可以查阅。
2023-08-21 17:37:49
1007
原创 [] == ![] 结果为true是为什么?
抽象相等运算符会将其两端的表达式转换为数字值进行比较，尽管这个例子中，左右两端均被转换为 0，但原因各不相同。数组总是真值（truthy）,因此右值的数组取反后总是为 false，然后在抽象相等比较中被被类型转换为 0。而左值则是另一种情形，空数组没有被转换为布尔值的话，尽管在逻辑上是真值（truthy），但在抽象相等比较中，会被类型转换为数字 0。
2023-02-08 21:38:21
166
原创 微信小程序的template模版和component组件有什么区别
模板创建：建议单独创建template目录，在template目录中创建管理模板文件。由于模板只有wxml、wxss文件，而且小程序开发工具并不支持快速创建模板，因此就需要直接创建wxml、wxss文件了，一个template的模板文件和样式文件只需要命名相同即可。2. 组件编写：新建的component组件也由4个文件构成，与page类似，但是js文件和json文件与页面不同。组件则有自己的业务逻辑,可以看做事一个独立的page页面,简单来说,如果只是作为展示,使用。模版这两者执勤啊的区别是,
2023-02-08 19:18:54
336
原创 javascript设置颜色值的几种方法
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。本文链接:https://www.ngui.cc/51cto/show-560265.html。S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0% - 100.0%A：Alpha透明度。
2023-02-08 16:34:12
2460
原创 小程序和H5页面的相互跳转
小程序跳转H5页面是通过web-view组件来实现的，web-view是一个可以用来承载网页的容器，会自动铺满整个小程序页面，也就是说h5页面的跳转是在小程序的环境下打开的。需要在小程序里建立一个空白页，放置webview用来展示H5页面。微信新增小程序跳转按钮：wx-open-launch-weapp（具体用法可参考 官方文档 ）。用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序.
2023-02-07 15:32:37
2914
原创 节流和防抖
作用:是为了解决js的抖动问题什么是js的抖动?js的一些特殊的事件在触发的时候事件回调函数会持续触发.(input/resize/频繁的点击事件),这样影响性能,浪费网络资源防抖事件在持续触发的时候事件回调函数不会执行,只有在停止触发事件后特定的时间才会在执行时间回调函数.节流事件在持续触发的时候,事件回调函数以间隔固定的时间执行实现代码// 防抖let $btn = document.getElementById('btn');$btn.onclick = debounce(lu
2021-07-28 20:12:39
80
原创 实战element 的rate使用iconfont图标
问题背景在项目开发过程中需要使用到一个评分的功能,项目使用的element 的框架,所以首选肯定就是自带的rate的组件,但是在rate的介绍中默认的一般都是星星的icon,自定义的icon 也都是直接框架自带的icon的所有的图标,但是都不满足自己的需求,这是发现rate可以支持使用iconfont 的图标,但是按照框架中的介绍使用并没有实现,在查了资料之后发现还是有一些注意点的,这里记录一下方便日后的学习.iconfont的使用这里就不过多的介绍了,只需要将自己需要的图标实现一下的步骤即可,这时候编
2021-07-22 19:46:24
626
原创 webapp监听手机物理返回键，返回上一页面或者关闭app
配置文件1.项目下建文件夹commonFunction->physicBackListener.js编辑代码2.这个js文件内复制代码： var webview = plus.webview.currentWebview(); plus.key.addEventListener('backbutton', function () { webview.canBack(function (e) { if(e.canBack){
2021-07-22 19:45:18
795
原创 git配置秘钥关联github以及每次命令操作都需要输入密码的解决
配置用户信息配置个人的用户名和电子邮件地址:$ git config --global user.name "yourName"$ git config --global user.email "yourEmail"检查已有的配置信息$ git config --list在实际的工作使用过程中git 结合github 使用时需要配置秘钥,下面介绍git 生成秘钥1.生成秘钥$ ssh-keygen -t rsa -C "自己的github账号"出现下图说明秘钥配置成功,在这
2021-07-22 19:44:05
919
1
原创 git 介绍以及两个库的概念
git 工作区,暂存区和版本库基本概念工作区:就是我们电脑里面可以看到的目录暂存区:stage或者index,一般存放在.git目录下的index文件中,也叫做索引.版本库:工作区有一个隐藏的目录.git,这个就是Git的版本库.以下的图示可以非常清晰的说明三者之间的关系:...
2021-07-22 18:59:34
322
原创 Git常用命令总结
1. git使用总结git简单的介绍1.git是一个开源的分布式的版本控制系统,用于高效的处理任何的大小项目.2.git的安装很简单,这里不介绍,可以直接百度,之后再使用git -v来查看是否安装成功(成功会显示对应的git的版本号)一般安装很无脑直接下一步下一步就可以,不管是window还是mac都需要在安装的过程中作文和的修改配置用户名邮箱1.直接从官网上下载Git 安装,在开始菜单查找git bash ,说明安装成功2.设置 2.1 git config --global
2021-07-22 18:59:03
262
4
原创 不建议在{}代码块内部声明变量或函数( 严格模式 )
如何理解ESLint的no-inner-declarations规则？问题描述:项目使用了eslint检测代码的规范性,在编译代码的时候commit 报错( Move function declaration to function body root (no-inner-declarations) at xxxx )代码如下://解析:在处理场景中是在条件满足的时候才会执行函数中的代码,if (true) { // 在某个条件分支下创建一个函数，并且只在这个分支内使用。 funct
2021-07-22 18:58:00
3506
原创 Element UI table表格实现列宽随内容自适应
默认显示格式如下：<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-col
2021-07-21 20:16:44
4464
2
原创 element UI 事件回调函数传参,传递默认参数和自定义参数的解决
问题: 在使用element UI 的组件的时候,事件回调有默认的参数,想要再添加自定义的属性.解决方案change事件默认的参数是select绑定的v-model的数据作为回调函数的参数,如果想要在添加自定义的参数,change(‘自定义’)直接写那么自定义的参数会覆盖默认的参数(已办这个默认的参数也会是我们需要的参数),所以需要change(‘自定义’, $event)这个也是经常遇到但是也是会忽略的问题,在这里记录一下,好记性不如烂笔头....
2021-07-21 20:15:53
919
原创 el-select样式两种修改方式index.html或popper-append-to-body加popper-class
el-select样式两种修改方式index.html或popper-append-to-body加popper-class记录一下,博主整理的很是明朗,在此记录一下,方便以后查找,感谢博主的输出,问题描述饿了么UI自带的样式有一般也够用，不过有时候我们需要修改一下样式使其更加美观，本文记录一下修改el-select的样式的方式，记录一下，忘了的时候回来看看问题分析下拉框可以分为两部分，一部分是‘框’部分，另外一部分是‘下拉’部分，平常我们修改下拉框样式，无外乎就是修改这两个部分，如下图所示修
2021-07-21 20:15:17
3310
1
原创 修改scoped下的element的样式不生效的问题
最近项目结束了,在优化的时候主要是调整一些样式的问题,项目中使用的是element的组件在使用tooltip/dialog组件的时候,修改样式发现没有生效,在结合广大网友的智慧之后,发现了三种实现方式但是各有优缺点,在这里记录一下,便于日后的使用.动态添加组件的层级并不是在使用的地方,而是和我们的app是在同一层级的,所以直接scoped中改是不会生效的第一种自定义一个公共的css配置文件,提前设置固定的css样式在使用@import引入使用优点:这样的好处就是全局的样式不受当前组卷scoped
2021-07-21 20:14:42
1549
原创 vue-Vant自动引入样式不生效问题
vant官网链接安装依赖包1.确保安装了Vant和babel-plugin-import修改babel.config.js配置2.如果上面都做了，看下babel.config.js是否配置在文件中使用(如果是全局引入的不需要这样写)3.确保下图红框中导入，（ [Button.name]: Button,）这个是官网没有说明的一点，需要个人添加，，要不然爆红在这里插入图片描述问题总结4.最后出现没有样式有两点;1.安装了babel-plugin-import依赖需要重新启动项目，重新
2021-07-21 14:22:44
875
原创 webpack的 rquire.context用法实现工程自动化
最近仿写一个项目,如下目录,base内部都是一些基础的组件,但是并没有在main.js 中使用常规的方式去全局注册的,刚开始还不明白没有注册的组件怎么在全局使用的项目目录//main.jsimport global from './utils/global'Vue.use(global)//解释:如果自动化的代码直接写在一个js文件中直接全局的引入main.js 中也是没有问题的,//但是这里是按照自定义插件的方式写下global文件中的就要使用vue的use方法自定义global插件,通
2021-07-21 14:19:57
214
1
原创 NPM 国内慢的问题解决
npm 是我们在安装nodejs是一起安装的包管理器,但是在国内使用一般速度会比较慢我们可以使用淘宝镜像的方式来安装包加快速度.使用说明npm install -g cnpm --registry=https://registry.npm.taobao.org这样我们就可以其使用cnpm 来代替npm 安装包了cnpm install [name]...
2021-07-21 14:19:29
87
原创 配置文件过程中的总结与webpack.config.js和vue.config.js的区别
webpack.config.js和vue.config.js的区别webpack.config.jswebpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都是可以创建这个文件使用的,Vue /react项目都可以.vue.config.jsvue.config.js是Vue项目的配置文件,通过这个文件配置Vue项目中常用的功能,简化了配置工作,也可以直接写一些关于webpack的配置,当然如果需要更加专业的配置,这两个文件在Vue的项目中也是可以共存
2021-07-21 14:18:56
2120
原创 webpack入门须知
webpack在前端小项目日趋复杂的今天,项目的打包,运行,上线可以这么的方便都要归功于webpack.对于webpack我们是即熟悉又陌生,熟悉是因为我在开发的每一个项目的时候都会用到它,陌生是因为我们对于其中的复杂的配置与功能还是不熟悉,在面试的过程中我们可能也会回答出一些常用和熟悉的loader 和 plugin但是对于他的运行机制和实现原理还是不清楚的,所以我在这里记录下自己的学习过程和总结.浏览器其实浏览器只可以识别像.html , .css, .js, .png , .jpg…
2021-07-21 14:18:22
98
原创 async/await的基础用法
更详细的解释文章详解转载地址一、async/await的优点1）方便级联调用：即调用依次发生的场景；2）同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；3）多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通
2021-07-21 14:15:13
143
原创 vue 使用vue-mate
网站的访问流量中，有相当一部分都是来自于搜索引擎，而来自于搜索引擎的流量又全部是免费的，所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接且最有效的手段。而SEO往往又都是从优化meta标签开始的！1.元数据元数据是指从信息资源中抽取出来用于说明其特征 , 内容的结构化数据(标题,版本,…)2.mate介绍 (元数据)mate标签是介绍html 文档的信息, 是html语言中header区的一个辅助性标签,提供的信息是用户不可见.
2021-07-20 16:32:38
733
原创 vue 报错 :Error in render: “TypeError: Cannot read property ‘length‘ of undefined“
问题报错:Error in render: “TypeError: Cannot read property ‘length’ of undefined”在vue的template 中使用length 进行判断出现如上的报错 <div class="com" v-if="comment.hotComments.length > 0">解决办法:<div class="com" v-if="comment.hotComments !== undefined &&am
2021-07-20 16:31:33
1217
原创 vue父子组件的渲染问题
今天自己在仿写网易云音乐的项目时,遇到一个问题,在使用一个播放的组件的时候,需要把父组件的url 传递到子组件使用,但是子组件获取到的url一直是undefined.问题分析:1.数据获取是异步请求2.父子组件传值也是异步的直观一点直接看代码:template://父组件 <div class="video"> //子组件先与数据回来执行,所以拿到的url是undefined //<Playcard ref="video" :url="Url
2021-07-20 16:31:00
430
原创 vue过滤器
在vue.js中可以自定义过滤器用于一些常见的文本格式化,过滤器可以用在胡子语法和v-bind表达式,过滤器是javascript 函数,由管道符号 |表示在template 中的使用<!-- 在双花括号中 -->{{ message | capitalize }}> message 作为 capitalize过滤器的第一个参数<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></d
2021-07-19 19:58:49
63
原创 axios的请求拦截与相应拦截
问题:1.请求携带token2.全局的请求loading解决:解决携带token问题 --初次登陆获取token保存在本地1.每一个需要token的请求都携带token,但是代码重复很多,request.Gethighquality = (params) => { return request.get('/top/playlist/highquality', { params, headers:{Authorization: localStorage.getItem('token'
2021-07-19 19:58:19
151
原创 vue .sync 修饰符
作用:.sync 修饰符作用: 让子组件可以更加优雅的修改父组件的data单向数据流所有的prop都是其父子prop之间形成一个单向下行绑定,:父级prop的更新会向下流到子组件中,但是反过来是不可以的(不可以在子组件中修改父组件传递的prop),这样会防止从子组件以外的改变父组件的状态,导致数据流向难以理解prop使用正常情况下,1.我们可以直接在template中使用prop的值 2. prop传递一个data的初始值,使其作为一个本地数据使用 3. 在计算属性中这个prop 作为一个初始值进
2021-07-19 19:57:48
128
原创 vue 4.x项目console.log()打印报错问题
vue4.x的项目 正常使用console.log(data) ,一直报错,但是使用window.console.log(data),又没有问题,虽然可以使用但是每次打印的时候很是麻烦原因: 创建项目的时候使用了ESLint检查代码质量的提示,解决: 关闭ESLint 的检查这样就可以了...
2021-07-19 19:57:14
372
原创 vue-Vant自动引入样式不生效问题
vant官网链接1.确保安装了Vant和babel-plugin-import2.如果上面都做了，看下babel.config.js是否配置3.确保下图红框中导入，（ [Button.name]: Button,）这个是官网没有说明的一点，需要个人添加，，要不然爆红在这里插入图片描述4.最后出现没有样式有两点;1.安装了babel-plugin-import依赖需要重新启动项目，重新启动项目，刷新页面就会出现2.第一个方法不行，就看看项目结构里有没有vue.config.js，根据网上查
2021-07-19 19:56:41
3153
原创 vue 基础指令记录
Vue 中的 真值 , 代表一切显示为真的值(不单单只是指true);v-if 是一个语句 , 所以只能添加在一个元素上 , 如果现根据条件渲染多个元素 , 可以使用一个template标签包裹起来v-else 指令必须紧跟在v-if 或者是 v-else-if的后面 不然是不会被是识别的vue 中会尽可能高效的渲染元素,通常会复用已有的元素,而不是从头开始,但是如果需要允许用户可以切换登录的方式 , 那么<!-- vue 会高效的复用已有的元素,而不是从头开始 , 如下面的例子,只有.
2021-07-19 19:56:04
175
原创 vue 新增属性 $attrs及$listeners (组件通信)
介绍:vue组件之间的通信方式有很多种,props/emit , event bus, vuex, provide/inject等,还有一种通信方式就是 $attrs和 $listeners,下面通过一个三代组件的关系来看一下这两个属性$attrs包含了父作用域中不作为prop识别的特性绑定(除了class 和 style ),如果没有声明prop ,就会包含父作用域所有的绑定,传入内部组件简而言之就是 接收除了props声明外的所有绑定属性(class , style 除外)//一级 ----
2021-07-19 19:55:30
254
原创 Vue Loader 之 Scoped CSS 与热重载的影响
前情介绍其实在学习已经使用Vue这么久以来从来没有认真的看过Vue Loader生态系统的详细介绍,之前在工作中使用第三方的UI插件的时候难免有时需要自定义一些样式,但是每次在实现的时候对于>>> , /deep/,还有新遇到的v-deep的用法原理都不是很了解,每次都是在三种方式中尝试,很是无脑,后来一次偶然的机会看到了Vue Loader中的油相关的介绍,当时没有详细的看,但是内心已经种下了一颗要系统学习一遍的种子,所以今天的任务就是过官网,并且在这个过程中记录下自己的笔记,废话不多
2021-07-19 19:54:56
243
原创 在Vue项目中实现签名
经常在银行的业务或者是电子合同的签署是会有签名的场景,就想看一下怎么实现,但是自己对于canvas并不是熟悉的,在这里记录一下这个写法代码配置<template> <!-- 手写签名组件 --> <div class="page sign-page"> <div class="content"> <div class="sign-wrap" id="signWrap"> <canvas id.
2021-07-19 19:54:20
2294
1
原创 vuecli3.x 的 配置文件 vue.config.js
使用Vue搭建了一个移动端的项目(没有配置vue.config.js),运行后使用pc端浏览器可以正常打开,但是使用hbuilderX使用手机浏览器运行的时候显示的白屏,原因是资源的路径加载错误,所以就配置一个vue.config.js文件修改publicPath为"./"就可以了,在这里整体的上传一份vue.config.js的配置文件留作记录代码配置const path = require('path')const resolve = dir => path.join(__dirname.
2021-07-19 19:53:42
207
原创 new Date()基本使用
new Date()获取带有格式的时间单独调用new Date(); 显示这种格式 Mar 31 10:10:43 UTC+0800 2012 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth
2021-07-18 20:21:11
31296
原创 javascript的算数运算符前自增和后自增的特点
写法:前自增: ++num后自增:num++特点共同点:对于变量自身而言是没有任何影响的,都是在自身的基础上+1不同点:在变量的赋值过程中,前自增是先自增在赋值,后自增是先赋值在自增常规示例var num = 10;var res = ++num;console.log(num); // 11console.log(res);// 11var num1 = 10;var res1 = num1++;console.log(num1); // 11console.l
2021-07-18 20:20:49
259
原创 使用reduce实现随想转数组,数组转对象
使用reduce实现随想转数组,数组转对象let obj = { 1:'aa', 2:'bb', 3:'cc', 4:'dd',}let obj_1 = [ { label:'name', value:'xioaming' }, { label:'age', value:12 }]let result_1 = obj_1.reduce((aa,itm)=>{ aa[itm.label] = itm.value; ret
2021-07-18 20:20:01
360
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人