一、今日目标1.初始化项目 2.基于 Vue 技术栈进行项目开发 3.使用 Vue 的第三方组件进行项目开发 4.理解前后端分离开发模式
1.电商业务概述客户使用的业务服务：PC 端，小程序，移动 web，移动 app管理员使用的业务服务：PC 后台管理端。PC 后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式前端项目是基于 Vue 的 SPA（单页应用程序）项目
前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈：Node.js,Express,Jwt(模拟 session),Mysql,Sequelize(操作数据库的框架)
2.项目初始化A.安装 Vue 脚手架B.通过脚手架创建项目C.配置路由D.配置 Element-UI:在插件中安装，搜索 vue-cli-plugin-elementE.配置 Axios：在依赖中安装,搜索 axios(运行依赖)F.初始化 git 仓库G.将本地项目托管到 github 或者码云 ...
React 组件目标
能够知道受控组件是什么
能够写出受控组件
了解非受控组件
表单处理受控组件（★★★）
HTML 中的表单元素是可输入的，也就是有自己的可变状态
而 React 中可变状态通常保存在 state 中，并且只能通过setState() 方法来修改
React 讲 state 与表单元素值 value 绑定在一起，有 state 的值来控制表单元素的值
受控组件：值受到 react 控制的表单元素
使用步骤
在 state 中添加一个状态，作为表单元素的 value 值
给表单元素绑定 change 事件，将表单元素的值设置为 state 的值
示例 demo12345678910111213141516171819202122232425class App extends React.Component { constructor(){ super() this.inputChange = this.inputChange.bind(this) } state = { ...
目录总览
1、严格模式
JavaScript 除了提供正常模式外，还提供了严格模式
ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码
严格模式在 IE10 以上版本的浏览器才会被支持，旧版本浏览器会被忽略
严格模式对正常的 JavaScript 语义做了一些更改：
消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译器效率，增加运行速度
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名
1.1、开启严格模式
严格模式可以应用到整个脚本或个别函数中。
因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况
1.1.2、为脚本开启严格模式
为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句
"use strict ...
1、面向对象面向对象更贴近我们的实际生活, 可以使用面向对象描述现实世界事物. 但是事物分为具体的事物和抽象的事物
面向对象的思维特点：
抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
对类进行实例化, 获取类的对象
1.1、对象在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
属性：事物的特征，**在对象中用**属性来表示
方法：事物的行为，**在对象中用**方法来表示
1.2、类在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。
类抽象了对象的公共部分，它泛指某一大类（class）
对象特指某一个，通过类实例化一个具体的对象
1.2.1、创建类123class name { // class body}
创建实例
1var XX = new name()
注意：类必须使用new 实例化对象
1.2.2、构造函数constructor() 方法是类的构造函数(默认方法)，用于传递参数, ...
React 基础知识点目标
能够说出 React 是什么
能够说出 React 的特点
能够掌握 React 的基本使用
能够使用 React 脚手架
什么是 React （★★★）React 是一个用于构建用户界面的 javaScript 库，起源于 facebook 的内部项目，后续在 13 年开源了出来
特点
声明式
你只需要描述 UI 看起来是什么样式，就跟写 HTML 一样，React 负责渲染 UI
基于组件
组件时 React 最重要的内容，组件表示页面中的部分内容
学习一次，随处使用
使用 React 可以开发 Web 应用，使用 React 可以开发移动端，可以开发 VR 应用
React 基本使用React 的安装npm i react react-dom
react 包是核心，提供创建元素，组件等功能
react-dom 包提供 DOM 相关功能
React 的使用
引入 react 和 react-dom 的两个 js 文件
12<script src="./node_modules/react/umd/react.develo ...
ES6 模块化1. 回顾：node.js 中如何实现模块化node.js 遵循了 CommonJS 的模块化规范。其中：
导入其它模块使用 require() 方法
模块对外共享成员使用 module.exports 对象
模块化的好处：
大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。
2.前端模块化规范的分类在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、Common]S 等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如:
AMD 和 CMD 适用于浏览器端的 Javascript 模块化
CommonJS 适用于服务器端的 Javascript 模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的 ES6 模块化规范诞生了!
3.什么是 ES6 模块化规范ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习 ...
vue-cli1.什么是 vue-clivue-cli（俗称: vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。
特点:
开箱即用
基于 webpack
功能丰富且易于扩展
支持创建 vue2 和 vue3 的项目
vue-cli 的中文官网首页: https://cli.vuejs.org/zh/
2.安装 vue-clivue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具:
12345# 全局安装 vue-clinpm install -g @vue/cli# 查看 vue-cli 的版本，检验 vue-cli 是否安装成功vue --version
2.1 解决 Windows PowerShell 不识别 vue 命令的问题默认情况下，在 PowerShell 中执行vue --version命令会提示如下的错误消息:
解决方案如下︰
以管理员身份运行 PowerShell
执行set-ExecutionPolicy RemoteSigned命令
输入字符Y，回车即可
3.创建项目 ...
vuex 概述1.1 组件之间共享数据的方式父向子传值: v-bind 属性绑定
子向受传值: v-on 事件绑定
兄弟组件之间共享数据: EventBus
$on 接收数据的那个组件
$emit 发送数据的那个组件
1.2 Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
1.3 使用 Vuex 统一管理状态的好处
能够在 vuex 中集中管理共享的数据，易于开发和后期维护
能够高效地实现组件之间的数据共享，提高开发效率
存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
1.4 什么样的数据适合存储到 Vuex 中一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中;
对于组件中的私有数据，依旧存储在组件自身的 data 中即可。
Vuex 的基本使用1. 安装 vuex 依赖包1npm install vuex --save
2. 导入 vuex 包12import Vuex from 'vuex'Vue.use(Vuex)
3. 创建 store 对象123 ...
前端路由的概念与原理1.什么是路由路由（英文:router)就是对应关系。路由分为两大类:
后端路由
前端路由
2.回顾:后端路由后端路由指的是:请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 课程中，express 路由的基本用法如下:
1234567const express = require('express')const router = express.Router()router.get('/userlist', funciton(req, res) { /* 路由的处理函数 */ })router.post('/adduser', funciton(req, res) { /* 路由的处理函数 */ })module.exports = router
3.SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。 ...
ref 引用1.什么是 ref 引用ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的 DoM 元素或组件的引用。默认情况下，组件的$refs 指向一个空对象。
2.使用 ref 引用 DOM 元素如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作:
3.使用 ref 引用组件实例如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作:
4.控制文本框和按钮的按需切换通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下:
5.让文本框自动获得焦点当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ef 引用，并调用原生 DOM 对象的.focus()方法即可。示例代码如下:
6. this.$nextTick(cb)方法组件的$nextTick(cb)方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的 DOM 异步地重新渲染完成后，再执行 c ...
