- 博客(28)
- 资源 (1)
- 收藏
- 关注
原创 关于module
如果你希望外部能够读取模块内部的某个变量,就必须使用 export 关键字输出该变量。6.另外, export 语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。5.需要特别注意的是, export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。2.ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。export 命令用于规定模块的对外接口, import 命令用于输入其他模块提供的功能。这种加载称为“运行时加载”
2024-07-17 22:47:37
209
原创 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
292
原创 ES6学习
1.promise含义:是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。特点:1):对象的状态不受外界影。.Promise对象代
2022-03-14 17:32:33
198
原创 小胖墩集结号
2022.3.101.数组是特殊的对象2.数组与对象的区别: 数组使用数字索引,对象使用命名索引3.数组的创建:let arr=[];let arr2=new Array();4.数组,添加数据的方法: push、shift 、length
2022-03-10 17:07:58
567
原创 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
93
原创 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
303
原创 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
592
原创 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
233
原创 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
4091
原创 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
676
原创 react防抖、节流
1. 防抖(debounce)防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。思路:每次触发事件时都取消之前的延时调用方法。使用的本质:不允许某一行为触发。2. 节流(throttle)节流: 高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。思路:每次触发事件时都判断当前是否有等待执行的延时函数。使用的本质:允许某一行为触发,但是触发的频率不能太高。3. 两个比喻来帮助区分防抖和节流防抖:防止抖动的意思,也就是不抖动时才进行相
2021-12-30 15:25:08
2005
原创 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
2538
原创 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
605
原创 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
523
原创 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
100
原创 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
124
原创 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
1818
原创 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
3339
原创 防抖、节流
防抖<!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
77
原创 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
206
原创 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
590
原创 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
192
原创 【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
806
原创 一.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
239
原创 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
71
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人