前端学习
要不要吃烤肉
这个作者很懒,什么都没留下…
展开
-
JavaScript使用技巧——数字格式化
JavaScript对数字实现千分位格式化原创 2023-02-20 11:12:59 · 452 阅读 · 0 评论 -
使用JavaScript和Echarts5版本绘制中国地图Map
使用JavaScript和Echarts5版本绘制中国地图Map原创 2022-06-01 11:15:44 · 1247 阅读 · 0 评论 -
React17中对react-router-dom v6的使用
App.jsimport React, { Component } from 'react';import { Provider } from 'react-redux';import { BrowserRouter, Routes, Route } from 'react-router-dom';import store from './store';import Home from './pages/home';import Detail from './pages/detail';原创 2022-03-01 14:24:57 · 657 阅读 · 0 评论 -
React系列知识——redux及redux中间件的使用
Redux概念Redux用于存储各个组件的数据,将数据存到一个公共的store进行管理, Redux = Reducer + Flux。Redux 的工作流程 dispatch(actions) (previousState, action)Action Creators ----------------> Store ------------------------> Reducers ↑ ...原创 2022-03-01 14:17:24 · 735 阅读 · 0 评论 -
React系列知识——ref、生命周期函数、transition动画的使用
React中ref的使用import React, { Component, Fragment } from "react";import TodoItem from './TodoItem';import './TodoList.css'; class TodoList extends Component { constructor(props) { super(props) this.state = { inputValue: '', list...原创 2022-03-01 14:04:08 · 425 阅读 · 0 评论 -
React系列知识——几个概念点
props,state与render函数的关系当组件的 state 或者 props 发生改变的时候,render函数就会重新执行。当父组件的 render 函数被运行时,它的子组件的render函数都将被重新运行。React中的虚拟DOM方式一:1.state 数据2.JSX 模板3.数据 + 模板 结合,生成真实的DOM,来显示4.state 发生改变5.数据 + 模板 结合,生成真实的DOM,替换掉原先的DOM缺陷:第一次生成了一个完整的DOM片段第原创 2022-03-01 13:57:15 · 453 阅读 · 0 评论 -
React系列知识——PropTypes与DefaultProps的应用
PropTypes 提供一系列验证器,可用于组件接收到的数据类型是有效的。当传入的 prop值类型不正确时,JavaScript 控制台将会显示警告,propTypes仅在开发模式下进行检查。PropTypes使用不同验证器的例子:import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型,默认情况下 // 这些属性都是可选的。 optionalArray: PropType原创 2022-03-01 13:55:32 · 622 阅读 · 0 评论 -
JavaScript冒泡排序与快速排序
冒泡排序// 冒泡排序function bubbleSort(arr) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j+1]) { // 相邻元素两两对比 var temp = arr[j+1]; // 元素交换 arr[j+1] = arr[j]; arr[j] = temp;原创 2021-09-22 09:03:17 · 144 阅读 · 1 评论 -
JavaScript判断是否为对象
1、 第一选择是toString()方法let obj = {}Object.prototype.toString.call(obj) === '[object Object]'2、constructorlet obj = {}obj.constructor === Object3、instanceof需要注意的是:使用instanceof对数组进行判断也是对象let obj = {}obj instanceof Object && !ob...原创 2021-09-22 08:59:29 · 533 阅读 · 0 评论 -
JavaScript实现保留两位小数
1、四舍五入var num = 2.446242342;num = num.toFixed(2); // 输出结果为 2.452、不四舍五入(1)Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77(2)num.toString().slice()方法切割原创 2021-09-22 08:55:35 · 96 阅读 · 0 评论 -
单页面应用与多页面应用对比
单页面应用(SinglePage Web Application,SPA)只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站。多页面应用(MultiPage Application,MPA)多页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载,常用于 app 或 客户端等。参考:前端:单页面应用和多页面应用彻底理清前端单页面应用(SPA)的实现原理 【精.原创 2020-10-09 11:53:19 · 133 阅读 · 0 评论 -
Vue中的动画封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的动画封装</title> <script src="./vue.js"></scri.原创 2020-09-19 19:06:44 · 108 阅读 · 0 评论 -
Vue中的列表过渡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的列表过渡</title> <script src="./vue.js"></scri.原创 2020-09-19 18:25:55 · 132 阅读 · 0 评论 -
Vue中多个元素或组件的过渡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中多个元素或组件的过渡</title> <script src="./vue.js"><.原创 2020-09-19 10:10:14 · 153 阅读 · 0 评论 -
Vue中动画与velocity.js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中动画与velocity.js</title> <script src="./vue.js">.原创 2020-09-19 09:37:23 · 179 阅读 · 0 评论 -
Vue中同时使用过渡和动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中同时使用过渡和动画</title> <script src="./vue.js"></.原创 2020-09-18 22:38:19 · 203 阅读 · 0 评论 -
Vue中的使用Animate.css库
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的使用Animate.css库</title> <script src="./vue.js">.原创 2020-09-18 11:16:58 · 270 阅读 · 0 评论 -
Vue中的CSS动画原理
在进入/离开的过渡中,会有 6 个 class 切换。 v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除),在过渡/动画完成之后移除。 ..原创 2020-09-18 10:21:20 · 165 阅读 · 0 评论 -
在Vue中使用插槽以及作用域插槽
在Vue中使用作用域插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>在Vue中使用插槽</title> <script src="./vue.js原创 2020-09-16 18:55:56 · 135 阅读 · 0 评论 -
Vue给组件绑定原生事件
给组件绑定原生事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>给组件绑定原生事件</title> <script src="./vue.js"&g原创 2020-09-14 21:25:35 · 149 阅读 · 0 评论 -
Vue父子组件间的传值方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件间的传值</title> <script src="./vue.js"></scrip.原创 2020-09-13 21:49:56 · 147 阅读 · 0 评论 -
Vue使用组件的几个注意点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue使用组件的几个注意点</title> <script src="./vue.js"></.原创 2020-09-13 16:18:45 · 157 阅读 · 0 评论 -
Vue中的列表渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的列表渲染</title> <script src="./vue.js"></scri.原创 2020-09-11 18:14:58 · 165 阅读 · 0 评论 -
Vue生命周期钩子函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue生命周期钩子函数</title> <script src="./vue.js"></sc.原创 2020-09-11 07:53:03 · 89 阅读 · 0 评论 -
Vue计算属性的getter和setter
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性的getter和setter</title> <script src="./vue.js">.原创 2020-09-11 07:51:43 · 115 阅读 · 0 评论 -
Vue中的条件渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的条件渲染</title> <script src="./vue.js"></scri.原创 2020-09-11 07:50:19 · 150 阅读 · 0 评论 -
Vue中的样式绑定(class与style)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的样式绑定(class与style)</title> <script src="./vue.js".原创 2020-09-11 07:48:58 · 112 阅读 · 0 评论 -
Vue计算属性 方法 监听器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue计算属性 方法 监听器</title> <script src="./vue.js"><.原创 2020-09-11 07:55:03 · 106 阅读 · 0 评论 -
Vue模板语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 模板语法</title> <script src="./vue.js"></scrip.原创 2020-09-11 07:44:47 · 86 阅读 · 0 评论 -
Vue声明式渲染
Vue声明式渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue声明式渲染</title> <script src="./vue.js"></script></head><body> <div id="app">{{content}}</div>原创 2020-09-11 07:42:21 · 113 阅读 · 0 评论 -
前端学习:Vue简单实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 实例</title> <script src="./vue.js"></script&.原创 2020-09-11 07:38:05 · 196 阅读 · 0 评论 -
前端学习:Vue初探学习之实现TodoList
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> // 通过<script>标签引入vue.js文件,vue.js文件可在Vue官网下载 <script src="./vue.js"></script></head><body> <d.原创 2020-08-16 22:32:59 · 90 阅读 · 0 评论