前端路由的概念与原理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 ...
watch 侦听器1.什么是 watch 侦听器watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。
2. watch 侦听器的基本语法开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下︰
3.使用 watch 检测用户名是否可用监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用
4.immediate 选项默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。实例代码如下:
5.deep 选项当 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项,代码示例如下:
6.监听对象单个属性的变化如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器:
7.计算属性 vs 侦听器计算属性和侦听器侧重的应用场景不同:计算属性侧重于监听多个值的变化，最终计算并返回一个新值侦听器侧重 ...
props 验证1.什么是 props 验证指的是:在封装组件时对外界传递过来的 props 数据进行合法性的校验 y 从而防止数据不合法的问题。
使用数组类型的 props 节点的缺点 ∶ 无法为每个 prop 指定具体的数据类型。
2.对象类型的 props 节点使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验，示意图如下:
3. props 验证对象类型的 props 节点提供了多种数据验证方案，例如:
基础的类型检查
多个可能的类型
必填项校验
属性默认值
自定义验证函数
3.1 基础的类型检查可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据:
3.2 多个可能的类型如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型示例代码如下:
3.3 必填项校验如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将其设置为必填项:
3.4 属性默认值在封装组件时，可以为某个 prop 属性指定默认值。示例代码如下:
3.5 自定义验 ...
单页面应用程序1.什么是单页面应用程序单页面应用程序（英文名：Single Page Application)简称 SPA,顾名思义，指的是一个 Wb 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。
2.单页面应用程序的特点单页面应用程序将所有的功能局限于一个 Wb 页面中，仅在该 web 页面初始化时加载相应的资源（HTML、JavaScript 和 CSS)。
一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换 HTML 的内容，从而实现页面与用户的交互。
3.单页面应用程序的优点SPA 单页面应用程序最显著的 3 个优点如下：
① 良好的交互体验
单页应用的内容的改变不需要重新加载整个页面
获取数据也是通过 AjaX 异步获取
没有页面之间的跳转，不会出现“白屏现象”
② 良好的前后端工作分离模式
后端专注于提供 API 接口，更易实现 API 接口的复用
前端专注于页面的渲染，更利于前端工程化的发展
③ 减轻服务器的压力
服务器只提供数据，不负责页面的合成与逻辑的处理 ...
Vue 简介略
Vue 的基本使用1.基本使用步骤① 导入 vue.js 的 script 脚本文件② 在页面中声明一个将要被 Vue 所控制的 DOM 区域③ 创建 vm 实例对象(vue 实例对象)
2.基本代码与 MVVM 的对应关系
Vue 的调试工具略
Vue 的指令与过滤器1.指令的概念指令(Directives)是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
Vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令② 属性绑定指令③ 事件绑定指令④ 双向绑定指令⑤ 条件渲染指令⑥ 列表渲染指令
注意：指令是 Vue 开发中最基础、最常用、最简单的知识点。
1.1 内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
v-text
{{}}
v-html
v-text用法示例
注意：v-text 指令会覆盖元素内默认的值。
双花括号语法1vue提供的 {{}} 语法，专门用来解决v-text会 ...
前端工程化1.小白眼中的前端开发 vs 实际的前端开发小白眼中的前端开发：
会写 HTML + CSS + JavaScript 就会前端开发
需要美化页面样式，就拽一个 bootstrap 过来
需要操作 DOM 或发起 Ajax 请求，再拽一个 jQuery 过来
需要渲染模板结构，就用 art-template 等模板引擎
实际的前端开发：
模块化 (js 的模块化、css 的模块化、其它资源的模块化）
组件化 (复用现有的 UI 结构、样式、行为）
规范化 (目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理)
自动化（自动化构建、自动部署、自动化测试）
2. 什么是前端工程化前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的“4 个现代化”：模块化、组件化、规范化、自动化
3.前端工程化的好处前端工程化的好处主要体现在如下两方面：① 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面② 最大程度地提高了前端的开发效率，降低了技术选型、前后端联 ...
目录总览
1.HTML5提高
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本都是 IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性
HTML5 有更大的技术集，允许更多样化和强大的网站和应用程序。增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3 特性。这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5
1.新增语义化标签以前布局，我们基本用 div 来做。 div 对于搜索引擎来说，是没有语义的。
新增语义化标签如下：
< header > : 头部标签
< nav >: 导航标签
< article >: 内容标签
< section >: 定义文档某个区域
< aside >: 侧边栏标签
< footer >: 尾部标签
注意：
这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中， ...
目录总览
1、VS 插件推荐
插件
说明
Chinese
中文语言包
Open in Browser
右击选择浏览器打开 html 文件
JS-CSS-HTML Formatter
每次保存，都会格式化代码
Auto Rename Tag
自动重命名配对的 HTML/XML 标签
CSS Peek
追踪至样式
escook-theme
黑马刘龙彬老师主题
Community Material Theme
设置颜色主题
Live Server
自动监测代码修改并在浏览器响应
vscode-icons
设置文件图标作主题
2、基本结构标签
标签名
定义
说明
<html></html>
HTML 标签
页面中的最大的标签，我们称为根标签
<head><head>
文档的头部
注意在 head 标签中我们必须要设置的标签是 title
<title></title>
文档的标题
让页面拥有一个属于自己的网页标题
<body>< ...
目录总览
1、精灵图 Sprites
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
1.1、精灵图的使用使用精灵图的核心：
精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中
这个大图片也称为 sprites 精灵图 或者 雪碧图
移动背景图片的位置，此时可以使用 background-position
移动的距离就是这个目标图片的 x 和 y 坐标，注意网页中的坐标有所不同（x 轴右边走是正值，左边走是负值，y 轴下边走是正值，上边走是负值）
一般情况下都是往上往左移动，所以数值是负值
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
精灵图的优点很多，但是缺点也很明显
图片文件还是比较大的
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont
2、字体图标 iconfont字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 ...
