1.前端技术发展史简介
1.1 前端技术发展史
（1）1990年，HTML（超文本标记语言）诞生，主要用来做静态网页，由一些标签+css等组成。
（2）1995年，JSP、PHP、ASP的相继出现，可以使用它们来完成动态网页，但是后台非常臃肿。
（3）Ajax（Asynchronous Javascript And XML，即异步Javascript和XML，也称为局部刷新技术）成为主流。
（4）2008年，HTML5出现了，也标志着前端的春天来了。
（5）2010年，NodeJs出现，它的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。在这之后，一大批前端框架涌现，其中就包含Vue，Vue的最初发布时间为2014年7月。
1.2 MVVM架构
我们之前用过的SpringMVC框架基于MVC架构，而MVC的意思是：Model (模型)、 View(视图) 、Controller(控制器)。
前端框架Vue则基于MVVM框架，意思为：Model(模型) 包括数据和一些基本操作 、View (视图) 页面渲染结果 、 ViewModel(视图模型)模型与视图间的双向操作。其中Vue框架最具特色的为可以实现数据的双向绑定，需要v-model指令来实现，只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。具体流程如图：
2.NodeJS&NPM环境
NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们需要先安装node及NPM工具.
NodeJs下载：https://nodejs.org/en/download/
（1）安装nodejs工具包，安装非常简单，一直下一步即可。安装完毕之后可以在cmd控制台输入以下指令查看及完成相应操作。
node -v 查看node版本信息
npm -v 查看npm的版本信息
npm install npm@latest -g 升级为最新版(需要升级)
（2）在idea工具上，安装nodejs插件，
安装完毕之后，重启即可。
（3）创建一个static web项目
（4）在Terminal控制台输入npm init -y（相当于是创建了一个maven项目）
（5）安装vue，有如下指令：
npm install -g vue 全局安装vue（所有项目都可以使用）
npm install vue 局部安装vue（当前项目使用，推荐）
npm uninstall vue 卸载vue
npm update vue 更新vue
3.ECMAScript6
3.1 什么是ECMAScript
web1.0时代：
最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。
web2.0时代：
- 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
- 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
- 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。
所以，ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。
3.2 ECMAScript历史
- 1997年而后，ECMAScript就进入了快速发展期。
- 1998年6月，ECMAScript 2.0 发布。
- 1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。
- 2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。
一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。
ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中 - 2009年12月，ECMAScript 5 发布。
- 2011年6月，ECMAScript 5.1 发布。
- 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。
ES6就是javascript用的最多语言规范.被浏览器实现了.
3.3 ES6常用的一些新特性
（1)let与const
let相较于var，它是块级的（相当于局部变量）
for(var j = 0;j < 10;j++){
console.log(j)
}
console.log(j);
for(let i = 0;i<10;i++){
console.log(i);
}
console.log(i);const声明常量不能修改（相当于final）
（2）解构表达式
数组解构：
//数组解构
var arr = [1,2,3];
var [a1,a2,a3] = arr;
console.log(a1,a2,a3);对象解构：
//对象解构
var obj = {"name":"小困困","age":25}
var {name,age} = obj;
console.log(name,age);（3）箭头函数
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版：
eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
// 简写版：
eat3(food){
console.log(this.name + "在吃" + food);
}箭头函数+解构表达式写法：
//箭头表达式+解构表达式
//以前写法
var person = {
name:"小憨憨"
}
let a = function (person) {
console.log(person.name);
}
a(person);
//箭头表达式+解构表达式写法
var b = ({name}) =>{
console.debug(name);
}
b({"name":"小憨憨"});（4）Promise对象
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。
案例：
//(4)promise
const p = new Promise((resolve, reject) =>{
// 这里我们用定时任务模拟异步
setTimeout(() => {
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功！num:" + num)
} else {
reject("出错了！num:" + num)
}
}, 300)
}).then(function (msg) {
console.log(msg);
}).catch(function (msg) {
console.log(msg);
})（5）模块化
模块化是一种思想,这种思想在前端有多种规范常见的规范有commonJs(nodeJS),cmd/amd(可以在浏览器中使用),es6(可以在浏览器中使用).
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。es6模块功能主要由两个命令构成：export和import。
- export命令用于规定模块的对外接口，
- import命令用于导入其他模块提供的功能。
导出：
也可简写为：
注意：
1.可以导出任何东西
2.可以省略名字
导入：
4.Vue介绍及使用
4.1 什么是Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：https://cn.vuejs.org/
4.2 Vue的特性
- 轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。 - 数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。 - 指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。 - 插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。 - 组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
4.3 Vue的入门
Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
下载Vue文件到本地，官方提供两个版本：
https://cn.vuejs.org/v2/guide/installation.html 引入vue.js
<script src="node_modules/vue/dist/vue.js"></script>4.3.1 Vue实例挂载(el)的标签
每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。
<body>
<div id="app">
{{ message }}
</div>
<script>
// 创建一个vue对象
/**
* el:挂载
* data:数据
*
*/
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
})
</script>
</body>4.3.2 Vue中的数据(data)详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上
4.3.3 Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象
4.4 Vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
4.5 Vue的表达式
支持算术运算：
<!--简单表达式 -->
<h1>{{5+5}}</h1>
<!-- +:运算，字符串连接 -->
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<!-- -：减法 自动给你转-->
<h1>{{"5"-"5"}}</h1>
<h1>{{5*5}}</h1>
<h1>{{"a"-"b"}}</h1>
<!-- *:乘 -->
<h1>{{"5"*"5"}}</h1>
<!-- / 除-->
<h1>{{5/5}}</h1>
<!-- 三目运算-->
{{show?"男":"女"}}字符串操作：
<!--字符串操作-->
{{"一点寒芒先到，随后抢出如龙"}}<br/>
{{"一点寒芒先到，随后抢出如龙".length}}<br/>
{{"一点寒芒先到，随后抢出如龙".substring(2,6)}}<br/>
{{"abcdefg".toUpperCase()}}<br/>对象数组操作：
<body>
<div id="app">
<!--如果有toString这个方法会自动调用-->
{{user}}<br/>
<!--转为Json格式-->
{{JSON.stringify(user)}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.fight()}}<br/>
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
{{hobbys.toString()}}<br/>
{{hobbys.join("------")}}<br/>
</div>
<script>
var user = {
name:"吕布",
age:180,
fight(){
console.log("神挡杀神，佛挡杀佛");
},
toString(){
return this.name+"的年龄是"+this.age;
}
}
// 创建一个vue对象
var app = new Vue({
el: '#app',
data: {
user:user,
hobbys:["c","t","r","l"]
}
})
</script>
</body>4.6 Vue的指令
(1)v-text（类似于innerText）
语法:
<标签名 v-text=“表达式”></标签名>
作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
注意事项:
- 如果值是html的值,会作为普通的文本使用。
- 标签中的属性值必须是data中的一个属性.
(2)v-html（类似于innerHTML）
语法:
<标签名 v-html=“表达式”></标签名>
作用:
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)
注意事项: - 如果值是html的值,不会作为普通的文本使用,要识别html标签。
- {{表达式}} 可以插入的标签的内容中
- v-text和v-html更改标签中的所有内容
<body>
<div id="app">
<span v-text="text"></span>
<br/>
<span v-html="user.name"></span>
</div>
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',
data: {
text:"我于杀戮之中绽放 亦如黎明中的花朵",
user:{
name:"<font color='red'>你是谁</font>"
}
}
})
</script>
</body>(3)v-for 循环
语法:
<标签 v-for=“元素 in 数据源”></标签>
数据源: 数组,
元素: 数组中的一个元素,
数据源: 对象
元素: 对象中的一个属性名
<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象"></标签>
作用:
基于数据源多次循环达到多次渲染当前元素.
<body>
<div id="app">
<ul>
<li v-for="text in texts">
{{text}}
</li>
</ul>
<ul>
<li v-for="v in user">
{{v}}
</li>
</ul>
<ul>
<li v-for="(text,index) in texts">
{{index}}===={{text}}
</li>
</ul>
<ul>
<li v-for="(value,key,index) in user">
{{value}}===={{key}}====={{index}}
</li>
</ul>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="tea in persons">
<td>{{tea.id}}</td>
<td>{{tea.name}}</td>
<td>{{tea.age}}</td>
<td>{{tea.sex}}</td>
</tr>
</tbody>
</table>
</div>
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',
data: {
texts:["史","前","巨","鳄"],
user:{
name:"小明",
age:25,
sex:true
},
persons:[
{id:1,name: "红领巾", age: 29, sex: "男"},
{id:2,name: "儿童节", age: 30, sex: "男"},
{id:3,name: "小学生", age: 31, sex: "女"}
]
}
})
</script>
</body>(4)v-bind 将data中的数据绑定到标签上,作为标签的属性. 比如 :
语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式:
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>
注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字
<body>
<div id="app">
<img v-bind:src="imgsrc">
<img v-bind:title="title">
<input v-bind="props">
</div>
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',
data: {
imgsrc:'img/timg.jfif',
title:"xxx",
props:{
type:"text",
name:"username"
}
}
})
</script>
</body>(5)v-model 在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
需要注意：
- 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
- 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
- v-model只作用于以下表单:input select textarea
(6)v-show
语法:
<标签名 v-show=“表达式”></标签名>
作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项: - 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
- 标签的值会自动转换为boolean类型的值
(7)v-if
语法:
<标签名 v-if=“表达式”></标签名>
作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
注意事项: - 当表达式中的值是false时, 是从页面上删除.
- 标签的值会自动转换为boolean类型的值
(8)v-else
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>
作用:
当v-if表达式不成立时, v-else执行.
注意事项: - 该指令必须也v-if搭配起来使用.
- v-else是一个单独的属性, 该属性是不要赋值的.
(9)v-else-if
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else></标签名>
<body>
<div id="app">
<hr>
<div v-if="m1">你好世界1</div>
<div v-if="hidden">你好世界2</div>
<!--当这里判断为false，那么这个div直接就不存在了，不会像v-show一样只是不显示-->
<div v-if="score>80">你好世界3</div>
<hr>
<div v-if="score<60">你成绩还有待提高！</div>
<div v-else>你成绩还可以嘛！</div>
<hr>
<div v-if="score<20">你成绩很差</div>
<div v-else-if="score>=20 && score<40">你成绩较差</div>
<div v-else-if="score>=40 && score<60">你差一点就及格了</div>
<div v-if="score>=60">你及格了，学分到手了</div>
</div>
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',
data: {
m1:true,
hidden:true,
score:60
}
})
</script>
</body>
