![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js
文章平均质量分 67
js
Tatum_99999
java开发
展开
-
React系统学习5(组件生命周期)
在之前的React类式组件定义的时候,有说到有一个必不可少的内容,即render函数,这个函数是React自带的,每当组件的状态变化的时候,就会触发一次render。render函数就是React生命周期中的一个,与之类似的这些函数通常被称作React生命周期函数、React生命周期钩子函数、React生命周期钩子、React生命周期回调函数。这些函数包括constructor、componentWillMount、render、componentDidMount、componentWillUnmoun原创 2022-04-25 19:48:45 · 527 阅读 · 0 评论 -
React系统学习4(組件三大核心属性之refs)
React三大核心属性state、props、refs,前边已经学过了state和props,现在开始最后一个refs的学习。再从小需求说起建立在业务基础上的技术才是最有价值的,假设有这样一个组件,一个输入框和一个按钮,需要在输入框中输入内容后,点击按钮则弹窗展示输入的内容。需求比较简单,根据以往的经验,可能会写出这样的一段代码:class Demo extends React.Component{ showInput=()=>{ alert(document.getElementBy原创 2022-04-23 09:17:37 · 329 阅读 · 0 评论 -
React系统学习3(組件三大核心属性之props)
从一个小需求出发假设有这样一个需求,需要在页面中输出不同水果的一些信息,例如id编号、名称和价格。很显然,上边有三种不同的水果,但是每一种的格式是一模一样的,看起来就是ul和li。那么根据之前的学习,可以先定义出类似这样的组件以及相关代码,先实现其中一个:<body> <div id="test"></div> <!--核心库--> <script type="text/javascript" src="../../js/react.原创 2022-04-17 11:31:52 · 764 阅读 · 0 评论 -
React系统学习2(组件三大核心属性之state)
之前简单学习的react中函数式组件和类式组件的基本使用,函数式组件适用于定义简单的组件,类式组件适用于定义复杂的组件。复杂的组件指的是有状态的组件,所谓的状态,在react中就是三大核心属性之一的state。从一个小例子说起假设需要这个一样组件,访问的时候展示一个人的名字和心情,当点击的时候就切换到另一个人,再次点击就再切换回去。那么对这个需求进行分析,就会知道首先肯定是需要有地方进行信息展示,然后就是肯定需要有点击事件,再然后就是需要有地方保存数据。基于上边的分析,在还不是太会react的情原创 2022-04-10 10:39:53 · 1236 阅读 · 0 评论 -
React系统学习1(入门使用和基础概念)
由于当前项目的前端中使用的是React,所以其实我应该算是接触它有很长一段时间了。但是一直以来都是局部小功能的修改,并没有系统性的学习和理解。鉴于工作技术优先的原则,我觉得有必要从零开始系统的学习一下。基础集成和使用实际上,和Vue一样,React可以使用脚手架创建项目,并且真正的实际项目中可能也都是使用脚手架进行。不过我这里暂时不准备一开始就使用脚手架,而是采用最基础的直接在HTML页面中引入的方式,例如一个简单的集成页面如下:<!DOCTYPE html><html la原创 2022-04-05 19:58:46 · 1118 阅读 · 0 评论 -
VuePress搭建静态网站记录
vuepress介绍最近在看鱼皮直播时,了解到一个新的静态网站生成器,看起来似乎蛮好用,于是就自己也尝试了一下,它就是VuePress。VuePress是基于vue的静态网站生成器,类似于hexo那种可以直接把markdown等格式的文件解析成静态网页,用来搭建个人网站比较方便。可能很多人了解过hexo,它生成的静态网站,是支持本地离线运行访问的,这一点尤其是对于笔记管理类的博客就非常方便。vuepress基本安装依赖node.js v12+yarn v1如果没有yarn,可以使用npm安原创 2022-04-05 12:10:12 · 1388 阅读 · 0 评论 -
全栈之路-前端(七)javascript基础知识6
1、js中有很多内置函数可以使用,例如setTimeout和clearTimeout,可以延迟执行及清除延迟执行,例如以下代码:function test1(){ console.log(new Date); setTimeout(()=>console.log(new Date),2000);}test1();上述代码输出结果如下,两次输出结果间隔两秒。Wed Nov 24 2021 20:36:44 GMT+0800 (中国标准时间)Wed Nov 24 2021 20:36:4原创 2021-11-24 20:54:00 · 376 阅读 · 0 评论 -
全栈之路-前端(六)javascript基础知识5
1、js函数中this的一些注意事项1,,js普通函数中的this并不固定指代某个对象,调用的时候才能确认,例如如下代码:window.name="tzx";function getName(){ console.log(this.name);}let user={ name:"tzx123"}user.getName=getName;this.getName();getName();window.getName();user.getName();上述代码调用指向的是同一个函原创 2021-11-23 22:45:51 · 620 阅读 · 0 评论 -
全栈之路-前端(五)javascript基础知识4
1、ES6新增了胖箭头函数,所谓的胖箭头,就是=>,任何使用原始函数表达式的地方都可以使用胖箭头函数,例如下边的写法是可以互相替换的:let test1=function(){ console.log("函数表达式");}test1();let test2=()=>{ console.log("箭头函数");}test2();上边代码输出结果如下:函数表达式箭头函数这种箭头函数可以一定程度简化代码,尤其在需要嵌入函数的场景下更加好用,这种写法和java8的lambd原创 2021-11-21 23:11:06 · 435 阅读 · 0 评论 -
全栈之路-前端(四)javascript基础知识3
1、js的字符串除了一些常用的获取位置、获取长度、截取、拼接外,还有个好用的函数padStart和padEnd,可以填充字符,例如:function test1(){ let str="string"; console.log(str.padStart(9)); console.log(str.padStart(9,"#"))}test1();上边代码输出结果如下: string###string第一个前边填充了3原创 2021-11-05 23:36:05 · 317 阅读 · 0 评论 -
全栈之路-前端(三)vue中按需引入Element UI及使用
有些简单操作时间长了不用可能也会忘记,尤其是一些细节,因此对vue中按需引入element-ui也做一个简单记录。安装依赖cnpm i element-ui -Scnpm i babel-plugin-import -D以上操作也可以使用npm,但相对速度可能会慢点。element-ui是基础依赖,babel-plugin-import的作用是按需引入,这些在element官网都有说明。配置安装了依赖之后,还需要一定的配置,主要是两个文件,一个是babel.config.js,另一个是main原创 2021-10-30 11:32:26 · 545 阅读 · 0 评论 -
全栈之路-前端(二)javascript基础知识2
1、==和!=在比较之前会进行类型转换,===和!==比较之前不进行类型转换,一般推荐使用===和!==.2、关于for循环,除了和java类似的普通for循环之外,还有for in和for of和forEach。其中for in遍历的是对象的属性而不是内容,同时不保证顺序。forEach不能break和return。for of保证顺序,可以break和return,是ES6之后的语法。例如有如下代码:function test8(){ let arr=["a11","a12","a13","a14原创 2021-10-27 23:02:42 · 208 阅读 · 0 评论 -
全栈之路-前端(一)javascript基础知识1
1、javascript一开始不叫javascript,之所以叫javascript,是因为当时java被炒的很火,相当于蹭热度。2、javascript主要有三大块组成,分别是ECMAScript、DOM和BOM。3、ECMAScript是由ECMAScript-262定义并提供基础核心功能,通常说的ES5、ES6实际就是ECMAScript-262第五版和第六版的简称。4、DOM即Document Object model,主要是对网页标签的操作,简单粗暴的可以理解成对HTML标签的操作,是浏览器原创 2021-10-26 22:43:03 · 197 阅读 · 0 评论 -
AngularJS PhoneCat代码分析
转载自:http://www.tuicool.com/articles/ym6JfenAngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat。这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作。本文主要分析 AngularJS 官方网站提供的一个用于学习的示例项目 PhoneCat 的构建、测试过程以及代码的运行原理转载 2015-10-22 14:33:46 · 936 阅读 · 0 评论 -
angularjs中ng-route和ui-router简单用法的代码比较
1、使用ng-route:app.js中的写法:var app=angular.module('birthdayApp',['ngRoute']); app.config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'views/login.html',原创 2015-12-15 11:17:58 · 3892 阅读 · 0 评论 -
angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
使用$http、$location、$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘:1、$http模拟从后台获取json格式的数据;2、$watch实时监控数据变化;3、$location.path实现页面跳转;4、$scope实现数据绑定,包括input内容及文字样式等app.js代码var app=angular.module('contactsA原创 2015-12-15 17:58:10 · 4531 阅读 · 0 评论 -
前后台打通之vue和vant前端要点及设计问题记录
接着上一次的后台要点记录,这次再总结一下前台的要点,同时对于整体搭建过程中的一些感想也一并记录。相对于后台来说,前台是弱项,也不是目前的本职,所以前台的记录可能就更基础。前端要点记录vant组件使用除开vue本身的使用之外,这一次前台的重点应该就是vant了,属于ui层面的这一块技术一直是弱项中的弱项。使用vant之前,需要先安装vant依赖,网络好的情况下可以使用npm,如果网络不好,...原创 2020-03-13 21:19:37 · 4258 阅读 · 0 评论 -
vue+element-ui搭建纯前台项目记录
架构说明本次项目用于个人学习,作用于个人聚合支付demo,记录步骤,为以后作参考。前台项目搭建的架构基础是前后台分离,即:从代码层面来说,前台和后台互不相干,不同的服务,不同的端口,前后台之前使用http协议进行交互。前台基本技术架构为node.js+vue.js+element-ui+vue-router。步骤说明安装node.js本项目基于node.js搭建,需要使用npm命令,...原创 2019-01-29 12:21:00 · 7904 阅读 · 0 评论