关注
分享
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 · 306 阅读 · 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 · 181 阅读 · 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 · 611 阅读 · 0 评论 -
React系统学习2（组件三大核心属性之state）
之前简单学习的react中函数式组件和类式组件的基本使用，函数式组件适用于定义简单的组件，类式组件适用于定义复杂的组件。复杂的组件指的是有状态的组件，所谓的状态，在react中就是三大核心属性之一的state。从一个小例子说起假设需要这个一样组件，访问的时候展示一个人的名字和心情，当点击的时候就切换到另一个人，再次点击就再切换回去。那么对这个需求进行分析，就会知道首先肯定是需要有地方进行信息展示，然后就是肯定需要有点击事件，再然后就是需要有地方保存数据。基于上边的分析，在还不是太会react的情原创 2022-04-10 10:39:53 · 999 阅读 · 0 评论 -
React系统学习1（入门使用和基础概念）
由于当前项目的前端中使用的是React，所以其实我应该算是接触它有很长一段时间了。但是一直以来都是局部小功能的修改，并没有系统性的学习和理解。鉴于工作技术优先的原则，我觉得有必要从零开始系统的学习一下。基础集成和使用实际上，和Vue一样，React可以使用脚手架创建项目，并且真正的实际项目中可能也都是使用脚手架进行。不过我这里暂时不准备一开始就使用脚手架，而是采用最基础的直接在HTML页面中引入的方式，例如一个简单的集成页面如下：<!DOCTYPE html><html la原创 2022-04-05 19:58:46 · 943 阅读 · 0 评论 -
VuePress搭建静态网站记录
vuepress介绍最近在看鱼皮直播时，了解到一个新的静态网站生成器，看起来似乎蛮好用，于是就自己也尝试了一下，它就是VuePress。VuePress是基于vue的静态网站生成器，类似于hexo那种可以直接把markdown等格式的文件解析成静态网页，用来搭建个人网站比较方便。可能很多人了解过hexo，它生成的静态网站，是支持本地离线运行访问的，这一点尤其是对于笔记管理类的博客就非常方便。vuepress基本安装依赖node.js v12+yarn v1如果没有yarn，可以使用npm安原创 2022-04-05 12:10:12 · 866 阅读 · 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 · 271 阅读 · 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 · 521 阅读 · 0 评论 -
全栈之路-前端（五）javascript基础知识4
1、ES6新增了胖箭头函数，所谓的胖箭头，就是=>，任何使用原始函数表达式的地方都可以使用胖箭头函数，例如下边的写法是可以互相替换的：let test1=function(){ console.log("函数表达式");}test1();let test2=()=>{ console.log("箭头函数");}test2();上边代码输出结果如下：函数表达式箭头函数这种箭头函数可以一定程度简化代码，尤其在需要嵌入函数的场景下更加好用，这种写法和java8的lambd原创 2021-11-21 23:11:06 · 346 阅读 · 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 · 208 阅读 · 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 · 276 阅读 · 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 · 126 阅读 · 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 · 94 阅读 · 0 评论 -
AngularJS PhoneCat代码分析
转载自：http://www.tuicool.com/articles/ym6JfenAngularJS 官方网站提供了一个用于学习的示例项目：PhoneCat。这是一个Web应用，用户可以浏览一些Android手机，了解它们的详细信息，并进行搜索和排序操作。本文主要分析 AngularJS 官方网站提供的一个用于学习的示例项目 PhoneCat 的构建、测试过程以及代码的运行原理转载 2015-10-22 14:33:46 · 851 阅读 · 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 · 3779 阅读 · 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 · 4389 阅读 · 0 评论 -
前后台打通之vue和vant前端要点及设计问题记录
接着上一次的后台要点记录，这次再总结一下前台的要点，同时对于整体搭建过程中的一些感想也一并记录。相对于后台来说，前台是弱项，也不是目前的本职，所以前台的记录可能就更基础。前端要点记录vant组件使用除开vue本身的使用之外，这一次前台的重点应该就是vant了，属于ui层面的这一块技术一直是弱项中的弱项。使用vant之前，需要先安装vant依赖，网络好的情况下可以使用npm，如果网络不好，...原创 2020-03-13 21:19:37 · 3729 阅读 · 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 · 7598 阅读 · 0 评论