- 博客(35)
- 收藏
- 关注
原创 react组件的生命周期
1.组件的钩子函数constructor:组件刚刚被创建,state状态正在初始化render:渲染DOM,但是不能在里面是有this.setState()方法修改state状态,否则会造成死循环,堆栈内存溢出componentWillMount:在DOM渲染之前调用,在客户端也在服务端。componentDidMount:在DOM第一次渲染之后调用,只在客户端componentWill...
2020-03-09 08:35:08
121
原创 react组件的通讯
1.组件之间的通讯介绍:组件都是独立的,只能使用组件自己的数据。在组件化的过程中,将本来一个完整功能的组件,拆分成多个组件,以方便更好的维护,但是这样一来,多个组件之间就需要共享数据,就需要打破组件独立封闭的特性,这一过程叫做组件之间的通信1.1.props通信接受传递给子组件的数据传递数据需要给子组件设置自定义属性,将父组件的数据传递过去函数组件提供props形参来获取数据,类组件通...
2020-03-09 08:20:50
114
原创 受控组件和非受控组件
1.受控组件于非受控组件受控组件:必须有react的state状态和change书剑来管理的属性,叫做受控组件,比如:className,value,for等属性非受控组件:就是不受react的state和change管理的属性,就是默认文本框输入的数据,react无法检测到的,比如defaultvalue或者htmlfor...
2020-03-08 20:22:04
177
原创 state和setState
1.state的基本使用介绍:就是状态数据,是组件内部的私有数据,只能在组件内部使用,他是一个对象使用:class App extends Component { constructor (props) { super(props) this.state = { name: '小美' } } render () { return ( <span>...
2020-03-08 20:15:25
370
原创 状态组件和无状态组件
1.状态组件于无状态组件介绍:函数被称为无状态组件,类组件被称为状态组件。因为类组件有自己的state(状态),而函数组件并没有state所以没有自己的状态...
2020-03-08 20:07:09
214
原创 react的事件
1.事件的介绍介绍:react 事件绑定语法与 DOM 事件语法相似语法:on + 事件类型={ 事件处理程序 },react事件采用的是小驼峰命名法,调用事件处理程序或者函数方法必须使用thisbtn = () => { console.log('哈哈哈')}return ( <button onClick={ this.btn }></button>...
2020-03-08 08:43:00
83
原创 react 组件的使用
1.组件的介绍介绍:组件就是封装起来具有独立功能的ui部件,react推荐以组件的方式去思考ui的构成,将ui每一个功能独立的功能封装成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。组件的特点:免代码冗余,提高代码利用率,组件可以重复调用组件的属性props是只读的,调用者可以传递参数到props对象中定义属性props传递是父子组件交互的唯...
2020-03-08 08:26:59
191
原创 react的jsx语法糖
1.jsx的介绍解说:jsx是javascript XML的缩写,表示在javascript代码中写XML格式的代码优势:声明式语法更直观,于heml结构相同,降低了学习成本执行更快,因为它在编译了javascript代码后进行了优化它是类型安全的,在编译过程中就能发现错误使用jsx编写模板更加简单快速2.jsx的使用// jsx创建react元素const ...
2020-03-08 07:57:14
261
原创 react脚手架
1.使用脚手架说明:在安装node的时候就会再带一个npx,通过npx创建一个项目命令:npx create-react-app my-app来创建一个react项目
2020-03-08 07:24:09
78
原创 react的介绍
1.react是什么概念:是一个javascript的ui库,用于构建高效,快速的用户界面,是一个轻量级的库2.react的有点和缺点优点:声明式没开发:声明式开发强调的是做什么,react是面向编程的,只要把数据构建好就可以了,react会根据这个数据自动构建网站,声明式开发介意节约大量的操作dom的代码。这是react的一个优势可以与其他的框架共存:使用react的时候,我们...
2020-03-07 22:29:50
166
原创 js全局变量收集器
// 定义方法var overallManager = (function() { // 存储全局变量,闭包保护不受污染 var overall = {}; // 要创建的全局变量和变量值 return function(name, value) { // 首先保证有传参 if (arguments.length == 0) { return null; } ...
2020-03-06 13:26:54
118
原创 mvvm和mvc的区别
1.mvvm和mvc区别mvc的介绍:在mvc里面,视图是直接可以访问数据模型的,所以视图里面包含数据模型,还要包括一些业务的逻辑。在mvc里面数据模型不依赖于视图,但是视图是依赖于数据模型的mvvm:就是(view viewModel model):将数据层和视图层分离出来,vue充当了viewModel的角色,相当于一个中间层监视视图和数据,一旦视图发生变化用viewModel来通知数据变...
2020-03-06 13:21:09
138
原创 缓存组件的新用法
<!-- 组件内部--><keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件,比如 Home! --> </router-view></keep-alive> <router-view v...
2020-03-01 13:56:11
178
原创 vue项目优化
1.动态加载组件说明:比如在component文件下有很多的组件,在其他的组件引入,势必会有很多的import的引入,麻烦,所以动态引入在main.js,之后在其他的vue文件中直接使用,无需导入//cptsRegister.js文件import Vue from 'vue'function capitalizeFirstLetter (str) { return str.ch...
2020-03-01 08:50:52
87
原创 小程序登陆的步骤
1.用户先获取自己的信息// 1.API js主动获取数据async JsGetInfo(){ // 1.获取用户信息 // 1.1 先用 API js 方法 uni封装promise返回 [err, res] const [err,res] = await uni.getUserInfo(); // 1.2 res没有数据 用户没有授权:让用户主动授...
2020-02-27 14:17:48
564
原创 框架(uni-app)
1.框架的使用介绍:是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。创建项目:// 安装npm install -g @vue/cli// 创建项目vue create -p dcloudio/uni-preset-vue my-project选择模板...
2020-02-27 12:08:52
196
原创 Vant Weapp和F2以及日历
1.Vant Weapp介绍:Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。// 安装npm i vant-weapp -S --production小程序工具的配置:注册使用:可以在app.json全局注册也可以在页面内的json文件注册"usingComponents": ...
2020-02-27 08:30:03
1205
原创 模块化
1.基本使用介绍:小程序遵循的是类似 CommonJS 的规范。通过 module.exports 或 exports 对外暴露接口,通过 require 导入模块用处:公用的方法的可以写在一个JS文件内,供每个页面使用2.npm模块介绍:小程序目前不支持直接引入 node_modules** , 开发者需要使用到 node_modules 时候使用小程序支持的 npm功能。使用步骤:...
2020-02-27 08:09:35
89
原创 生命周期和场景值
1.生命周期-App介绍:是整个app应用的生命周期,有以下几个生命周期函数App({ // 当第一次启动时,只会执行一次;就是启动了就执行; onLaunch: function(query) { console.log(1); }, // 前台运行时 onShow: function() { console.log(2); }, // 后台运行...
2020-02-27 07:43:28
147
原创 发布时的配置和发布阶段的配置
1.发布时的配置注意:直接使用wx.request()方法请求url地址会报错,需要如下的配置2.开发阶段的配置注意:勾选微信开发者工具中的详情按钮中的本地数组选项中的不效验合法域名即可...
2020-02-27 07:26:08
192
原创 数据渲染
1.数据渲染index.js:在js文件中定义数据,通过 {{}} 来进行数据的渲染Page({ /** * 页面的初始数据 */ data: { msg: "xxxx info", a: 1, b: 2, flag: true, list: [1, 2, 3], obj: { name: "xx" } ...
2020-02-26 18:43:04
702
原创 VSC开发程序
1.vsc开发小程序minapp:vsc的插件,在vsc里面开发小程序的代码,在微信开发者工具中,查看效果2.指定测试页面3.新样式v2注意:设置新样式不会真实的覆盖掉内置的样式,尽管引进划了横线,会有问题,建议去掉...
2020-02-26 16:59:59
582
原创 图片问题
使用图片的规则wxml:可以使用静态图片(相对路径图片)和上传到github的图片wxss:在wxss内只能使用网络图片,是公司服务器上的图片也可以是上传到github上的字体图标:iconfonts下载到本地,上传到服务上,wxss里面全部使用网络地址;注意:wxapp服务器地址需要为https,不然会有问题字体图片下载:https://icomoon.io/上传自己的图标 svg格式...
2020-02-26 15:03:03
247
原创 预览的问题
1.体积过大无法预览注意:目前我们完成了小程序的首页面,如果通过开发工具=>预览=>扫码,会遇到一个错误提示,如图所示:错误的原因:微信官方要求小程序代码包体积不允许超过 2M,其中图片资源占用了较大部分空间,然而实际项目中图片资源都是通过服务器返回,而非本地资源,所以 2M 的大小可以满足大部分的需求。解决方法:1,将所有的静态资源图片上传到github,然后设置为网站的静...
2020-02-26 14:11:26
117
原创 页面适配
1.不同屏幕下的适配问题小程序:使用rpx为单位,微信开发工具会自动帮我们载在不同屏幕下完成适配约定: 页面的宽度为750rpx,那么此时1rpx = 1px...
2020-02-26 13:52:10
126
原创 项目目录的介绍及配置
1.创建之后的项目目录2.目录的介绍app.js:是整个应用的共享的文件,里面定义的方法,是可以共享的app.json:对小程序进行全局配置。如:tabBar,窗口颜色,以及页面配置等app.wxss:全局共享的样式文件project.config.json:整个项目的配置文件sitemap.json:配置小程序及其页面是否允许被微信索引。文件内容为 一个 JS...
2020-02-26 13:25:59
1589
原创 移动APP开发使用
一、移动App开发步骤安装HBuilder 地址:https://www.dcloud.io/hbuilderx.html 标准版:可直接用于 web 开发、markdown、字处理场景。做 App 仍需 要安装插件App 开发板:在标准版的基础之上预置了 App/uni-app 开发所需的插件,开箱即用如果是开发 App 建议下载安装 App 开发版即可。创建项目...
2020-02-26 12:56:40
536
原创 01-响应式原理
Vue 响应式原理为什么修改了一个 JavaScript 数据,就影响了视图的变化?常见的面试问题:Vue 数据绑定的原理?MVVM 的原理?Vue 双向数据绑定的原理?Vue 数据响应式原理?数据响应式原理?修改视图的方式:直接操作 DOMjQuery还是在操作 DOM提高了操作 DOM 的效率而已数据驱动视图方式(MVVM):通过数据操作来影响视图更新...
2020-02-26 12:55:17
142
1
原创 02-服务端渲染
服务端渲染(Vue SSR)Vue Server Side RenderSPA 单页面应用程序有个最大的缺点:不利于 SEO。什么是 SEO?就是搜索引擎优化。如何解决?服务端渲染,在服务端完成对页面的解析替换,发送给浏览器的直接就是结果。介绍SSR(服务端渲染):服务器直接生成 HTML 文档并返回给浏览器,但页面交互能力有限。适用于任何后端语言:PHP、Java、Python...
2020-02-26 12:54:20
206
原创 javascript
javascript----学习笔记1.0:【javascript介绍】 1,概念:是一门运行在浏览器端的语言。用来响应用户的操作,和用户来交互。 2,javascript的三种引入方式: 。内嵌式:在页面引入script标签,在head标签里和body标签里引入都可以 。外联式:在页面引入script标签加入属性src表示要引入的外部js的文件路径 。行内式:在行内使...
2020-02-26 12:52:37
158
原创 ajax
ajax----学习笔记1.0:【服务器和客户端】 1,服务器:服务器就是一台计算机,用于处理请求并通过Internet或本地网络将数据传送到另一台计算机 上,服务器的配置要比普通的计算机配置高出很多 2,客户端:也就是用户端,与服务器相对于为客户提供本地服务的程序 3,带宽:又叫频宽,是指在固定的时间可传输的资料的数量,在传输管道中可以传递数据的能力,频宽通常 ...
2020-02-26 12:51:04
151
原创 Vue学习笔记
1,Vue--------学习笔记1.1:【vue是什么】 1,是一个用于创建用户界面的开源javascript框架,也是一个创建单页应用的web应用框架 2,MVVM:是Model-View-ViewMdel的缩写,它是一种基于前端开发的架构模式,其核心是提供对View和 ViewModel的双向数据绑定这使的ViewModel的状态改变可以自动传递给View,就是所谓的双...
2020-02-26 12:00:14
508
原创 IDE开发工具
1. IDE集成开发工具下载安装1.1.介绍:集成开发环境,界面显示、开发、调试都在一个界面上显示1.2.地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2.登陆可能遇到问题3.创建项目3.1.注意:不要使用云服务...
2020-02-26 11:07:34
309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人