- 博客(26)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue充电中
watch和computed的区别以及使用案例watch监听的范围1.监听data中数据的变化 ,示例如下； var vm = new Vue({ //...... data: { name: "耿耿" }, watch: { "name": function(newVal, oldVal) { } *注释 : newVal:数据改变后的值, oldVal:数据改变之前的值* } })
2022-03-15 18:26:32
239
原创 ES6学习
1.promise含义：是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。特点：1):对象的状态不受外界影。.Promise对象代
2022-03-14 17:32:33
153
原创 小胖墩集结号
2022.3.101.数组是特殊的对象2.数组与对象的区别： 数组使用数字索引，对象使用命名索引3.数组的创建：let arr=[];let arr2=new Array();4.数组，添加数据的方法： push、shift 、length
2022-03-10 17:07:58
506
原创 Vue小技能
1.回到顶部<template> <div class="homes"> <!-- 回顶部按钮为一张50*50的图片 --> <!-- btnFlag 控制图片显示隐藏 --> <!-- backTop 回顶部的方法 --> <img v-if="btnFlag" class="go-top" src="https://img03.sogoucdn.com/app/
2022-02-09 15:07:00
65
原创 vue项目优化
一：图片懒加载方法1：利用插件(1)首先是在vue项目中安装这个插件 使用命令：cnpm i vue-lazyload -S(2)在vue项目中的入口文件中将插件引入，即在main.js文件中引入并安装插件 ，并在Vue.use(VueLazyload,{})中配置参数 。(3)配置好参数后，就可以到需要懒加载的页面中使用了，使用命令v-lazy来懒加载图片使用方式如下:...
2022-02-08 20:59:48
276
原创 JS-JSON
js中的对象只有js自己认识，其它语言都不认识。JSON是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转化为任意语言中的对象，JSON在开发中主要用来数据的交互。JSON和js对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其它的和js语法一样。JSON分类：1.对象：{}2.数组：[]JSON中允许的值：1.字符串2.数值3.布尔值4.null5.对象JSON与JS转化:1.将JSON字符串->JS中的对象JS.
2022-01-25 11:51:51
561
原创 set方法使用
1.应用1【下拉列表去重】import React from 'react'export default function knowledgePage() {state={types: [], //选项typede: "都市",//默认值}//请求接口的时候，去重处理 getlist() { axios({ url: "/api/allarticle", method: "post", }).then
2022-01-11 20:30:10
182
原创 react中父组件如何直接获取子组件数据
类组件通过 ref 方法1：子组件：import React, { Component } from 'react'export default class son extends Component { state = { count: 0, count1: [ { name: "张良", age: 13, sex: "男" }, { name: "张小菲", age: 14, sex: "女" }
2022-01-06 10:00:32
3654
原创 react懒加载
【只需要修改路由表即可】方法1：使用react-loadable进行路由懒加载（1）下载：npm i react-loadable（2）路由表： //引入这个loadable，使用这个来加载路由import loadable from 'react-loadable'const LoadingTip = () => <div>懒加载路由ing...</div>const routes = [ { path: '/home',
2022-01-05 17:17:40
578
原创 react防抖、节流
1. 防抖（debounce）防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。思路：每次触发事件时都取消之前的延时调用方法。使用的本质：不允许某一行为触发。2. 节流（throttle）节流： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。思路：每次触发事件时都判断当前是否有等待执行的延时函数。使用的本质：允许某一行为触发，但是触发的频率不能太高。3. 两个比喻来帮助区分防抖和节流防抖：防止抖动的意思，也就是不抖动时才进行相
2021-12-30 15:25:08
1751
原创 react组件传值
1.父组件向子组件传值方法：（通过props来传值，这种应用，很多时候我们某个组件在不同的地方用到，但是就只是内容不一样，这样在调用组件就是父组件的时候给各自自己的值就好）父组件：import React, { Component } from 'react'import Es6cComponent from "../../company/index"export default class index extends Component { render() { ..
2021-12-26 20:10:27
2382
原创 redux、react-redux、redux-saga搭建
redux、react-redux搭建【简易版】目录结构入口文件(index.js)import React from 'react';import ReactDOM from 'react-dom';import './index.css';import Router from "../src/router"import {store} from "./store/index"import {Provider} from "react-redux"ReactDOM.rende
2021-12-22 20:33:06
552
原创 vue组传值件
1.父传子父组件内容<template> <div class="about"> <!-- 基本数据类型 --> <!-- <Add :ms="msg"></Add> --> <!-- <Add :msg-val="msgs"></Add> --> <!-- 引用数据类型 --> <Add :msg-vals="posts"><
2021-11-19 09:44:24
469
原创 react-redux
1.src下新建store文件夹,及index.js和reducer.js文件(1)index.js//引入插件import { createStore } from "redux"//引入reducerimport reducer from "./reducer"//保存const store = createStore(reducer);//抛出export default store;(2)reducer.js初版//引入插件import { combineRe
2021-10-26 20:05:03
71
原创 react简易版路由搭界【一级】
目录结构第一步：router/index.js//在react-router-dom引入所需要的import {BrowserRouter as Router,Switch,Route} from "react-router-dom"//引入页面import App from "../App"import Home from "../page/Home/index.tsx"import Detail from "../page/Detail/index.tsx"//定义Rou.
2021-10-23 10:31:27
86
原创 react 修改input的值【受控组件】
方式1：hooks实现import React ,{useState} from 'react'export default function App() { let [val,setVal]=useState("123"); return ( <div> <input value={val} onChange={(e)=>setVal(e.target.value)}/> </div> )}方法2：常规实现
2021-09-27 16:31:41
1579
原创 react排序（sort）
import React, { Component } from "react";export default class App extends Component { state = { tableData: [ { name: "John ll", score: 62.7, }, { name: "John hh", score: 76, }, { .
2021-09-14 21:01:50
2957
原创 防抖、节流
防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2021-09-14 20:58:14
44
原创 react 排序
import React, { Component } from "react";export default class App extends Component { state = { tableData: [ { name: "John ll", score: 62.7, }, { name: "John hh", score: 76, }, { .
2021-09-13 20:56:50
159
原创 koa2与数据库的连接
1.下载mysql2.新建db.js文件（1）引入mysql const mysql = require("mysql");（2）创建连接池 const pool = mysql.createPool({ host: "localhost", //域名 user: "root", //用户名 password: "root", //密码 database: "project-qiaoxiaoyao", //后面只能...
2021-09-06 09:10:22
513
原创 react基础知识总结
学习内容：1.虚拟dom2.组件：1.父子 2.子父 3.跨级 4.组件类型3.路由：1.封装 2.路由表 3.路由传参 4.路由拦截4.Redux:虚拟dom:描述真实dom的一个对象。jsxreact规定，在jsx中遇到{}使用js去编译；遇到<>使用html编译。组件函数式组件（无状态组件）1.定义一个函数function (){}2.此函数必须抛出，有return3.此函数必须r...
2021-09-03 08:38:56
142
原创 【Vue Egg】关于登录 、注册，利用jsonwebtoken进行加密、解密（另写一个接口）处理
前端vue1.下载包cnpm i js-cookie -S2.在登录成功后，保存token，同时记得引入js-cookie //登录 async logins(context, payload) { let res = await axios.post("/api/logino", payload); console.log(res); if (res.data.code === 200) {
2021-08-31 19:35:02
700
原创 一.Egg的基本配置 二.vuex、vue数据的获取 三.php
一：Egg的配置1.安装对应的插件 egg-mysql ：npm i --save egg-mysql2.开启插件// config/plugin.jsmodule.exports = { //(2)开启插件： "egg-mysql": { enable: true, package: 'egg-mysql', }};3.访问 MySQL 数据库实例,如下配置：// config/config.${env}.js const ...
2021-08-26 19:31:13
182
原创 Axios二次封装
vue 中使用1.下载axioscnpm i axios -S2.app下新建utis文件夹及request.js文件 utis/request.jsrequest.js内容=》//(1).引入import axios from "axios";//(2)添加请求和响应拦截器// 添加请求拦截器axios.interceptors.request.use(function(config) { // 在发送请求之前做些什么 return config;}, function(e...
2021-08-26 17:00:07
50
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人