script 部分export default对象的属性：
name：组件的名称
components：存储<template>中用到的所有组件
props：存储父组件传递给子组件的数据
watch()：当某个数据发生变化时触发
computed：动态计算某个数据
setup(props, context)：初始化变量、函数
ref定义变量，可以用.value属性重新赋值
reactive定义对象，不可重新赋值
props存储父组件传递过来的数据
context.emit()：触发父组件绑定的函数
template 部分
<slot></slot>：存放父组件传过来的children。
v-on:click或@click属性：绑定事件
v-if、v-else、v-else-if属性：判断
v-for属性：循环，:key循环的每个元素需要有唯一的key
v-bind:或:：绑定属性
style 部分
<style>标签添加`属性后，不同组件间的 css 不会相互影响。
第三方组件
view-router包：实现路由功能。 ...
Vue 官网
终端Linux和Mac上可以用自带的终端。
Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。
安装Nodejs安装地址
安装@vue/cli打开Git Bash，执行：
1npm i -g @vue/cli
如果执行后面的操作有 bug，可能是最新版有问题，可以尝试安装早期版本，比如：npm i -g @vue/cli@4
启动vue自带的图形化项目管理界面1vue ui
常见问题 1：Windows 上运行vue，提示无法加载文件，表示用户权限不足。
解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y
React
未读Reduxredux 将所有数据存储到树中，且树是唯一的。
Redux 基本概念
store：存储树结构。
state：维护的数据，一般维护成树的结构。
reducer：对state进行更新的函数，每个state绑定一个reducer。传入两个参数：当前state和action，返回新state。
action：一个普通对象，存储reducer的传入参数，一般描述对state的更新类型。
dispatch：传入一个参数action，对整棵state树操作一遍。
React-Redux 基本概念
Provider组件：用来包裹整个项目，其store属性用来存储redux的store对象。
connect(mapStateToProps, mapDispatchToProps)函数：用来将store与组件关联起来。
mapStateToProps：每次store中的状态更新后调用一次，用来更新组件中的值。
mapDispatchToProps：组件创建时调用一次，用来将store的dispatch函数传入组件。
安装
npm i redux react-redux @reduxjs ...
路由Web 分类
静态页面：页面里的数据是写死的
动态页面：页面里的数据是动态填充的
后端渲染：数据在后端填充
前端渲染：数据在前端填充
安装环境
VSCODE 安装插件：Auto Import - ES6, TS, JSX, TSX
安装Route组件：npm i react-router-dom
Route 组件介绍
BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
Link：跳转到某个链接，to属性表示跳转到的链接
Routes：类似于 C++中的switch，匹配第一个路径
Route：路由，path属性表示路径，element属性表示路由到的内容
URL 中传递参数解析 URL：
1<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />
获取参数，类组件写法：
1234567891011121314151617import React, { Component ...
React
未读Components5.3.1 创建项目创建项目box-app：
123create-react-app box-appcd box-appnpm start
安装bootstrap库：
1npm i bootstrap
bootstrap的引入方式：
1import "bootstrap/dist/css/bootstrap.css";
5.3.2 创建 Component5.3.3 创建按钮当子节点数量大于 1 时，可以用<div>或<React.Fragment>将其括起来。
5.3.4 内嵌表达式JSX 中使用{}嵌入表达式。
5.3.5 设置属性
class -> className
CSS 属性：background-color -> backgroundColor，其它属性类似
5.3.6 数据驱动改变 Style5.3.7 渲染列表
使用 map 函数
每个元素需要具有唯一的key属性，用来帮助 React 快速找到被修改的 DOM 元素。
5.3.8 Conditional Rend ...
React
未读配置 react 环境React 官网
安装Git Bash（仅限使用 Windows 的同学，使用 Mac 和 Linux 的同学无需安装）
安装地址
安装Nodejs安装地址 `
安装create-react-app打开Git Bash，执行：
1npm i -g create-react-app
安装VSCode的插件
Simple React Snippets
Prettier - Code formatter
创建React App在目标目录下打开Git Bash，在终端中执行：
1234create-react-app react-app # 可以替换为其他app名称cd react-appnpm start # 启动应用
JSXReact中的一种语言，会被Babel编译成标准 JavaScript。
ES6 语法使用bind()函数绑定this取值在 JavaScript 中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。
例如：
1234567891011const person = { name: "yxc&qu ...
本文章借鉴https://www.lzhiscoding.xyz
项目实战–拳皇实现攻击效果在Player类中把人物背景渲染出来，以及添加一个矩形来表示挥拳范围，便于碰撞检测
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758// render方法，表示玩家角色在游戏画面中的呈现形式，这里不是简单地使用矩形填充绘制，而是根据玩家角色当前的状态，从对应的动画信息中获取相应帧的图像，并绘制到游戏画面上，实现更丰富的动画效果展示render() { this.ctx.fillStyle = 'blue'; this.ctx.fillRect(this.x, this.y, this.width, this.height); //如果是正方向 if (this.direction > 0) { //画一个矩形表示挥拳的范围，以便于做碰撞检测 ...
本文章借鉴https://www.lzhiscoding.xyz
项目实战–拳皇创建项目新建文件夹KOF，子文件夹有static、templates，分别用来存放静态文件和html文件，static子文件夹有js，css，images，分别用来存放js代码，css文件和图片等资源
创建仓库git init
初始化文件1234567891011121314<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拳皇</title></head><body></body></html>
设置网站图标将图标文件放入/static/ ...
1.jQuery使用方式
在<head>元素中添加：
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
按jQuery 官网提示下载
选择器$(selector)，例如：
123$("div");$(".big-div");$("div > p");
selector类似于 CSS 选择器。
事件$(selector).on(event, func)绑定事件，例如：
123$("div").on("click", function (e) { console.log("click div");});
$(selector).off(event, func)删除事件，例如：
12345$("div").on("click" ...
JavaScript 的代码一般通过事件触发。
可以通过addEventListener函数为元素绑定事件的触发函数。常见的触发函数有：
鼠标
click：鼠标左键点击
dblclick：鼠标左键双击
contextmenu：鼠标右键点击
mousedown：鼠标按下，包括左键、滚轮、右键
event.button：0 表示左键，1 表示中键，2 表示右键
mouseup：鼠标弹起，包括左键、滚轮、右键
event.button：0 表示左键，1 表示中键，2 表示右键
键盘
keydown：某个键是否被按住，事件会连续触发
event.code：返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了 alt、ctrl、shift 键。
keyup：某个按键是否被释放
event常用属性同上
keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
event常用属性同上
keydown、keyup、keypress的关系类似于鼠标的mousedown、 ...
