- 博客(24)
- 收藏
- 关注
RSS订阅原创 Vue3——基础安装以及配置
目录关于Vue3里面的getCurrentInstance使用组合式Api安装vue-cli，选择vue3vue create Vue3使用vue ui安装router，axios，vuex安装完axios后可能会出现终端警告，这时配置以下代码即可运行main.jsimport axios from './plugins/axios' import { createApp } from 'vue'import App from './App.vue'impor
2022-02-28 14:23:11
207
1
原创 vuex的五个基本属性和用法
有 5 种，分别是 state、getters、mutation、action、modulevuex 的 store 是什么？vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性。.
2021-12-29 09:08:45
3113
原创 react 数据监听
监听组件传递的值： componentWillReceiveProps(newProps) { 参数为给组件传递的参数 } 监听组件内部状态的变化:componentDidUpdate(prevProps,prevState){ 参数分别为改变之前的数据状态对象 if(prevState.属性名!=this.state.属性名) { ... }}代码示例: //组件接收新属性时调用 componentWillReceiveProps(newProps.
2021-12-27 16:03:09
5923
原创 React——使用生命周期写一个当前时间
import React from 'react';import ReactDOM from 'react-dom';function tick(){ const element=( <div> <h2> 现在时间是:{ new Date().toLocaleTimeString() }</h2> </div> ) ReactDOM.render(element,document.getElementById('.
2021-12-22 11:47:24
158
原创 函数组件与Class组件
函数组件的概念:函数组件是一个有效的React组件，因为他接受唯一带有数据的"props"(代表属性)对象并返回一个React元素，这类组件被称为函数组件，因为它本质上就是Javascript函数，所以也可以说定义组件最简单的方式就是编写Javascript函数一下三个组件，无论是函数组件还是class组件，都是等效的class组件的写法class Namecard extends React.component{render(){const {tages} = this.propsre
2021-12-22 11:43:51
787
原创 React点击事件this绑定的4种方式及传参
第一种:在事件中使用箭头函数(官网推荐使用)import React from 'react'class LikesButton extends React.Component{ constructor(props){ super(props) } increaseClick = (e) =>{ // this:这个组件 console.log(this) // e:被点击目标的合成事件 console
2021-12-22 11:39:53
601
原创 React之使用context传递数据
react中当要从父组件给子孙组件传递数据时 如果用props传递 则需要一级一级传递 而如果用context时 则可以在父组件中加入getChildContext函数 并声明需要传递的数据 在需要接受到数据的组件中声明变量类型Test.contextTypes = {test : PropTypes.string} Example://父组件import React, { Component,PropTypes } from 'react';import Son from './Son';
2021-12-16 16:40:20
578
原创 react中数据父传子和子传父的实现
基本使用nm i react react-domreact包核心 提供创建元素、组件等功能react-dom包提供dom相关功能
2021-12-16 16:35:08
198
原创 React 三种通信方式（父传子、子传父、兄弟传值）
react有三种通信方式：一、父传子，二、字传父，三、兄弟之间传值一、父组件向子组件传值父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图：在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。父组件向子组件传值，通过props，将父组件的state传递给了子组件。父组件（直接定义一个属性传值即可）：imp..
2021-12-16 16:26:55
4181
原创 Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
目录vue-router的动态路由解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题vue-router的参数传递传递参数主要有两种类型：params和queryvue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用..
2021-11-30 19:10:02
160
原创 react拖拽排序、js列表拖拽
列表拖动排序的解决方案有多种，个人感觉最简单的就是zent 提供的 Sortable 组件了一、zent - Sortable 拖拽排序（推荐、简单明了）zent 官网 https://zent-contrib.gitee.io/zent/zh/component/sortablezent githubApi文档 https://zent-contrib.gitee.io/zent/apidoc/用法：yarn add zent# ornpm install zent --save.
2021-10-13 20:52:19
819
原创 Promise封装
用Promise对象封装<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> function ajax(url, type, param, async, header) { ret
2021-10-13 20:00:37
69
原创 Ajax封装
Ajax 说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有：（地图）实时更新，表单验证等等.... ajax的优缺点： 优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力 缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制） 2.一个Ajax请求多了，也会出现页面加载慢的情况。 ...
2021-10-13 19:50:34
111
原创 js插入节点appendChild insertBefore使用方法区别
首先 从定义来理解 这两个方法：appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)相同之处：插入子节点不同之处：实现原理方法不同。 appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。 insertBefore 方法 是在已.
2021-10-12 09:01:22
306
原创 面向对象的选项卡ES5和ES6的写法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .tit span{ float: left; width: 100px; background: #ccf; ...
2021-10-11 21:00:32
56
原创 js内置对象定义
一.内置对象定义js将一些复杂的方法封装成对象，我们在使用时可以直接调用。比如对时间，字符串等数据进行处理时我们可以调用相关的对象。本文主要整理四个内置对象及其属性1、array2、string3、math4、date二.数组array1.创建数组的基本方式有两种：1、使用 Array构造函数语法：new Array()小括号( )说明：（1）预先知道数组要保存的项目数量（2）向Array构造函数中传递数组应包含的项2、使用数组字面量表示法由一对包含数组项的方括号[ ...
2021-10-08 17:22:58
117
原创 js内置对象及常用方法
一、string 字符串String 对字符串的支持 String.charAt( ) 返回字符串中的第n个字符 String.charCodeAt( ) 返回字符串中的第n个字符的代码 String.concat( ) 连接字符串 String.fromCharCode( ) 从字符编码创建—个字符串 String.indexOf( ) 检索字符串 String.lastIndexOf( ) 从后向前检索一个字符串 String.l
2021-10-08 17:05:09
253
原创 ES6之面向对象--类
01.创建类和对象 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2021-10-08 15:50:12
67
原创 ES6中import和export的用法（8种）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>1</div> <div>1</div> <div>1</div&.
2021-10-08 14:41:48
566
原创 类数组对象转化为数组的几种方法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>1</div> <div>1</div> <div>1</div&.
2021-10-08 14:36:24
226
原创 节流和防抖2
防抖(debounce) 和 节流(throttling)延迟debounce，示意图：前缘debounce， 示意图debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行，前缘debounce，是在周期开始时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行。debounce 的实现：版本1: 周期内有新事件触发，清除旧定时器，重置新定时器；这种方法，需要高频的创建定时器。// 暴力版： 定时.
2021-10-08 14:17:46
64
原创 节流与防抖
节流这是一个没有做节流的改变屏幕尺寸可以变色的效果，会进行反复加载<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function coloring(){
2021-10-08 14:04:28
60
原创 set方法简易数组去重/hasOwnProperty包含对象的数组去重
首先找一个含有多种类型数据的数组const pardonArr = [1, 1, 1, 3, 3, 3, 4, 4, 4, 45, 5, 55, 5, 6, 6, 6, 6, 7, 7, 7, 8, 8, 8, 'true', 'true', 'true',true, true, {name: 1,age: 2}, {name: 1,age: 2}]通过set方法对数组进行去重尝
2021-10-08 13:40:41
242
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人