JavaScript
龟霸也是高达
Github主页:https://github.com/gitgundam
展开
-
解决使用uniapp的echarts,格式化文本formatter无效的问题.app中没变化,h5中有效果
在使用uniapp的echarts时,我们一般都是使用的randerjs就是下面这些代码<script module="echarts" lang="renderjs">let myChartexport default { mounted() { if (typeof window.echarts === 'function') { this.initEcharts() } else { // 动态引入较大类库避免影响页面展示 const script =原创 2021-05-21 13:11:06 · 4407 阅读 · 4 评论 -
vue3中消失的.sync去哪了呢?原来变成v-model了!!!
在vue2.x中,子传父是这样的父组件父组件监听自定义事件update:title<template> <div class='Father'> 这个是父组件 {{count}} <Son :title="count" @update:title="(e)=>count=e"/> </div></template>子组件子组件发射自定义事件update:title <div class原创 2021-03-30 16:04:46 · 2572 阅读 · 1 评论 -
使用react初步实现一个购物车小组件
使用react初步实现一个购物车小组件下面是完成的状态下面是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g原创 2021-03-03 18:01:49 · 258 阅读 · 0 评论 -
四种方法改变react组件中方法this的指向
改变react组件中方法的指向在react的class中(一般用class作为构造函数的语法糖),我们经常会遇到引用方法的情况,比如下面这个demo:他的效果是,当我点击按钮,控制台输出’这个是信息’ class App extends React.Component { constructor(){ super() this.state = { } } render(){ ret原创 2021-02-25 02:32:44 · 808 阅读 · 1 评论 -
jsx的属性绑定
jsx的state可绑定到html的属性上html的属性后面使用{}符号来绑定react组件中的值<script type="text/babel"> class App extends React.Component { constructor(){ super() this.state = { title:'这个是标题' } } render(){原创 2021-02-23 03:27:52 · 954 阅读 · 0 评论 -
总结下关于使用React中的JSX的一些细节
jsx的细节最近在学react,而react的核心概念是万物皆js,而为了使用这个概念,react引入了jsx,将html的标签结合进js中jsx的书写规范JSX的顶层只能有一个根元素所以我们很多时候会在外层包裹一个div原生,我经常使用vue 的template,这点和template很像,最外层只能存在一个标签.(但是这点在vue3中改变了,vue3 的template我测试了下,可以放好几个标签,不用在最外层包裹一个)jsx可以使用括号()来换行下图中的return里放进去的是html标签原创 2021-02-22 23:19:32 · 228 阅读 · 0 评论 -
echarts x轴怎样不从0开始
记一下记一下,都是试出来的,记一下不然忘了原创 2021-01-14 13:18:38 · 583 阅读 · 0 评论 -
如何在Vue3中使用router
如何在Vue3中使用router//在vue的js或ts文件中引入vue-router的方法import {createWebHashHistory,createRouter} from 'vue-router'官方提供 createWebHashHistory和 createRoutercreateWebHashHistorycreateWebHashHistory 指哈希模式createWebHistory指history模式无论哪一种都需要在路由实例中做出设置createRou原创 2020-12-19 02:54:53 · 1637 阅读 · 3 评论 -
[手写系列]使用原生js造一个简易的React轮子
今天就手写一个简单的React造轮子能让我们更加深入理解React及其思想.JSX是JavaScript语法的扩展,用于形象的描述一段DOM结构众所周知,react使用jsx,大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法,<div />会被编译成React.createElement('div')在 JSX 中你可以任意使用 JavaScript 表达式,只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象,你原创 2020-12-01 14:21:16 · 369 阅读 · 0 评论 -
[手写系列]手写一个JSONP
写一个JSONP好久没写了,现在觉得还挺简单的…原理就是服务器返回告诉浏览器运行预先设置好的函数啊,一个是你让浏览器执行函数,一个是你告诉服务器再告诉浏览器执行函数,没啥区别.思路因为浏览器不能跨域,但是不禁止script标签加载不同源的网站,script标签随便加载.那么就可以用script发送不同源的ajax请求测试先用node写一个服务器,端口8888监听请求写了肯定没人看,还是截图直观,一看就懂terminal node执行,测试成功开启好了现在随便找个能写script的页面测原创 2020-11-26 11:08:23 · 225 阅读 · 0 评论 -
做了个一个简单的id计数器
最近项目里有个需求,新建项目,然后每个项目生成一个id,点击项目进入二级页面,这个二级页面的路径通过id来区分那么就这样写:设i初始值为0每次新建项目+1但问题是如果每次刷新页面,i会重新变为0,又会重新计数,id就不是唯一id那么将i存进localstorage中,每次生成先查找,没有缓存那就是0,有那就原有的基础是+1封装下导出用ts写的let id: number = parseInt(window.localStorage.getItem('_idMax') || '1') ||原创 2020-11-20 09:14:57 · 212 阅读 · 0 评论 -
Vue非父组件之间的通信
Vue非父组件之间的通信假设子组件A向子组件B传递信息现在Vue实例中的data中设置名为bus 的Vue实例中介.子组件A在设置监听事件,并设置方法,子组件A的方法为(假设点击事件),通过$root.bus.emit()提交当前的信息给子组件B的自定义事件子组件B通过声明周期钩子,通过created,在实例刚创建的时候,监听这个函数,通过$root.bus.$on('自定义事件',function(value){})接收一个子组件A的参数value通过公共的Vue实例bus总而言之子原创 2020-10-22 14:38:59 · 90 阅读 · 0 评论 -
Vue组件的使用方法
Vue组件的使用方法Vue组件化思想组件化是Vue中的重要思想他提供了一种抽象,让我们可以开发出一个个可复用的小组件来构造我们的应用任何应用都会被抽象成一颗组件树组件化思想的应用尽可能的将页面拆分成一个个可复用的小组件方便代码管理,可复用性强注册组件的基本步骤组件使用分为三个步骤1.调用Vue.extend创建构造器传入template代表我们自定义组件的模板,该模板就是使用到组件的地方,要显示的html代码2.Vue.component() 注册组件(全局注册和局部注册)原创 2020-10-22 11:30:44 · 274 阅读 · 0 评论 -
Vue中的v-model的相关
v-modelVue提供了v-model指令,用于双向绑定事件v-model双向绑定data内的数据,当修改input表单内的内容时,data的数据也会发生变化,当data内的数据发生变化时,表单内容发生变化如果使用v-bind:value使表单绑定data数据,当data数据发生变化时,表单内容会变化当表单内容变化时,data数据不会改变因此,使用:value绑定表单,这是单向绑定可以使用绑定表单的内置事件 v-on:input 来改变data数据实现双向绑定(绑定当前点击事件的valu原创 2020-10-16 15:24:04 · 251 阅读 · 0 评论 -
Vue中的各种内置指令
Vue中的各种内置指令基本指令v-cloak网速特别慢或者遇到其他加载问题时,浏览器会先展示dom文本,然后再加载内容,给用户提供很差的体验.体验差,那还不如直接白屏,再出现渲染完的内容v-cloak可以解决画面闪动的问题因为v-cloak在Vue结束编译时,从HTML元素上移除.还未编译完成就一直存在所以让v-cloak的元素一直存在的时候,隐藏html元素.这样用户在页面还没加载完的时候看到的是空白v-once定义它的组件或元素只渲染一次所以后续再怎么改变都不会再重新渲染条原创 2020-10-15 23:14:10 · 391 阅读 · 0 评论 -
v-on参数传递问题和修饰符的作用
v-on参数传递问题<div @onclick='getTarget'>点击</div>//下面是vue实例methods属性的内容methods:{ getTarget(){}}当通过methods定义方法,以供@click调用时,需要注意参数问题情况一如果该方法不需要额外参数,那么方法后面的()可以不加但是需要注意,如果方法中本身有一个参数,那么默认会将原生的event事件对象作为参数传递进去.情况二如果需要同时传入参数,又同时需要用到event时原创 2020-10-14 18:05:31 · 178 阅读 · 0 评论 -
v-bind以及class与style的绑定
v-bindv-bind的作用,是绑定活的属性!绑定class 的几种形式对象语法绑定class对象语法:对象的键是类名值是布尔值就像下面这么写<div :class = "{active: isActive, box: isBox}"></div>//active和box是类名,isActive和isBox是布尔值,控制类名是否出现在class上isActive和isBox的布尔值直接储存在data中,如果是true,那么就有这个属性,如果是fals原创 2020-10-14 11:16:15 · 195 阅读 · 0 评论 -
Vue的计算属性
Vue的计算属性什么是计算属性?首先,按照名称,计算属性是用来计算的其次,他是个属性因此,早vue 中,一般处理文本的计算方法叫做计算属性所以,计算属性的引用一般都是取名属性的名字下面的demo中,两个结果都是一样,都是反转一列数字,但是用computed的方法更简洁直观.<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</tit原创 2020-10-13 18:32:48 · 220 阅读 · 0 评论 -
初识vue,了解他的一些基础
vue的实例和数据绑定开发环境的搭建<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>一般来说,我们可以使用构造函数来创建一个对象,很合理吧在new构造函数创建对象时,可以在括号中传入参数,这也很合理那么,在创建对象,Vue的构造函数中也可以传入参数,只不过这个参数是个对象.创建vue对象通过构造函数vue就可以创建一个vue的根实例,并启动vue应用—入口参数是个对象,对象原创 2020-10-13 01:10:15 · 183 阅读 · 0 评论 -
VUE的MVVM是什么呢?
什么是MVVM?直接看维基百科直接看vue 的MVVMvue可以帮我们把Model数据绑定到View上面vue帮我们把View的事件绑定到Model上面下面是一个使用vue实现的计数器demo使用这个demo,来简单理解demo中的MVVM分别指的哪个demo中,当点击+和-时,计数会发生变化<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>J原创 2020-10-10 15:50:16 · 631 阅读 · 0 评论 -
关于node.js的基础
node.js 的一些基础前端的工程化,模块化,框架,需要有一套工具去支撑系统运行起来.而这套工具就是需要nodejs这个环境去实现的,因此, 首先需要先学习node.js开始node.js 的简单介绍官网http://nodejs.cn/首先,什么是node.js?是基于chrome V8 引擎的javascript运行环境(官网上这么写的)听着有点抽象,下面举例demo来加强理解node.js 的用处开发网站的后台,之前的做的小demo里有用到,用来开启一个本地服务器https原创 2020-09-30 16:29:09 · 246 阅读 · 0 评论 -
关于html中 textarea 的 selectionStart 和 selectionEnd
关于关于html中 <textarea>的 selectionStart和 selectionEnd关于selectionStart和 selectionEnd不怎么碰到,MDN上也全是英文,网上也没查到什么详细的博客,因此写篇文章记录一下,如下图,在一个<textarea>输入框中存在0123456789这10个字符,点击按钮会在控制台输入selectionStart和 selectionEnd的值当光标没有选择文字时selectionStart和 selectio原创 2020-09-29 23:40:43 · 5528 阅读 · 0 评论 -
跨域、同源策略
同源策略同源同协议同域名同端口当页面上有ajax请求时,浏览器比较当前ajax请求和当前页面的url,接口,协议,域名,端口 是否完全一致,如果不一致,浏览器会拒绝掉.那么为啥要同源呢?为了保护知识产权,不然你做的接口别人网站都随便用了拒绝是服务器拒绝还是浏览器拒绝呢是浏览器拒绝的如果跨域请求第三方接口,或者把自己的接口提供给第三方,要如何做呢?一般有三种方法,哪三种方法呢???是下面三种方法:JSONPCORS服务器中转就这三种JSONP原理同源策略只限制a原创 2020-09-16 15:32:39 · 97 阅读 · 0 评论 -
关于Promise一些不懂的地方
Promise关于promise ,还是觉得很抽象,还是有很多不懂的地方,这边我再仔细研究下因为太抽象,我就形象点的来表达了首先还是得复习一下什么是异步这个概念打个比方,我去餐馆点餐,但是我正在写我的ppt.但是我很饿,需要吃饭,这时候服务员跑过来.然后我点菜.点完菜,我继续写ppt.而在我点完菜之后,服务员把菜单给厨师>>厨师开始做饭>>厨师饭做完了>>厨师交给服务员>>服务员再把菜给我放在桌子上>>我ppt写完了>>原创 2020-09-15 19:18:46 · 100 阅读 · 0 评论 -
手写一个简单的Promise
手写一个Promise手写一个Promise构造函数来实现promise的功能,能让我更加熟悉promise,加深对他的印象.具体思路在new Promise2()创建一个对象将getWeather中的函数填入new Promise2()中这样一来,Promise2里的constructor中的参数fn就是getWeather里的函数然后执行fn(),fn()里的参数就是用Promise2构造函数创建的对象中的函数:resolve和reject.class Promise2 { st原创 2020-09-14 16:23:38 · 222 阅读 · 0 评论 -
关于Javascript中的Promise的一些基础知识
回调什么是回调???什么是回调???被作为实参传入另一函数,并在该外部函数内被调用,用以来完成某些任务的函数,称为回调函数。- 请看下面这段代码- 当执行完打印第一次执行时,再执行一次delay()函数.然后套娃- 函数需要一步一步的执行,打印完第一次执行,才能打印第二次执行- 上面MDN的函数真难看懂,用人话解释一下,回调函数是一个函数,将会在另一个函数完成执行后立即执行。回调函数是一个作为参数传给另一个 JavaScript 函数的函数。这个回调函数会在传给的函数内部执行。- 可以看到如果原创 2020-09-14 00:28:30 · 157 阅读 · 0 评论 -
在前端开发中,如何mock数据
如何mock数据在前端开发中,前端和后端是同时进行的,因此不可能等后端开发完成后再拿他的api进行工作.所以在日常开发中,要学会自己mock数据就很重要mock的方法自己使用node.js做个服务器node.js是个后端语言,但是他使用js写的用mock.js平台比如淘宝 rap平台简单的使用node.js写一个接口const http = require('http') //把http变成对象const url = require('url') //把url变成对象cons原创 2020-09-09 17:28:46 · 546 阅读 · 0 评论 -
关于Ajax的一些基础
AJAX概念AJAX = Asynchronous JavaScript and XML(异步的JavaScript 和 XML)使用内置的XMLHttpRequest 和 fetch 对象,实现和服务端进行数据交互优点: 交互数据时页面不需要刷新,体验较好反正是浏览器内部的一个对象,用的时候调用...原创 2020-09-09 11:08:07 · 398 阅读 · 0 评论 -
什么是BOM浏览器对象模型
BOM(BrowserObjectModel)浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构window对象当前最底层的一个对象所有var声明的的全局变量和fn函数都是window的一个属性而let 和 const声明的变量不是navigator 浏览器相关信息最常用的属性是userAgent,指当前浏览器代理screen 屏幕相关信息其中:orientation.type= "portrait-primary"是指垂直宽度大于水平宽度orient原创 2020-08-30 02:55:59 · 172 阅读 · 0 评论 -
javascript中的事件
事件事件是在编程时系统内发生的事情或动作单击双击鼠标放置表单内容发生变化拖拽页面滚动触发/失去焦点键盘按下提交表单…其他DOM事件流三个阶段事件捕获阶段处于目标阶段事件冒泡阶段## 事件处理程序当事件发生时执行的函数一般有三种绑定方法<div onclick="sayHello">点我</div>$btn.onclick=function(e){ console.log('点我')}$btn.addEventListener(原创 2020-08-25 14:08:06 · 128 阅读 · 0 评论 -
关于闭包的一些不理解的地方
f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们就可以在f1外部读它的内部变量了原创 2020-08-19 13:40:59 · 97 阅读 · 0 评论 -
javascript的继承
继承学习继承,需要先熟悉下this这个概念继承的基本原理下图中,哺乳动物是人和狗的父类人和狗通用哺乳动物的属性每次人和狗的对象里写哺乳动物的属性都很麻烦那么子类直接引用获取父类的属性就方便多了获取父类属性...原创 2020-08-16 16:47:29 · 115 阅读 · 0 评论 -
javascript中的this
this我的理解this指向当前函数的主人this指向的是当前函数的作用域(对象实例)this.变量就是指向某个环境,规定变量在指向的环境中去寻找.这个环境就是当前函数的主人常见的this1.默认的this绑定, 就是说 在一个函数中使用了this, 但是没有为this绑定对象. 这种情况下, 非严格默认,this就是全局变量 Node 环境中的 global, 浏览器环境中的 window.function show(){ console.log(this)//this指向Window原创 2020-08-14 15:24:59 · 147 阅读 · 0 评论 -
javascript之面向对象编程/构造函数/原型链
javascript之面向对象编程语言发展的历史面向过程的语言最先开始的古早语言包括汇编语言,c语言特点:难懂,移植性差,只能在特定的地方编译编程思想以过程为导向,只关心数学逻辑面向对象的语言在汇编语言和c语言的基础上,我们又发展了c++,Java,javascript,Python这些语言在不同领域发挥不同的特长特点:引入了面向对象的思想去设计程序编程思想1.找出实体2.分析实体的属性和功能3.让实体之间相互作用举个例子有一辆车以100km/h的速度,在1000k原创 2020-08-14 00:35:02 · 146 阅读 · 0 评论 -
javascript中的定时器,同步异步,事件循环和任务队列等概念
定时器用于设置延时setTimeout/clearTimeout指定某个函数或代码在多少毫秒之后执行返回一个整数,表示定时器的编号,以后可以用来取消这个定时器function sayHello(){console.log('hello')}let timer1 = setTimeout(sayHello,1000)clearTimeout(timer1)let timer2 = setTimeout(()=>{console.log('helloworld')},2000)原创 2020-08-11 16:37:51 · 783 阅读 · 0 评论 -
javascript正则表达式
正则表达式作用用来匹配符合某种规则的字符串一般使用场景检索字符串中符合某种规则的子字符串判断用户的输入是否符合某种规则替换字符串中符合某种规则的文本用户端输入是否为合法的手机号/邮箱/用户名一个简单的例子let str = '蚂蚁竞走10年了'console.log(/\d/.test(str))//字符串中有数字吗...原创 2020-08-10 19:11:17 · 146 阅读 · 0 评论 -
javascript里面的对象和JSON
对象什么是对象,对象就是无序数据的集合,由若干个"键值对"(属性:值)来组成下面是一个典型的对象:let obj = { name: '野兽先辈',//"name":'野兽先辈'的写法也是可以的 age: 24, work: 'student', speak: function(){ console.log('hello world') }}console.log(obj){key: value}是JS对象字面量的写法{“age”:5}等价于{age:5}对原创 2020-08-10 02:24:52 · 227 阅读 · 0 评论 -
JavaScript中的字符串和数组
字符串字符串的声明方式主要有三种let str = “hello world”let str2 = “hell’o’ world”let str3 = `世界你好`转义字符当遇到特殊字符时,那么怎么表达出这些特殊字符呢?当我们遇到特殊字符时,可以通过加入\来取消特殊字符的原本功能,只是展示出当前字符例如:...原创 2020-08-05 09:30:30 · 302 阅读 · 0 评论 -
javascript的函数
JavaScript 的函数函数的基本概念 在JavaScript中,每个函数其实都是一个Function对象。---mdnJavaScript 函数通过function 关键词进行定义,其后是函数名和括号 ()。函数()内包含参数由函数执行的代码被放置在花括号中:{}以下为一个典型的函数.函数参数(Function parameters)是在函数定义中所列的名称,一个函数最多有255个参数.function name(参数 1, 参数 2, 参数 3) { 要执行的代码}原创 2020-07-28 13:22:00 · 159 阅读 · 0 评论 -
JavaScript之流程控制语句
流程控制语句if 函数if(条件) {// do something} else {// do something}if(条件) {// 若不满足这个条件,进入下个条件判断} else if(条件2) {// do something} else {// do something}注意: (条件)会被强制转换成布尔类型举个栗子当分数输入30时,页面反馈垃圾let score = window.prompt("输入分数")if (score >= 90) {原创 2020-07-22 10:20:00 · 91 阅读 · 0 评论