前端学习
文章平均质量分 92
我要你好好的。
这个作者很懒,什么都没留下…
展开
-
记VueRouter4.0.0-beta.3在gitee page上的使用问题
Grape UI-gitee page链接tools:Vue-3.0.0、Vite-1.0.0-RC.4 、VueRouter4.0.0-beta.3、Gitee page先抛结果,createWebHistory和createWebHashHistory二者差异导致的。一开始,我用的createWebHistory,在本地yarn dev、hs dist -c-1都没问题,部署到gitee page上network请求也都是200,可#app里没东西,控制台也不报错,如图:调试过程中,页面的表现原创 2020-10-09 15:06:43 · 350 阅读 · 1 评论 -
浅谈面向对象
重新认识JavaScript面向对象: 从ES5到ES6????这篇文写的不错在此之前我先摊牌,我目光狭隘、见识短浅、理解俗套,故以下观(tu)点(cao)权当笑话看就好~作为一名对C++浅尝辄止、对Java只有过一面之缘、对Python的记忆尚停留在pandas和numpy调用上的菜菜子,我万万没想到,众人口中的面向对象指的就是封装、多态、继承。这3个词就已经够装X了,最后还给这3个词戴了个更装X的帽子——面向对象。当然了,本菜菜子也体会不到广大编程人员从C++、Java这些严谨、经典的语言,转入J原创 2020-08-15 03:24:23 · 171 阅读 · 0 评论 -
【翻译】Vue3.0数据响应式
Last updated: 7/19/2020, 1:51:27 AM(官方文档更新时间)Reactivity深入响应式何为响应式?在JS中如何实现数据响应式?检测其中某个值是否发生变化跟踪变化函数触发此函数来更新值Vue如何实现跟踪变化当您将纯JavaScript对象作为data选项传递给Vue实例时,Vue将遍历其所有属性,并使用带有getter和setter的处理程序将其转换为Proxy。 这是ES6支持的功能,但在我们提供Vue 3.0中,使用较旧的Object.defineP翻译 2020-07-29 01:52:42 · 367 阅读 · 0 评论 -
Change http://localhost into https://localhost(本地开发环境http转https)
In fact, I’ve never thought this question before yestoday. But, I truly met this problem in yestoday’s interview. Don’t be afraid, I’ll just translate a article in FreeCodeCamp. So, are you scared by me?hhhhhhh有木有被吓到?有木有?哈哈哈哈哈哈哈~接下来,开始我的同声传译????原文传送门5分翻译 2020-07-25 03:09:17 · 1444 阅读 · 0 评论 -
React踩坑之useState的两次渲染
问题背景,函数组件中使用useState后,console.log发现组件重复渲染。一开始我以为是useState的问题,经查验,发现是index.tsx里<React.StrictMode>的坑ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));以下内容,摘自react官网,如果你很忙可原创 2020-07-11 01:45:48 · 7115 阅读 · 0 评论 -
proxy学习笔记整理
proxy(代理)亦可理解为发言代表syntax: const proxy = new Proxy(target, handle)释义:proxy是生成的发言代表,target是需要被代表发言的对象,handle是发言代表需要遵守的规则,也是一个对象。先抛一个小例子,热热身:const obj = {a:1}const handle = { get: function(target, propKey){ return '我就不告诉你!' }}const proxy = new Pro原创 2020-07-05 16:10:34 · 403 阅读 · 0 评论 -
函数组件相关Hooks API
React在v16.8.0推出了Hooks API,是函数组件也能模拟生命周期进行一些操作。这里对一些常用的hooks API做了下整理:useState注*:! 不可局部更新(对应类组件setState的shallow merge)! setN(obj)如果obj地址不变,则react就认为obj没变,不更新! useState可以接收函数,useState( () => { return initialState } ),该函数返回初始state,只执行一次! setN也可以接收函数,原创 2020-07-05 14:59:21 · 288 阅读 · 0 评论 -
类组件相关及生命周期钩子学习笔记整理
setState的两种写法:①this.setState(newState, fn)②this.setState((state, props)=>newState, fn)(推荐)原因如下:①因为setState是异步的,当需要对结果再次使用时,this.state.prop获取到的依旧是旧数据,这显然不是用户想要的;②当返回的newState很复杂,中间需要很多数据操作时,用函数的方式返回newState,更稳妥。注*:setState时,会自动执行shallow merge(一层合并)原创 2020-07-05 14:50:48 · 228 阅读 · 0 评论 -
Parse HTTP Request Params(the API for parsing Chinese)
这是之前字节的面试题,本来打算下来用正则试试,结果发现多条参数匹配正则很麻烦,当时不知道怎么解析汉字,下来查到了解析汉字的API。浏览器会将url中的中文参数进行encodeURI编码,解析就用decodeURI。function getQuery(){ let query = new Map(); let arr = window.location.search.substr(1).split('&') for(let i=0;i<arr.length;i++){原创 2020-07-02 01:00:20 · 196 阅读 · 0 评论 -
React组件的两种创建方式
元素与组件创建元素const div = React.createElement('div',...)创建组件const Div = ()=>React.createElement('div',...)组件可以理解成,一个创建元素集合的模板,当前我可能不需要它生成什么东西,但我调用时,它能帮我生成我要的东西。在React中,组件的创建方式有两种,一种是类组件,一种是函数组件。二者在进行props读取时,也有不同。下面以+1实例来说明二者不同之处。类组件class A extends原创 2020-06-29 01:08:12 · 240 阅读 · 0 评论 -
关于Vue响应式原理的一点思考
以下是看Vue官方文档的一点笔记及思考关于这两种Object.assign的方法,乍一看很迷惑,我寻思着效果不是一样吗?不信你看下面的实验:其实单独看这两种操作,就是把地址变了一下,地址对应的内容是一样的,但一个地址对应的数据可全部响应,一个则只能响应旧数据。为了看看到底咋回事,我就去现场试了试,结果还真是!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-06-20 01:22:33 · 94 阅读 · 0 评论 -
Vue项目中TS引入多个.svg文件的总结
背景:Vue-CLI创建的项目,想要用自定义的icon,icon是在阿里icon-font下载的svg文件,直接使用import xxx from '@/assets/icons/xxx.svg'TS编译报错,称无法找到此模块(插播一条小百科:svg 是使用 XML 格式定义图像)。StackOverFlow上有人提出,在项目文件中添加一个custom.d.ts的文件,写上以下内容:declare module '*.svg'{ const content: string; export de原创 2020-06-19 18:51:40 · 2133 阅读 · 3 评论 -
Vue插槽总结及一点思考
Vue-slot插槽的作用,就是给引用者一定的自我发挥空间,在引用组件内部,添点自定义的东西。插槽内允许填充后备内容,为没有提供内容的引用作兜底显示。v-slot只能用在组件标签或template标签上!匿名插槽匿名插槽有隐含的name: default。但我们往往不写,同时引用的子组件中,可以一次使用多个匿名插槽,但不建议这么做,毕竟渲染出的内容一模一样。具名插槽一个组件可以用多个具名插槽,具名插槽提供缩写#slotName,匿名插槽如想使用此写法即用#default。作用域插槽可以让父原创 2020-06-17 16:16:37 · 347 阅读 · 0 评论 -
Echarts数据实时更新
转载原博链接最近用饼图做每个月的消费占比,出现了更新月份,两个月数据合并了的bug,一开始以为是逻辑错了,可是检查逻辑又没啥问题,后来多次测试,才发现是Echarts数据不随data实时更新,而是直接合并。解决原理以及方案:官方文档setOption方法传参如下:setOption(option, notMerge, lazUpdate)可以看到第二个参数,表示合并,这里表示是否option合并数据,默认值为false,这就是为什么数据源条数变化了,而图表数据条数缺没发生变化,正确姿势是setO原创 2020-06-15 11:12:33 · 6278 阅读 · 0 评论 -
将 Vue CLI 静态资源部署至gitee上的坑
官方文档写的非常好!!!照着做基本没问题!!!(至少我第一次用的时候没问题)后来,我把项目重新改了改,也不知道是动到了哪~,打包以后,用serve -s dist本地查看dist就报了这几条错误。我寻思着前前后后,我改动过的配置,就是引入ant design vue的时候,在vue.config.js里添加了less loader的规则,难道~?算了,说正经的报错原因如下:在vue.config.js里,对publicPath进行了如下配置,在本地环境中,这个 JS 的路径是不存在的!但是在 G原创 2020-06-15 00:50:39 · 933 阅读 · 1 评论 -
Vue父子组件传值之.sync
首先,讲讲.sync的来历,在项目中常有父子组件传值,子组件修改父组件数据的需求,而Vue是不允许子组件直接修改操作的,直接红牌警告:于是乎,有了以下操作:子组件在props中声明,与父组件商量好的传值暗号xxx(用来作为传递值的别名)子组件通过触发一个事件来告诉父组件:“我要改xxx对应的值!”(this.$emit('update: value', this.xxx=yyy))父组件在引用子组件时,在其标签内通过:xxx='local_value' @update:value='local_原创 2020-06-06 17:56:37 · 1782 阅读 · 0 评论 -
修改ant design组件自带样式
背景Vue-CLI创建的项目需求把走马灯的面板指示点(如图1)改成真正的点(如图2)解决方法走马灯自带面板指示点类名dotsClass = "slick-dots",考虑到项目中可能多处会用到走马灯,请自行更改类名(我的项目只有一处用到,故不想改)在src/assets/style/(这个是我用来放全局样式文件目录)下新建一个.css文件(其它类型的stylesheet文件也可以用,但我没试过),再次强调,如同一组件须多次使用、且样式要求不同,请自行更改类名,样式文件也请分开创建,注意互相原创 2020-06-05 17:45:03 · 5336 阅读 · 2 评论 -
关于ant-design-vue安装报错的解决方法
版本[email protected]@6.1.0解决方法在vue.config.js里加入解决~ module.exports = {+ css: {+ loaderOptions: {+ less: {+ lessOptions: {+ javascriptEnabled: true+ }+ }+ }+ } }下面是我的吐槽,可以不看说来也是无语,按照官原创 2020-06-04 14:39:50 · 4933 阅读 · 0 评论 -
console用法
chrome打印出的consoleconsole.log()console.info()console.warning()console.error()以上4个都是信息打印,只是信息类型不同罢了!console.debug()输出“调试”级别的消息,且仅仅控制台为显示调试输出时才显示该消息。(是滴~ 我看不见,被隐藏了~)console.dir()打印出指定JS对象的属性。这个列表可以使用三角形隐藏和显示来审查子对象的内容。当你发现log满足不了你的需求时,用原创 2020-05-27 01:45:13 · 1688 阅读 · 0 评论 -
再会webpack,拨开云雾见月明
第一次用Webpack是实战Vue+Webpack打造todo应用中,当时想快速上手Vue-CLI,再加上对Vue和Webpack都不算太了解,初体验挺难受的。毕竟从无到有的接受新知识,很懵逼,再加上使用的版本号和老师的不一样,有的API改了,一路下来自己解决报错真的超崩溃。但不得不说,正是因为难受,印象才会如此深刻。通过后续的学习,以及其他知识慢慢铺开,才知道为什么要用这些包(知道一个东西有什么作用很简单,但作为学习者,我们更要知道为什么需要有这个作用的东西)。这里整理了常用的包,及其官方使用文档链接,原创 2020-05-22 02:32:03 · 126 阅读 · 0 评论 -
用+1功能的代码实现带你感受MVC
MVCMVC的解释千千万,唯一统一的认识就是MCV分别指model、view、controller,其它的咱也不知道对错。我理解的MVC,就像行为与样式分离,是把业务按照M、V、C的功能进行解耦:model用来管理业务逻辑相关的数据以及对数据的处理方法view用来展示model里数据的当下状态,并实时跟随model更新controller负责接受并响应view上用户的交互行为以及对model内部数据进行操作刚学编程时,为了完成一个功能,我们想到什么写什么,只要最后能凑出来就成。这种代码常称为原创 2020-05-21 18:56:52 · 147 阅读 · 0 评论 -
跨域及其解决方案
同源策略window.origin&&location.origin源=协议+域名+端口号差一个字都不行浏览器默认不允许跨域,保护用户隐私解决方案一:CORS(cross origin resourse share)响应头:Access-Control-Allow-Originresponse.setHeader(‘Access-Control-Allow-Origin’,request.headers[‘referer’])解决方案二:JSONPIE6-10全不支持COR原创 2020-05-11 00:30:03 · 293 阅读 · 0 评论 -
初识jQuery设计模式
jQuery诞生十多年了,虽然很多人都说jQuery已经out了,但其中经典的编程思想依旧受到众人的推崇,结合阮一峰的jQuery设计思想,这里谈谈自己get到的一些点。别名window.$ = window.jQueryjQuey.fn = jQuery.prototype看似作用不大,但满足了一些使用者的便捷需求getter/setter这里贴段我自己写的$().css()小样,用...原创 2020-05-07 01:51:57 · 132 阅读 · 0 评论