1 Vue是什么？
一套用于构建用户界面的渐进式JS框架，Vue被设计为自底向上逐层应用，核心库只关注视图层，方便与第三方库或既有项目整合。
JS：具有函数优先的轻量级，解释型或即时编译型的编程语言。
web项目的三层结构：视图层、业务逻辑层、持久层
视图层：网页的界面，可以用html，jsp，swing来实现
业务逻辑层：业务层用来实现整体的业务逻辑，如前台获得了数据，逻辑层去解析，数据校验等操作
持久层：持久层用来固化数据，如常用的DAO层，操作数据库将数据入库
1.1 需要了解的知识
HTML
CSS
JavaScript
1.2 基本内容
安装
首先安装npm，然后升级，接着安装cnpm
cnpm：为淘宝的镜像及其命令
最后通过cnpm install vue安装
路径：D:\code\node-v12.9.0-win-x64
命令行工具
Vue.js提供一个官方命令行工具，可用于快速搭建大型单页应用
（1）全局安装 vue-cli
cnpm install --global vue-cli
（2）创建一个基于webpack模板的新项目
vue init webpack my-project
（3）配置
回车
（4）启动
cd my-project
cnpm install
cnpm run dev
1.3 目录结构
build：项目构建（webpack）相关代码
config：配置目录，包括端口号等。
node_modules：npm加载的项目依赖模块
src：开发目录，包含如下内容
- assets：放置一些图片，如logo
- components：目录里面放了一个组件文件，可以不用
- App.vue：项目入口文件，可以直接将组件写在这里
- main.js：项目的核心文件
static：静态资源目录，如图片、字体等
test：初始测试目录，可删除
.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
index.html：首页入口文件，可以添加一些meta信息或统计代码啥的
package.json：项目配置文件
README.md：项目说明文档，markdown格式
一般修改后会自动刷新，重新打开页面http://localhost:8080/即可
1.4 Vue.js起步
每个Vue应用都需要通过实例化Vue来实现
var vm = new Vue({
//选项
})
el 参数，是DOM元素的id，意味着改动全部在以上指定的div内，div外部不受影响，需要加 #
data 用于定义属性
methods 用于定义的函数，可以通过return返回函数值
{{}} 用于输出对象属性值和函数返回值
除了数据属性，Vue实例还提供一些有用的实例属性与方法。 都有前缀$，以便与用户定义的属性区分开来（如el、data）
1.5 Vue.js语法
Vue.js模板语法
使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据
核心是允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统
优点：结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上
插值
文本：数据绑定最常见的形式就是使用{{…}}的文本插值
Html：使用v-html指令用于输出html代码
属性：使用v-bind输出HTML属性中的值
表达式：Vue.js提供了完全的JS表达式支持
指令
指令：带有v- 前缀的特殊属性
参数：在指令后以冒号指明
？修饰符：以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
用户输入
用户输入：在input输入框中使用v-model指令来实现双向数据绑定
对于按钮的事件可以使用v-on监听事件，并对用户的输入进行响应
过滤器
过滤器：允许自定义过滤器，被用作一些常见的文本格式化，由“管道符”指示
{{ message | capitalize }}
过滤器函数接受表达式的值作为第一个参数，第二个参数为JS函数
过滤器可以串联 {{ message | filterA | filterB }}
过滤器是JS函数，因此可以接受参数 {{ message | filterA('arg1', arg2) }}
缩写
缩写：v-bind 对应 空， v-on 对应@
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
语句
条件判断
v-if：根据表达式seen的值（true 或 false）来决定是否插入p元素
v-else：给 v-if 添加一个 else 块
v-else-if：用作 v-if 的 else-if 块，链式的多次使用
v-show：根据条件展示元素
循环语句
v-for： 需要以 site in sites形式的特殊语法，sites 是源数据数组并且 site 是数组元素迭代的别名
可以通过一个对象的属性来迭代数据
对象的排序： (value, key, index)
v-for：也可以循环整数
属性
计算属性
关键词：computed
提供的函数将用作属性的getter（默认），可以自己提供一个setter
computed vs methods
可以使用methods来替代computed
computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值
methods在重新渲染的时候，函数总会重新调用执行
监听属性
watch：响应数据的变化
watch对象创建了两个方法
watch会实时监听数据变化并改变自身的值
样式绑定
vue.js class
class 与 style 是HTML元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性
class 属性绑定
1）为v-bind:class 设置一个对象，从而动态地切换class
2）在对象中传入更多属性用来动态切换多个class
3）直接绑定数据里的一个对象
4）绑定返回对象的计算属性 常见且强大的模式
5）可以把一个数组传给 v-bind:class
style（内联样式）
1）在v-bind:style直接设置样式
2）直接绑定一个样式对象，让模板更清晰
3）使用数组将多个样式对象应用到一个元素上
事件处理器
事件监听 v-on
1）使用一个方法来调用 JS方法，v-on接收一个定义的方法来调用
2）用内联 JS语句
事件修改符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节
通过由点(.) 表示的指令后缀来调用修饰符
- .stop
- .prevent
- .capture
- .self
- .once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按键修饰符
Vue 允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
Vue.js 表单
v-model 指令在表单控件元素上创建双向数据绑定
v-model会根据控件类型自动选取正确的方法来更新元素
（input, textarea）
复选框：如果是一个为逻辑值，如果是多个则绑定到同一个数组
checked:false, checkedNames:[]
（checkbox）
单选按钮：picked:''
（radio）
select列表：selected: ''
（select）
修饰符：
.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，但添加一个修饰符lazy，可以转变为在change事件中同步 ：
input v-model.lazy="msg"
.number 如果想自动将用户的输入值转为Number类型（如果原值的转换结果为NaN 则返回原值），可以添加一个修饰符number给v-model来处理输入值：
input v-model.number="age" type="number"
这通常很有用，因为在type="number"时HTML中输入的值也总是会返回字符串类型
.trim
自动过滤用户输入的首尾空格
Vue.js 组件
组件 Component 可以扩展HTML元素，封装可重用的代码
注册一个全局组件语法格式如下： Vue.component(tagName, options)
tagName 为组件名， options 为配置选项
options 的参数包含有： template，data（必须是一个函数），methods
可以使用 <tagName></tagName>来调用组件
全局组件：所有实例（new Vue() ）都能用全局组件
局部组件：
Prop：
Prop验证：组件可以为props指定验证要求。为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。
当prop验证失败时，Vue将会产生一个控制台的警告。
type可以是下面原生构造器：String，Number，Boolean，Array，Object，Date，Function，Symbol.
type也可以是一个自定义构造器，使用 instanceof 检测
自定义事件
父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，就需要自定义事件。
v-on 绑定自定义事件，每个Vue实例都实现了事件接口
使用$on(eventName)监听事件
使用$emit(eventName)触发事件
如果想在某个组件的根元素上监听一个原生事件，可以使用.native 修饰v-on
Vue.js 自定义命令
通过Vue.directive（‘order_name’,{function_name：function(args){args.function_name()}}）注册一个全局指令
和组件一样，还有局部指令
钩子
指定定义函数提供了几个钩子函数（可选） 对应的 function_name
bind：只调用一次，指定第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：…
componentUpdated：
unbind
钩子函数参数 对应args
el：指定所绑定的元素，可以用来直接操作DOM
binding：一个对象，包含以下属性：
- name
- value
- oldValue：指令绑定的前一个值，仅在update、componentUpdated钩子中可用
- expression 绑定值的表达式或变量名，例如 v-my-directive=“1+1” expression的值是"1+1"
- arg 传给指令的参数，例如 v-my-directive:foo arg的值是 ”foo"
- modifiers 包含修饰符的对象，例如 v-my-directive.foo.bar 修饰符对象 modifiers 的值是{foo:true，bar:true}
vnode：Vue编译生成的虚拟节点 （不懂）
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用
有时候不需要其他钩子函数，可以简写函数，如下格式：
Vue.directive('runoob', function (el, binding) {
// 设置指令的背景颜色
el.style.backgroundColor = binding.value.color
})
指令函数可接受所有合法的 JS 表达式
Vue.js路由
Vue.js 路由允许我们通过不同的URL访问不同的内容
可以实现多视图的 单页Web应用 （single page web application, SPA）
依赖库 ： vue-router库， 中文文档
实例：Vue.js + vue-router 可以很简单的实现单页应用
router-link 组件，用于设置一个导航链接，切换不同的HTML内容，to属性为目标地址，即要显示的内容
vue-router加进来，然后配置组件和路由映射，再渲染，即可。
router-link属性：to,replace,append,tag,active-class,exact-active-class,event
Vue.js 过滤 & 动画
transition
1.6 Vue.js实例
Todolist
localStorage属性
localStorage.setItem('todolist',JSON.stringify(this.todolist))
if(localStorage.getItem('todolist')){
this.todolist = JSON.parse(localStorage.getItem('todolist'))
}
demo
/src/router/index.js 定义了 @/components/HelloWorld @pages/CMS
/src/main.js 定义了vue组件 导入了 router、components、template、App
1.7 前端页面搭建过程
vue --version 2.9.6
更新vue-cli到3.0版本：
cnpm uninstall -g vue-cli
cnpm install -g @vue/cli
新版本：@vue/cli 4.3.1
https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve
cnpm run serve
1.8 开发计划
增加radio按钮，进行excel显示
实例生命周期钩子
created 一个实例被创建之后执行：渲染整个HTML文档时，DOM节点，css规则树与js文件被解析后，但是没有进入被浏览器render过程，上述资源上尚未挂载在页面上。 实例已经被初始化，但是还没有挂载到$el上。
mounted 对浏览器来说，已经完成了DOM与CSS规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令
updated
destoryed
2 HTML
2.1 HTML是什么？
Hyper Text Mark-up Language 超文本标记语言
HTML的语法就是给文本加上表明文本含义的标签（Tag）
<>：HTML文档都有一个html
head：title，对整个文档的描述，关键字等
body：文档的具体内容
a：表示链接，href属性指具体的url
2.2 HTML文档可以包含的内容
文本，链接，图片，列表，表格，表单，框架等
表单：通常有文本输入框，按钮，多选框，单选框，下拉列表等
框架：使页面里面能包含其他的页面
2.3 HTML文档格式详细说明
转换字符
< 对应 < > 对应 > & 对应 &
标签具备属性
img标签有src属性：指明图片的地址
width和height属性：说明图片的宽度和高度
标签嵌套
某些标签包含的内容中还可以有新的标签，子标签和父标签可相同
符合忽略
所有的空白符（空格、Tab、换行、回车）会被浏览器忽略
对空格的处理方式是所以连续的空格被当成一个空格
如果要显示连续的空格（比如为了缩进），用 代表空格
2.4 常用标签介绍
文本
font：用于改变字体、字号、文字颜色
属性：size、color、face=‘黑体’
b：加粗
i：斜体
u：下划线
abbr：表示缩写
em：表示强调
strong：表示更强地强调
cite：表示引用
address：表示地址
h1,h2,h3,h4,h5,h6：表示一级、二级、三级标题…
图片
hr：用于在页面上添加横线
属性：width,color
img：用于在页面上添加图片
属性：src指定图片的地址，alt指图片无法打开时的文本
链接
a：超链接
属性：href指定了链接到的地址
包含：可以是文本，也可以是图片
分段与换行
由于HTML文档会忽略空白符，所有要保证正常的分段换行的话，必须指出哪些文字是属于同一段落的
p：段落
br：换行。不表示段落的开始或结束，所以通常没有结束标签。
div：标明不同的部分。比如一个典型的页面可能包括三个部分：页头、主体、页脚。
表格
HTML文档在浏览器里通常是从左到右，从上到下地显示的，到了窗口右边就自动换行。
为了实现分栏的效果，很多人使用表格（table）进行页面排版
table：表格
包含：几个tr（代表表格里的一行）
tr包含（td：每个td代表一个单元格）
tr：还可以被table里的 thead（表头）、tbody（表正文）、tfoot（表脚）包含
如果表格很大，一页打印不完，thead、tfoot将在每一页出现。
th和td很相似，也用在tr里边，不同的是th代表这个单元格是它所在的行或列的标题
列表
表格用于表示二维数据，列表对应一维数据
列表：无序（ul）、有序（ol）、定义列表（dl）
ul、ol都用li包含列表项目
框架
框架使一个窗口能同时显示多个文档，主框架页里面没有body标签，用frameset代替
frameset的属性：Rows、Cols用于指定框架集里有多少行（列），以及每行（列）的高度（宽度）
frameset标签可以包含frame标签，每个frame标签代表一个文档（src属性指定文档的地址）
frameset也可以包含frameset
表单
HTML表单 用于收集不同类型的用户输入
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域（textarea），下拉列表，单选框（ratio-buttons），复选框（checkboxes）等
表单使用表单标签 form 来设置
HTML表单-输入元素
多数情况下被用到的表单标签是输入标签 input
输入类型是由类型属性 type 定义的，常用输入类型有：text, password, radio, checkbox, submit
属性还有 name：为控件命名 value：提交数据到服务器的值 checked：？
表单标签
form 定义供用户输入的表单
input 定义输入域
textarea 定义文本域（一个多行的输入控件）
label 定义了 input 元素的标签，一般为输入标题
fieldset 定义了一组相关的表单元素，并使用外框包含起来
legend 定义了 fieldset 元素的标题
select 定义了下拉选项列表
optgroup 定义选项组
option 定义下拉列表中的选项
button 定义一个点击按钮
datalist 指定一个预先定义的输入控件选项列表
keygen 定义了表单的密钥对生成器字段
output 定义一个计算结果
2.5 HTML DOM
DOM Document Object Model 文档对象模型，是HTML和XML文档的编程接口
HTML DOM定义了访问和操作HTML文档的标准方法
DOM以树结构表达HTML文档
3 CSS
3.1 什么是CSS？
Cascading Style Sheets 层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一个
3.2 CSS语法
CSS规则
CSS规则由两个主要的部分构成： 选择器，以及一条或多条声明
选择器 h1 声明{属性color: 值blue}
选择器：需要改变样式的HTML元素
每条声明：一个属性和一个值组成，由冒号分开，以分号结束，以大括号括起来
id和class选择器
id
CSS中id选择器以“#”来定义
class
css中类选择器以一个点“.”来显示
也可以指定特定的HTML元素使用class p.center
4 JavaScript
4.1 什么是JavaScript？
JavaScript是Web的编程语言，确定了网页的行为。
脚本语言，可用于HTML与web，服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
轻量级的编程语言
可插入HTML页面的编程语言
插入HTML页面后，可由所有的现代浏览器执行
直接写入HTML输出流
document.write("")
使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖
对事件的反应
alert() 有助于代码测试
onclick 点击事件
改变HTML内容
document.getElementById(“some id”) HTML DOM中定义的
DOM（Document Object Model）（文档对象模型）
用于访问HTML元素的正式W3C标准
改变HTML图像
动态 地改变HTML image 的来源 src
改变HTML样式
改变HTML元素的样式，属于改变HTML属性的变种
验证输入
JS常用于验证用户的输入，需要严格判断，一般添加正则来判断
4.2 JavaScript基础知识
利用Chrome dev tools
https://developers.google.cn/web/tools/chrome-devtools
用法
script：浏览器会解释并执行位于script之间的JS代码
JS函数和事件
可以在HTML文档中放入不限数量的脚本，脚本可存于HTML的body或head或两者都放
通常：把函数放入head部分，统一安置
也可以把脚本保存到外部文件（通常包含多个网页使用的代码）.js
如需使用外部文件，script标签的src属性中注明.js文件
外部脚本不能包含script标签
输出
没有任何打印或者输出的函数
显示数据
window.alert() 弹出警告框
document.write() 将内容写到HTML文档中
innerHTML 写入到HTML元素
console.log() 写入到浏览器的控制台
语法
字面量
数字字面量（整数、小数、科学计数）
字符串字面量（单引号、双引号）
表达式字面量
数组字面量
对象字面量 {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数字面量 function myFunction(a, b) { return a * b;}
变量
关键字 var 定义变量，等号为变量赋值
语句用分号分隔
未使用值来声明的变量，其值实际上是undefined
关键字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TRHFjOot-1614049518677)(C:\Users\dlz\AppData\Roaming\Typora\typora-user-images\image-20200428101120749.png)]
注释
// 单行注释
/* */ 多行注释
数据类型
值类型（基本类型）：String、Number、Boolean、Null、Undefined、Symbol
引用数据类型：Object、Array、Function
动态类型-相同的变量可用作不同的类型
布尔
true
false
对象
两种访问对象属性寻址方式
.lastname
[“lastname”]
对象方法
对象的方法定义了一个函数，并作为对象的属性存储
访问对象的fullName()方法 person.fullName()
访问对象的fullName属性，将作为一个定义函数的字符串返回 person.fullName
有多种方式用来创建，使用和修改属性和方法
Undefined和Null
Undefined这个值表示变量不含有值
可以通过将变量的值设置为null来清空变量
声明变量类型
可以通过关键词“new”来声明 new String/Number/Boolean/Array/Object
函数
JS语句可以写在函数内，函数可以重复引用
关键词 function
带参数的函数
带有返回值的函数
局部JS变量
全局JS变量：在函数外声明的变量，网页上的所有脚本和函数都能访问
JS变量的生存期
向未声明的JS变量分配值
未声明的JS变量可以通过delete删除，而声明后的变量无法通过delete删除
均可通过window.变量名 进行访问
作用域
局部作用域
全局变量：如果变量在函数内没有声明（没有使用var关键词），该变量为全局变量
事件
HTML事件是发生在HTML元素上的事情：比如页面完成加载、input字段改变时、按钮被点击
HTML元素中可以添加事件属性
<some-HTML-element some-event='JS 代码'>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
常见的HTML事件
onchange HTML元素改变
onclick 点击元素
onmouseover 移动鼠标
onmouseout 移除鼠标
onkeydown 按下键盘按键
onload 完成页面加载
更多参见：HTML DOM事件
功能
处理表单验证、用户输入、用户行为及浏览器动作
其他
大小写敏感
使用Unicode字符集
驼峰法的命名规则：lastName
JavaScript实例
JavaScript实例
JavaScript对象实例
JavaScript浏览器支持实例
JavaScript HTML DOM实例
5 学习记录
HTML篇
CSS篇
CSS 基本内容-CSS语法
CSS3 教程-
CSS 响应式设计-
CSS 参考手册-
JS篇
JS 基本内容-JS字符串
JS 函数-
JS HTML DOM-
JS 高级教程-
JS 浏览器BOM-
JS 库-
JS 实例-
JS 参考手册-
Vue篇
6 Node.js
6.1 Node.js 是什么？
运行在服务端的 JS
一个基于Chrome JS运行时建立的一个平台
一个事件驱动I/O服务端JS环境，基于Google的V8引擎，V8引擎执行JS的速度非常快、性能非常好
安装目录：D:\code\node-v12.9.0-win-x64
6.2 NPM使用介绍
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。
npm install -g cnpm --registry=https://registry.npm.taobao.org
7 开发过程记录
Tips
控件： element-ui
axios 请求数据
2020/05/18-22
学习element，优化整体布局
vue版本回退到 3.5.5
19日 新建post接口，将领域实体根据案例进行了绑定
设计自定义事件，进行统计信息的及时处理
待开发功能：
统计信息的优化；
将数据发送给解析接口：定义一个可以处理模拟数据的后台，开发一个关键字识别的模型
将解析接口的数据回传给各个模块进行画图
6972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
