第一章
三大框架：
vue.js：
优点：单页面，更轻量，简单易学
缺点：不支持IE8
开发团队：中国国内团队开发，
作者：尤雨溪
angular：
优点：完善的框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能
缺点：比较笨重，学习成本高，不兼容IE6/7
开发团队：google谷歌
react
优点：速度快、跨浏览器兼容、单向数据流、兼容性好
缺点：并不是一个完整的框架，需要加上ReactRouter和Flux才能完成（目前百度阿里等企业已经开始弃用）
开发团队：facebook脸书
开发模式：
mvvm 全称：Model-View-ViewModel
MVP 全称：Model-View-Presenter
MVC 全称：Model-View-controller
第二章
vue核心：数据的双向绑定，组件化
实例化vue三部曲：
1、创建根实例
var app = new Vue({
//代码块
})
2、挂载根实例
var app = new Vue({
el：".app" => js选择元素方式/css选择器
})
3、绑定数据：显式声明数据和指向已有变量
var app = new Vue({
el：".app"，
data：{
age：24 => 显示声明数据，指向已有变量
}
})
Vue实例就是app，Vue实例属性就是app的属性
所有的选项前面加上$都是Vue实例属性，比如：$el,$data
app.$el === document.getElementById("app)
app.$data.age === app.age
文本插值{{数据变量}} 特性：双向绑定，可以进行运算和对象方法的执行
基本指令：
1、v-html：原始HTML
2、v-once：单向绑定
3、v-pre：跳跃编译，显示原始标签
4、v-bind：动态属性绑定 => 语法糖 ：
5、v-on：事件绑定 => 语法糖 @
第三章
v-bind：
单个语法格式
对象语法格式
数组语法格式，绑定类名
条件渲染：
v-if：true时渲染，false时不渲染
v-show：true时渲染，false时不渲染
区别：
1、本质方法：
v-if：是动态的向DOM树内添加或删除DOM元素
v-show：是通过控制display标签，控制隐藏
2、编译区别：
v-if：切换有一个局部编译/卸载的过程
v-show：其实在控制css
3、编译区别：
v-if：初始值为false，就不会编译了
v-show：都会编译
4、性能：
v-if：不停地销毁的重复
v-show：只编译一次，所以性能更好一点
v-on：事件类型 = "方法名"
v-on事件绑定修饰符：
.stop：阻止事件的传递，即阻止事件向上冒泡（写在子元素里）
.prevent：阻止对象的默认行为
.capture：使用事件捕获机制（写给父元素）
.self:自身事件修饰符
.once：绑定的事件只能触发一次
.keyup.keyCode键值修饰符
键值修饰符有两种方法：
第四章
console系列：
console.log()日志信息
console.info()一般信息
console.debug()除错信息
console.warn()警告提示
console.error()错误提示
console.group()和console.groupEnd()分组显示
console.dir()输出属性与方法
console.dirxml()输出节点代码
console.clear()清空控制台内容
console.time(),console.timeEnd()计时器
console.count()计数器
console.table()表格化
占位符：
%o 对象
%s 字符
%f 浮点数
%c CSS样式
%d或%i 整数
% 可以输出文字样式/图片
控制台快捷键：
$ 简单理解就是 document.querySelector
$$ 简单理解就是 document.querySelectorAll
$_ 是上一个表达式的值
dir 就是 console.dir
第五章
Vue实例从创建到销毁的过程，就是生命周期
生命周期钩子 = 生命周期函数 = 生命周期事件
创建阶段：
beforeCreate创建前： el 和 data 并未初始化
created创建后： data已经初始化，但el并未初始化
挂载阶段：
beforeMount挂载前： el 和 data 均已初始化，应用的 Virtual DOM（虚拟Dom）
mounted挂载后： 数据被渲染出来
更新阶段：
beforeUpdate更新前： 无法访问DOM
updated更新后： 可以访问DOM
销毁阶段：
beforeDestroy销毁前
destroyed销毁后
数据挂载方式：
el挂载
1、css选择器
2、js选择元素的方式
利用$mount()挂载
第六章
当逻辑较为复杂时，可以写在computed计算属性内，需要reture返回结果
计算属性包含getter和setter，利用getter读取，用setter设置，默认用getter读取就可以了
计算属性可以依赖其他计算属性
不仅可以依赖当前Vue实例的数据，还可以依赖其他实例数据
computed 基于他的依赖缓存，只有相关依赖发生改变时才会重新取值
methods 再重新渲染的时候，函数总是重新调用执行
Vue除了提供computed之外，还提供了一种侦听器：watch 但是由于相对繁琐不建议使用
第七章
class对象语法：
1. 单类名切换
2. 多类名切换
3. 类名共存
4. 对象包裹
5. 计算属性
class数组语法：
1. 普通数组
2. 表达式
3. 数组对象嵌套
4. 计算属性
内联样式style：
1. 对象语法
2.对象包裹语法
3.计算属性语法
第八章
JS迭代选择器：
1.forEach：里边为一个函数，可以接受3个参数，分别为elemen他，index，self
2.map：语法跟forEach有点像
3.every(有假即假)：接收一个返回值为布尔类型的函数
4.some(有真即真)：接收一个返回值为布尔类型的函数
基本指令：
1、v-cloak：遮罩指令 (防止屏幕闪动，需要配合[v-cloak]{display:none})
2、v-eles /v-else-if /v-if：加key
3、v-for：列表渲染 (加key)
遍历数组可以接收三个参数：element，index，self
遍历对象可以接收三个参数：value，key，index
控制循环次数的两种方法：
1、item of items.slice(0,2)
2、通过v-if控制
第九章
遍历对象：
for...in
遍历对象键 object.keys()
遍历对象键 object.values()
for...of
数组变异方法操作：
1.末尾添加-push
2.末尾删除-pop
3.开头添加-unshift
4.开头删除-shift
5.添加、删除、替换-splice
6.排序-sort
数组非变异方法：
1.筛选-filter
2.拼接-concat
3.截取-slice
ASCII码：小写字母的ASCII > 大写字母的ASCII码 > 数字的ASCII码
字符串和数字比较：
1. 纯数字和数字字符串：将字符串隐式转换或数字 比如 '222' > 3 true
2. 数字字符串和数字字符串：都转成ASCII码 比如 '222' > '3' true
3. 纯数字和数字字符串：将字符串隐式转换或数字 比如 '222' > 3 true
4. 纯字符串比较：转换成ASCII码
ASCII码值的两种方法：
charCodeAt()返回指定位置字符的Unicode编码
charAt()返回指定位置的字符
JS限制-数组操作：
1.直接设置/修改一项内容
vue.set(app.items,0,'p')
app.items.splice(0,1,'p')
2.修改长度
app.items.splice(0,0)
app.items.length = 8;
JS限制-对象操作：
vue.set(app.obj,'height','180')
第十章
v-model可以写在之间插入的值，不会生效(会覆盖文本域)
使用v-modle时，如果是中文输入法下，在拼音阶段，不会随时更新，可以用@input来代替
1.单选框/按钮：组合使用可使v-model相同，即可实现互斥，配合value使用
2.复选框/多选按钮：b-model会绑定到同数组类型的数据，配合value使用
3.下拉列表：想多选就加一个multiple
表单控件修饰符：
.lazy延迟修饰符
.number数字修饰符
.trim过滤空白修饰符
第十一章
全局组件：
注册步骤
1.注册组件compunent并命名
2.添加template内容
3.通过自定义组件名调用组件
作用域：全局都可以直接用
注册位置：在创建实例前注册
局部组件：
作用域：在当前实例作用域下有效
注册位置：在compunent选项内注册
组件当中除了可以用template，还可以用computed，methods,data必须都是函数，且必须将数据return出去
THML文档限制：
组件模板在某些情况下会受到HTNL限制，使用特殊的is属性来挂载组件
定义组件名的方式有两种：
kebab-case 短横线分割命名法
PascalCase 大驼峰
第十二章
组件模板template有单个根元素限制
注册处为子组件，引用出为父组件
父→子通过props传值，可以为字符串数组或对象
父组件数据变化传递给子组件，但是反过来不行，将父子组件解耦，避免子组件无意中修改父组件的状态，称为单项数据流
有两种情况需要改变props：
1.父组件传值→子组件保存初始值
2.被转变的原始值、
第十三章
深拷贝：自食其力，修成正果
浅拷贝：功力不够
数据类型：
基本数据类型：number，string，boolean，null，undefined，ES10
引用数据类型：array，object，函数
一级深拷贝：
1.slice()不带任何参数
2.concat()不带任何参数
3.直接遍历，添加到空数组
4.ES6三点...扩展运算符
多级深拷贝：
JQ的extend方法：$.extend(true,[],x)
JSON的序列化和反序列化：JSON.parse(JSON.stringify(X))
深拷贝和浅拷贝的区别：
浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
第十四章
父组件→子组件：
需要用到自定义事件，子组件通过$emit(event-name)触发事件，父组件通过设置@event-name = 'parentEventName'来监听
单向数据流是父子组件的核心概念，props是单向绑定的
第十五章
组件失活缓存：第十六章
过渡的类名
插入类：
v-enter：定义进入过渡的开始状态
v-enter-active：定义进入过渡生效时的状态
v-enter-to: 2.1.8版及以上，定义进入过渡的结束状态
移除类：
v-leave: 定义离开过渡的开始状态
v-leave-active：定义离开过渡生效时的状态
v-leave-to: 2.1.8版及以上，定义离开过渡的结束状态
过度名：
1.没有名字
2.有名字第十七章
cmd是command的缩写，即命令提示符
1.tasklist 列出任务进程
2.taskkill /f /pid 强制关闭进程
3.cd\ 跳转到当前硬盘根目录
4.d: 跳转到硬盘d的根目录
5.cd.. 跳转到上一层目录
6.cd 显示当前文件路径
7.cd /d c:\users\public 跳转到其他硬盘的其他文件夹
8.ctrl+c 中断命令执行
9.dir 显示文件列表
10.md 创建一个新文件夹
11.rd 删除文件夹
12.type nul>文件名.后缀 创建文件
13.echo 内容 >> 写入文件内容
14.echo 内容 > 覆盖内容
15.del 删除文件
16.move 移动文件/文件夹
17.xcopy 拷贝文件/文件夹
18.ren或rename 重命名
19.tree 以树形结构显示出目录
20.type 文件名 显示文本文件的内容
21.cls 清空cmd窗口内容
22.title 标题名字 更改CMD窗口标题名字
第十八章
Vue-cli是vue的脚手架工具
Node.js是一个JS运行环境，是一个让 JS运行在服务端的开发平台，是服务器端的JS解释器，实质是对Chrome V8引擎进行了封装
npm其实是Node.js的包管理工具（node.js package manager）
npm特性：根据依赖关系下载好相应的代码库
安装：npm install [-g]
卸载：npm uninstall [ -g ]
更新：npm update [ -g ]
更新全部插件： npm update
查看当前目录已安装插件：npm list [ -g ]
cnpm => 淘宝npm镜像
cnpm与npm用法相同，npm服务器在境外，而cnpm服务器在境内，推荐使用cnpm
第十九章
Vue单组件
1.template：写HTML代码定义展示模块信息
2.script：写JS代码导出组件模块
3.style：写CSS代码定义组件模块样式 scoped样式作用域
第二十章
组件导出：export default{}
组件导入：
1.import...from
2.在components组件选项命名引入
3.template模板通过标签引用
require和import...from区别：
执行时机：require 是运行时才执行， import 是编译时执行
导入位置：require可以理解为一个全局方法，所以它可以在任何地方导入组件模块，而import必须写在文件的顶部
性能：require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量；而import只需要依据import中的接口在编译时引入指定模块，所以性能稍高
在webpack里通过插件vue-loader处理vue单组件
webpack是一个模块打包工具，vue-loader就是把一种语言转换为另一种语言的工具
自动化构建模块工具
第二十一章
SPA(single单-page页面-rich富-application应用)
Webapck 主要适用场景是SPA，SPA通常是由一个html文件和一堆按需加载的js组成
运行项目的命令：cnpm run dev/stare
打包生产的命令：cnpm run build
HMR Hot Module Replacement 模块热更新
WDS Webpack Dev Server 本地服务器
webpack配置文件其实就是一个JS文件，一般会拆成3个dev，base，prod里面包括几个要点：
1、entry，
2、ou'tput，
3、loaders，
4、plugins，
5、mode
webpack主体：
1、build(webpack模块的相关配置文件)
2、config(vue的各个环境配置文件)
3、dist(压缩打包名的文件)
4、node-modules(项目依赖包)
5、index.html(挂载页面)
6、src(写的源代码)
1.assets(静态组件)
2.component(基础组件)
3.app.vue(根组件)
4.main.js(入口文件)
7、static(存放静态文件)
8、babelrc(js语法的编译转换器文件)
9、editorconfig(编辑器配置文件)
10、gitignore(git上传时沪铝的文件)
11、postcssrc.js(浏览器兼容前缀处理)
12、package.json(项目的描述文件)
13、package-lock.json(锁定package.json依赖包)
14、readme.md(读我文件)
第二十二章
package.json是项目的描述文件，里面包括：
1.name 项目名
2.version 版本号
3.description 相关描述
4.author 作者
5.private 是否私有项目
6.script npm命令行缩写
7dependencies 项目生产依赖
8.devDependencies 项目开发依赖
9.engines 项目运行的node和npm版本范围
10.browserslist 浏览器列表
第二十三章
--save 将保存配置信息到package.json的dependencies节点中 简称-S
--save-dev 将保存配置信息到package.json的devDependencies节点中 简称-D
第二十四章
图片使用注意：
template中使用 ../../static或者static/
script的data数据里使用 static/ 或者 ./static
style的背景图使用 ../../static/
打包路径问题：修改config/index.js，在build开发配置下的assetsPublicPath的路径前加.
第二十五章
路由跳转两种方式：
模板生命式第二十六章
CSS预编译一般指CSS 预处理器，css是一门非程方式语言，是标记性语言
目前最主流的3个预处理器：Less，sass和stylue
变量：
1.选择器变量
2.属性变量
3.属性值变量
4.url变量
5.声明变量
变量作用域：局部>全局，就近原则
注释：
单行注释 // 不会出现在编译后的CSS文件中
多行注释 /**/ 会出现在编译后的CSS文件中
变量定义变量，即变量的传递性@@
嵌套语法：
Less模仿HTML的结构，使用嵌套层次关系，使代码更简洁
可以结合&，达到同级伪元素效果(同级关系)
结合&可以通过名字实现拼接(同级关系)
第二十七章
混合：
1.无参数混合
2.带参数混合
3.默认参数混合：
不传参时使用默认值
传参时覆盖默认值
作用域：如果当前作用域有声明则会优先使用，没有则会继承父级
条件判断：if判断
逻辑运算：and与 or或 hot非
当判断相等时，使用 = 实现，没有 == 和 ===，且只能判断数值，不能判断类型
多条件判断：when语法
数学函数：
ceil(向上取整数)
floor(向下取整数)
round(四舍五入)
abs(绝对值负数永远是正数)
min(两个值取最小值)
max(两个值取最大值)
JS语句：
1.在字符串前加~
2.通过''字符串模板引用
JS in CSS目前是种趋势
