- 博客(31)
- 收藏
- 关注
RSS订阅原创 react讲解（函数式组件，react hook）
文章目录前言二、使用步骤1.2.总结前言今天我们一起来学习react中的函数式组件，以及took的一些用法。# 一、函数式组件### 作用主要是用来渲染内容,函数名字就是组件名。二、使用步骤1.2.总结...
2021-07-30 21:38:33
2556
原创 react讲解（组件，生命周期以及受控组件）
文章目录前言一、组件的通信原理state 和 setState二、组件分类1.类组件2.组件中父子组件的通信代码示例A组件代码B组件代码：2. 跨组件通信A组件代码如下：C组件代码如下:二.组件的生命周期生命周期演变现在挂载阶段**更新阶段**详解受控组件与非受控组件受控组件代码示例：非受控组件代码示例：总结前言今天我们一起来学习react 中的组件，以及它们组件与组件间的通信方式。一、组件的通信原理在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 sta..
2021-07-27 21:37:34
487
1
原创 React基础讲解
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、React是什么？二、如何使用1.基于浏览器的模式babel代码如下：2.利用react 创建视图3.JSX4.插值表达式代码示例5.条件输出输出数据类型列表渲染条件渲染6.列表循环基于自动化的集成环境模式 - create-react-app - 脚手架安装与使用安装yarn使用npx项目目录结构说明命令脚本npm start类式组件代码示例props 和 stateprops 与 state 的区别组件通信与数据流数据代
2021-07-26 21:53:15
860
2
原创 TypeScript语法基础讲解
文章目录前言什么是面向对象？理解面向对象1、class（类）如何来定义类如何来使用类面向对象的特点只读属性（readonly）示例：属性存取器静态属性示例：this示例：继承继承的特点示例：重写抽象类（abstract class）总结前言今天我们一起继续来学习TS中的语法。什么是面向对象？理解面向对象面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说：操作浏览器..
2021-07-02 21:28:45
380
3
原创 typescript中的打包方法以及配置方法
webpack通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。步骤：初始化项目进入项目根目录，执行命令 npm init -y主要作用：创建package.json文件下载构建工具npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin共
2021-07-01 20:08:55
885
1
原创 带你了解typescript
TypeScript 是什么？TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。 TypeScript = Type + JavaScript（为 JS 添加了类型系统）。 TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。 可以在任何浏览器、任何计算机、任何操作系统上运行。JavaScript 是什么JavaScript（缩写：JS）是一种运行在客户端（比如：浏览器）中的编程语言。 当应用于浏览器时，为网站提供动态交互特性，让网页“动”
2021-06-30 21:27:18
210
2
原创 前端必备基础面试题
文章目录HTML和css1.src和href的区别 ？2.页面元素隐藏方式 和各自特点？3.用过哪些盒模型？javascriptjs基本数据类型是什么？如何判断该类型数据？ 数据类型强制转化和隐式转化的区别？如何判断一个对象是否具备某个属性？如何判断对象为空对象？判断数据类型有几种方法`==`和`===`有什么区别let const 和 var 的区别 ？箭头函数和普通函数的区别 ？解释什么叫回调地狱 ，以及怎么解决回调地狱 ？什么情况下会导致跨域？怎么解决什么是作用域，什么是作用域链？说明原生ajax..
2021-06-29 21:02:49
448
原创 小程序的基础（完结）
文章目录前言一、自定义组件1.创建自定义组件1.1.声明组件1.2.编辑组件myHeader.wxml代码myHeader.wxss代码1.3.注册组件2.声明引入自定义组件index.wxml代码：3.页面中使用自定义组件4.其他属性5.定义段与⽰例⽅法6. 组件-自定义组件传参6.1. 过程⽗组件代码⼦组件代码7.⼩结二、1.2.总结前言 今天我们一起来学习小程序最后的基础内容，小程序的功能很多，今天我们一起来学习。 自定义组件及生命周期。一、自定义组件类似vue或者react..
2021-06-28 21:13:47
215
4
原创 小程序的基础（四）
文章目录前言一、icon 图标1 type 代表图标的类型2 size 大小3 color 图标的颜色二、radio 单选框特点可以通过 color属性来修改颜色**注意**三. checkbox可以通过 color属性来修改颜色注意总结前言今天我们再来一起学习一下小程序的另一些基础知识。一、icon 图标属性类型默认值必填说明typestring是icon的类型，有效值：success, success_no_circle, info, warn,..
2021-06-25 20:43:58
138
3
原创 小程序的基础（三）
文章目录前言一、 navigator二、rich-text作用1.nodes属性注意三.buttonopen-type 的 contact的实现流程代码示例：1 contact 直接打开 客服对话功能 需要在微信小程序的后台配置 只能够通过真机调试来打开2 share 转发当前的小程序 到微信朋友中 不能把小程序分享到朋友圈3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码信息4 getUserInfo 获取当前用户的个..
2021-06-24 21:45:54
1246
3
原创 小程序基础（二）
文章目录前言一、小程序中的条件渲染1.使用`wx:if`2.使用hidden3.什么场景下用哪个**注意**二.小程序事件的绑定小程序中绑定事件，通过`bind`关键字来实现。注意三.样式 WXSS1. 尺⼨单位使⽤步骤：2. 样式导入四.选择器特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！小程序中使用less常用组件1. view2. text3. image4. swiper4.1. swiper4.2. swiper-item总结前言昨天我们讲了小程序的一些基础，今天我们继续来学
2021-06-23 21:29:18
164
2
原创 小程序的基础
小程序基础一.小程序的结构目录是什么?⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服 务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。小程序文件结构和传统web对比结构传统web微信⼩程序结构HTMLWXML样式CSSWXSS逻辑JavascriptJavascript配置⽆
2021-06-22 21:28:59
103
原创 webpack讲解（完结篇）
文章目录前言一、pluginsloader和plugin 的区别HtmlWebpackPlugin作用二、使用步骤1.安装2.引入clean-webpack-plugin作用1.安装2.使用mini-css-extract-plugin作用1.安装2.使用sourceMapWebpackDevServer（热更新）安装启动命令：个人理解Proxy作用Hot Module Replacement作用WebpackDevServer与Hot Module Replacement的区别总结前言这篇文章我们
2021-06-10 18:07:01
212
原创 webpack的讲解（三）
file-loader作用把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)也可以识别图片，将图片显示在页面上步骤1.我们想要达到效果，首先需要安装npm install --save-dev file-loader2.安装完成之后，在你的配置文件中使用webpack.config.js 中 代码 module.exports={ mode:"production", entry:{ 'index':"./s
2021-06-09 21:21:01
123
原创 webpack讲解（二）
webpack我们先来回顾一下上一篇所讲的内容在项目中安装时需要先初始化，使用npm init命令再进行安装 npm install -D webpack webpack-cli安装完查看版本./node_modules/.bin/webpack -v使用./node_modules/.bin/webpack进行打包打包后的内容存放到了dist/main,js打包时指令太长太繁琐，可以找到package.json 中的scripts下在里面自定义一个名字 "scripts": {
2021-06-08 21:49:38
152
原创 webpack讲解（一）
webpackwebpack是什么官⽅方⽹网站:https://webpack.js.org/中⽂文⽹网站:https://www.webpackjs.com/本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack的作用webpa
2021-06-07 20:59:25
134
原创 了解事件总线
什么是公交事件总线（bus）一个空的Vue实例,var bus=new Vue({}),作用用于组件之间的 简单通信.步骤1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量2.通过这个对象调用.$emit('消息名','值')发布消息3.使用.$on('消息名',处理函数) 用来监听.$off('消息名') 销毁代码如下var bus = new Vue() Vue.component('wxauthor',{ templat
2021-06-05 17:28:49
118
原创 vue生命周期
vue的生命周期是什么vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed图示beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，
2021-06-05 16:56:45
89
原创 vue中插槽
什么是插槽在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，在这个组件中添加一点东西，这时候就需要用到插槽来分发内容。示例下面看一个例子 写一个父组件: test.vue<template> <div> <div>大家好我是父组件</div> <myslot> <p>测试一下吧内容写在这里了能否显示<
2021-06-05 16:36:52
75
原创 vue中表单输入和表单修饰符
vue中的表单输入及表单修饰符基础用法用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但 v-model本质上不过是语法糖。数据的双向绑定可以理解为：数据的单向绑定+UI事件监听，单向绑定是将model绑定到view，当model更新时，view也会更新；双向绑定就是model和view互相驱动。示例<div id="app">
2021-06-05 16:11:59
181
原创 vue组件
vue组件一.组件分类组件分为全局组件和局部组件两种全局组件 component局部组件 components1.全局组件方法1使用 Vue.component('组件名',{ template:`<div>模板</div>`, data(){ return:{ name:"张三' } },})方法2模板可以使用<template id='xx'></template>使用Vue.component('
2021-05-28 14:53:43
116
原创 vue过渡详解
vue 过渡transition1.过渡分类单行过渡多行过渡2.属性name代表指定动画的名称keykey是唯一的key作用：比如多行过渡,两个标签相同只是内容不同,由于vue有diff算法会导致之后替换内容不会替换dom节点,就不能触发过渡效果,可以通过添加key这个属性指定不同的值来实现让他删dom节点3.列表过渡transition-grouptag 属性默认使用span包裹里面的内容可以同时使用tag属性来指定用哪个标签包裹到列表数据name动画名
2021-05-28 10:34:14
631
原创 vue中的watch方法
vue中的监听方法watch注意名字 你想监听哪个属性，就要和他起一样的名字1.作用用来监听vue实例中的数据变化可以随时修改状态的变化2.触发条件当你监听的属性发生变化时，会自动调用对应的监听方法3.使用场景用于异步处理，开销比较大的运算4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
2021-05-27 20:08:11
936
原创 vue中的计算属性
vue的方法和属性1.方法 methods用法1methods：{方法名：function（）{}，}用法2methods：{方法名（）{}}注意{{}}调用要写（）示例{{aa()}}事件触发@click=aa"可以有（）也可以没有如果需要传参，加上（）把$event这个特殊参数传进去可以获取事件对象2.计算属性计算属性是什么computed计算属性的特点计算属性有缓存计算属性是基于他们的依赖进行缓存的计算属性只有在他的相关依赖发生改变时才会
2021-05-27 19:23:55
235
原创 js中getBoundingClientRect( )方法
js中getBoundingClientRect( )方法一.getBoundingClientRect() 解析getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
2021-05-24 20:14:46
561
原创 vue Cli（脚手架）安装
vue脚手架安装全过程vue cli (也可以说是脚手架） 是一个基于vue.js进行快速开发的完整系统。通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好
2021-05-22 17:39:05
17334
4
原创 JavaScript中的“！”“！！”
js中"!"!!"分别是什么意思js代码中有时会用到“！”，这个意为取反，对于布尔类型会将其值true和false互换。对于非布尔类型，js会将值先转换为布尔类型，而后取反。“！”的意思“！”可将变量转换为Boolean类型，null，undefined和空字符串取反都为true，其他为false其他类型转布尔类型的规则：字符串类型值：将空值（“”）转换为false，其他转换为true数字类型：会将0转换为false，其他转换为truenull，undefined会转换为false代码
2021-05-22 14:10:23
1135
2
原创 vue语法
vue模板语法1.插值1.直接使用{{}} 将数据解释为普通文本，而非html代码解决刷新或文档过长出现{{}}问题解决方法1可以用v-text解决方法2 使用 v-cloak指令<div v-cloak>{{msg}}</div><style> [v-cloak]{ display: none; }</style>v-html会将元素当成HTML标签解析后输出标签中
2021-05-21 09:38:46
192
原创 vue基础
vue什提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录vue什前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步
2021-05-20 12:54:46
192
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人