- 博客(52)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vue2学习笔记之知识点大总结
文章目录1、初识Vue2、Vue模版语法3、数据绑定4、el与data的两种写法5、MVVM模型6、Vue的数据代理7、事件处理7.1、事件的基本使用7.2、事件修饰符7.3、键盘事件8、计算属性1、初识Vue 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5
2022-05-20 17:14:46
1288
5
原创 React-Redux
文章目录壹、求和案例_redux精简版贰、求和案例_redux完整版叁、求和案例_redux异步action版肆、求和案例_react-redux基本使用伍、求和案例_react-redux优化陆、求和案例_react-redux数据共享版柒、求和案例_react-redux开发者工具的使用捌、求和案例_react-redux最终版壹、求和案例_redux精简版 (1).去除Count组件自身的状态 (2).src下建立: -redux -store.js
2022-05-10 11:43:34
136
1
原创 React路由
一、路由的基本使用 1.明确好界面中的导航区、展示区 2.导航区的a标签改为Link标签 <Link to="/xxxxx">Demo</Link> 3.展示区写Route标签进行路径的匹配 <Route path='/xxxx' component={Demo}/> 4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>二、路由组件与一般组件 1.写法不同：
2022-05-03 21:16:47
78
原创 React的Github搜索案例(axios和PubSub的运用)
一、静态组件渲染页面1.1、组件、样式App.jsximport React, { Component } from "react";import Search from "./components/Search";import List from "./components/List";export default class App extends Component { render() { return ( <div className="conta
2022-04-29 09:18:27
285
原创 React脚手架配置代理解决跨域
文章目录一、测试代理的服务器的配置和启动，等待React发起请求1.1、package.json1.2、server1.js1.3、server2.js1.4、node_modules1.5、启动服务器(server1.js)1.6、浏览器get请求数据二、React中的配置代理解决跨域问题的两种方法2.1、方法1(不推荐)2.2.1、总结一、测试代理的服务器的配置和启动，等待React发起请求1.1、package.json//package.json{ "name": "server",
2022-04-28 15:14:00
804
4
原创 React组件的组合使用-TodoList案例
文章目录一、功能界面的组件化编码流程（通用）二、组件化三、静态组件2.1、创建组件2.3、引入静态文件2.4、把App.jsx、App.css拆分至各个组件2.4、样式结构效果四、动态初始化列表4.1、在App.jsx 初始化状态4.2、通过props在List组件接收数据，App.jsx传给List4.3、通过props在Item组件接收数据，List传给Item，渲染页面4.4、效果五、 点击回车添加todo项5.1、总体思路：5.2、nanoid5.3、监听键盘输入，拿到数据，通过App传入的函数，调
2022-04-25 18:20:38
1557
原创 React脚手架
文章目录一、使用create-react-app创建react应用1.1、react脚手架1.2、创建项目并启动1.3、脚手架项目结构二、组件的导入和简单使用2.1、`src/index.js`2.2、`src/app.js`2.3、src/components2.4、`src/components/Hello/Hello.css`2.5、`src/components/Hello/Hello.js`2.5、`src/components/Welcome/welcome.css`2.6、`src/compo
2022-04-24 21:22:24
818
原创 React生命周期
文章目录一、引出生命周期1.1、案例目标效果1.2、卸载组件1.3、挂载组件1.4、组件将要被卸载1.5、完整代码1.6、引出生命周期的目的二、生命周期（旧）2.1、setState 流程2.1、forceUpdate 流程一、引出生命周期1.1、案例目标效果需求:定义组件实现以下功能：让指定的文本做显示 / 隐藏的渐变动画(挂载组件)从完全可见，到彻底消失，耗时2S点击“不活了”按钮从界面中卸载组件1.2、卸载组件ReactDOM.unmountComponentAtNode(doc
2022-04-22 18:11:28
1129
原创 React的高阶函数、函数柯里化
文章目录一、高阶函数1.1、概念1.2、案例1.3、完整代码及效果二、函数的柯里化2.1、概念2.2、代码讲解一、高阶函数1.1、概念高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等1.2、案例以下案例就是高阶函数 saveFormData = (even
2022-04-21 21:21:00
676
原创 React中收集表单数据（受控组件、非受控组件）
文章目录一、🌈效果二、🌈理解三、🌈非受控组件四、🌈受控组件五、🌈结论一、🌈效果需求: 定义一个包含表单的组件输入用户名密码后, 点击登录提示输入信息二、🌈理解包含表单的组件分类1.受控组件2.非受控组件三、🌈非受控组件3.1、非受控组件 ：现用现取。要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用ref来从 DOM 节点中获取表单数据3.2、阻止表单提交event.preventDefault()<!DOCTYPE html><htm
2022-04-21 16:55:13
157
原创 React的基本理解使用、组件的三大核心属性
文章目录一、 基本理解和使用1、使用React开发者工具调试2、定义组件一、 基本理解和使用1、使用React开发者工具调试2、定义组件
2022-04-20 21:03:29
1145
原创 React入门
文章目录一、recat介绍1、是什么2、谁开发的3、为什么要学4、React的特点5、React实现效果图二、React的基本使用2.1 hello react案例 (引入这三个库)2.2.使用Jsx创建虚拟dom(重点)2.3.使用Js创建虚拟dom2.4.真实dom和虚拟dom的比较三、Jsx的语法规则四、Jsx小练习（表达式和语句）五、模块与组件、模块化与组件化的理解5.1.模块5.2.组件5.3.模块化5.4.组件化一、recat介绍1、是什么用于构建用户界面的JavaScript的库（只关注
2022-04-19 15:19:59
420
原创 Vue3Pinia
文章目录一、创建项目二、下载pinia三、配置main .js四、配置store五、在App.vue进行操作修改state里面的数据六、 完整代码七、效果展示一、创建项目npm create vite@latest> cd <your-project-name>> npm install> npm run dev二、下载pinianpm i pinia三、配置main .jsimport { createApp } from 'vue'import A
2022-04-01 15:42:50
1921
4
原创 Vuex的todos案例
项目创建创建的时候记得勾上vuexvue create vuex-todos 配置App根组件<template> <div id="app"> <a-input placeholder="请输入任务" class="my_ipt" /> <a-button type="primary">添加事项</a-button> <a-list bordered :dataSource="list" class=
2021-12-31 10:17:47
1085
原创 Vue动态组件
动态组件1.什么是动态组件动态组件就是控制动态组件的显示和隐藏2.实现组件的动态渲染2.1.首先先确定要渲染的组件是哪个组件，那必须先注册组件，然后return出去data() { return { comName: "Left", }; }, components: { Left, Right, },2.2.通过 is属性指定需要渲染哪个组件,is 属性被定义<component :is=""></compo
2021-12-24 16:32:02
880
原创 Vuex基础
store一、使用vuex的准备store的index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // State提供唯一的公共数据源， 所有共享的数据都要统放到Store的State中进行存储。 state: { count: 0 }, mutations: { }, actions: { }, modules
2021-12-23 21:11:45
557
原创 Vue路由部分面试题
day02_vue全家桶今日作业，写几道面试题来加强对知识点的记忆1. 路由之间是怎么跳转的？有哪些方式2. vue-router怎么配置路由2.1.在router的router.jsimport Vue from 'vue'import VueRouter from 'vue-router'// Vue.use() 函数的作用，就是来安装插件的Vue.use(VueRouter)// 创建路由的实例对象const router = new VueRouter({routes:[
2021-12-22 07:59:14
4430
原创 Vue全局前置守卫
1.to是将要访问的路由的信息对象2.from是将要离开的路由的信息对象3.next 是一个函数，调用next() 表示放行，允许这次路由3.1next函数的3种调用方式当前用户拥有后台主页的访问权限，直接放行: next()当前用户没有后台主页的访问权限，强制其跳转到登录页面: next(/login’)当前用户没有后台主页的访问权限，不允许跳转到后台主页: next(false)...
2021-12-21 18:10:41
362
2
原创 Vue的声明式导航&编程式导航
一、声明式导航在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如:????普通网页中点击a标签、vue项目中点击<router-link>都属于声明式导航 <router-link to="/movie/1">长津湖</router-link> <router-link to="/movie/2">战狼</router-link> <router-link to="/movie/3">雪豹</ro
2021-12-21 15:21:59
820
原创 Vue路由动态渲染和动态传参
一、动态渲染多个路由// router/routerjs { path: '/movie/1', component: Movie},//app组件 <router-link to="/movie/1">洛基</router-link> <router-link to="/movie/2">雷神</router-link> <router-link to="/movie/3">复联</router-link&g
2021-12-21 11:42:19
1433
原创 Vue学习第三天
文章目录vue全局注册组件vue局部注册组件vue全局注册组件<!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-s
2021-12-01 20:27:33
68
原创 Vue学习第二天
文章目录一、样式绑定1.class绑定2.数组绑定class3.style绑定属性一、样式绑定1.class绑定v-bind:class设置一个对象，从而动态的切换 class,实例中将isActive设置为true 显示了一个粉红色的 div 块，如果设置为false 则不显示<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Document&l
2021-11-30 18:20:55
474
原创 Vue学习第一天
文章目录一、Vue的基本使用二、数据和方法一、Vue的基本使用1.新建一个HTML文件，在head结束标签上面，引入Vue库文件<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.
2021-11-29 15:21:37
206
原创 JS京东放大镜
最重要的js代码实现放大镜效果（其他文件素材已上传zip文件）window.addEventListener('load', function () { var preview_img = document.querySelector('.preview_img') var mask = document.querySelector('.mask') var big = document.querySelector('.big') var bigImg = document
2021-11-26 17:23:38
421
原创 mac 开启python服务器
1. 创建一个文件夹2. 从终端cd进入文件夹3. 开启命令 python -m SimpleHTTPServer 99994. 文件夹中直接创建test.html5. 直接运行：http://localhost:9999/test.html(192.168.84.21)
2021-11-26 15:52:28
976
原创 每日作业-Web APIs第07天
文章目录一、tab栏切换二、5s跳转一、tab栏切换 1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。 2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来提示1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可2.让div显示出来，只需要将div的class增加current即可3.如何利用自定义属性降按钮与下方盒子建立联系<!DOCTYPE html><html lang="e
2021-11-09 16:05:55
539
原创 近日web APls案例作业
文章目录一、动态创建列表二、仿京东物流查询三、电子时钟四、双十一倒计时一、动态创建列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; padding: 0; } ul {
2021-11-08 21:07:55
465
原创 day02_WebAPIs案例
排他思想如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式 （留下我自己）注意顺序不能颠倒，首先干掉其他人，再设置自己<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
2021-11-02 21:15:38
126
原创 每日作业-JavaScript第01天
文章目录1- 判断时间阶段。2 - 比较两个数的最大值3 - 判断奇偶性4 - 判断星期5 - 请客吃饭1- 判断时间阶段。题目描述：用户输入几点弹出问候信息；如用户输入12点中午好；用户输入18点 弹出傍晚好； 用户输入23点弹出深夜好；用户输入23点弹出深夜好；题目提示： 通过比较运算符判定输入的时间的范围，弹出相应的问候信息 <script> let tianqi = prompt("现在几点了"); if (t
2021-11-02 15:12:47
813
原创 Web API-练习
每日作业-Web APIs第01天1 - 输入框内容显示和隐藏（加强训练）题目描述仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：1）输入框获得焦点，提示内容消失，边框变色2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色训练目标能够操作元素的属性和样式属性训练提示1.给文本框注册获得焦点事件，清空value值，改变border的颜色2.给文本框注册失去焦点事件3.获取并判断文本框的内容4.内容为空，恢复提示内容，边框恢复
2021-11-02 15:02:34
599
原创 每日作业-JavaScript第03天
1.写一个函数，调用后用户输入任意两个数字的任意算术运算（简单的计算器小功能），并能弹出运算后的结果。 <script> var num1 = prompt('请您输入第一个数字'); var st = prompt('请您输入加减乘除符号'); var num2 = prompt('请您输入第二个数字'); function jjcc(num1,num2) { return[parseInt(num
2021-10-27 20:38:15
488
原创 每日作业-JavaScript第02天
文章目录js的相关操作1.打印1-100的求和 与平均值2.打印1-100的偶数和3.打印1-100的奇数和4.100以内7的倍数的和5.打印一个矩形5.打印一个正方形6.打印直角三角形7.打印等腰三角形7.打印九九乘法表js的相关操作1.打印1-100的求和 与平均值 <script> var x = 100; var sum=0; for (var i = 0; i <= x; i++) { sum=s
2021-10-26 17:53:45
185
原创 每日作业-品优购详情页
品优购详情页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {
2021-10-22 15:26:13
818
原创 python爬取淘宝商品页面信息
import timefrom selenium import webdriverfrom selenium.webdriver.common.keys import Keyskey_words = input("这位客官！请您输入要在淘宝查询爬取的商品:")def get_browser(): try: options = webdriver.ChromeOptions() options.add_experimental_option('exclu
2021-07-30 19:54:22
2178
1
原创 python爬取京东商品页面信息
from selenium import webdriverfrom selenium.webdriver import ChromeOptionsfrom selenium.webdriver.common.keys import Keysimport time# 输入搜索的关键字key_words = input("这位客官！请您输入要在京东查询爬取的商品:")# 用这个跳过谷歌浏览器的自动化检测option = ChromeOptions()option.add_argument('
2021-07-30 19:52:02
791
原创 python爬取百度百科保存scv
import urllibimport ioimport sysimport requestsfrom bs4 import BeautifulSoupfrom lxml import etree# 解码gbksys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='gb18030')# 输入你要查询的百度百科标签，进行解码book_type = input('请输入你要查询的百度百科的标签:')# 文字解码得到部分urlu
2021-07-30 19:47:14
335
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人