1.前端开发模式的发展过程
(1)静态页面
最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。
(2)异步刷新，操作DOM
1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
ajax盛行：
2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。
(3)MVVM，关注模型和视图
2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。
2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。
基于事件循环的异步IO
单线程运行，避免多线程的变量同步问题
JS可以编写后台代码，前后台统一编程语言
node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后，在node的基础上，涌现出了一大批的前端框架：
(4)MVVM模式
M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。
2.Vue概述
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。
vue中文官网：https://vuejs.bootcss.com/v2/guide/
3.Node和NPM
NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。
(1)下载Node.js
http://nodejs.cn/
切换到下载栏，下载
点击如下安装包，下一步安装即可。
完成以后，在控制台输入：
node -v
看到版本信息：
(2)NPM
Node自带了NPM了，在控制台输入npm -v查看：
npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间
npm install nrm -g
然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
通过nrm use taobao来指定要使用的镜像源：
然后通过nrm test npm来测试速度：
4.vue快速入门
(1)创建工程
创建一个新的空工程：
然后新建一个module：
(2)安装vue
使用npm安装。
在idea的左下角，有个Terminal按钮，点击打开控制台：
进入vue_start目录，先输入：npm init -y 进行初始化
安装Vue，输入命令：npm install vue --save
然后就会在vue_start目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
(3)入门案例
<1>html模板
在vue_start目录下新建一个HTML
<2>vue声明式渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
<div id="app">
<!--花括号：js表达式-->
<h2>大家好，我是{{name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "lucky"
}
}
)
</script>
</html>
<3>双向绑定和事件处理
- 我们在data添加了新的属性：num
- 在页面中有一个input元素，通过v-model与num进行绑定。
- 同时通过{{num}}在页面输出
我们在页面添加一个按钮：
<input type="button" value="点我啊" v-on:click="num++">
这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
完整代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
<div id="app">
<!--双向绑定，通过v-model操作-->
<input type="text" v-model="num">
<!--定义一个事件，通过v-on:事件名=js表达式-->
<input type="button" value="点我啊" v-on:click="add">
<!--花括号：js表达式-->
<h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
}
}
}
)
</script>
</html>
效果图：
5.vue实例
(1)创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100
}
}
)
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
el
data
methods
(2)模板或元素
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。
例如一段html模板：
<div id="app"> </div>
然后创建Vue实例，关联这个div
const vm = new Vue({
el:"#app"
})
Vue就可以基于id为app的div元素作为模板进行渲染了。
(3)数据
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
const app = new Vue({
el:"#app",
data:{
name:"刘昊然"
}
})
- name的变化会影响到input的值
- input中输入的值，也会导致id为app的div中的name发生改变
(4)方法
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。
<div id="app">
<!--双向绑定，通过v-model操作-->
<input type="text" v-model="num">
<!--定义一个事件，通过v-on:事件名=js表达式-->
<input type="button" value="点我啊" v-on:click="add">
<!--花括号：js表达式-->
<h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2>
</div>
js:
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
}
}
}
)
</script>
(5)生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
<1>生命周期
<2>钩子函数
beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.onload=function({.,.})
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
6.指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
(1)插值表达式
<1>花括号
格式：
{{表达式}}
说明：
该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数
注意：花括号只能在标签内容处使用，标签的属性上禁止使用。
示例：
HTML：
<div id="app">{{name}}</div>
JS:
const app = new Vue({
el:"#app",
data:{
name:"Jack"
}
})
(2)v-model
v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。在表单元素中使用。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
input
select
textarea
checkbox
radio
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
<div id="app">
<!--双向绑定，通过v-model操作-->
<input type="text" v-model="num">
<!--定义一个事件，通过v-on:事件名=js表达式-->
<input type="button" value="点我啊" v-on:click="add">
<!--花括号：js表达式-->
<h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> <input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{{language.join(',')}}
</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100,
language: []
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
}
}, }
)
</script>
</html>
多个
CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型radio对应的值是input的value值
text和textarea默认对应的model是字符串select单选对应字符串，多选对应也是数组
效果图：
(3)v-on
<1>基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名="js片段或函数名"
html:
<input type="button" value="点我啊" v-on:click="add">
js:
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100,
language: []
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
}
}, }
)
</script>
事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
<2>事件修饰符
Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop：阻止事件冒泡到父元素(了解).prevent：阻止默认事件发生(掌握).capture：使用事件捕获模式(了解).self：只有元素自身触发事件才执行。(了解).once：只执行一次(了解)
原代码：
<button v-on:contextmenu="num++">增加一个</button>
添加prevent属性后：
<!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu="num++">增加一个</button>
效果图分析：
未添加prevent的代码，右击按钮，会出现弹窗。
添加prevent的代码，右击按钮，不会出现弹窗。
<3>按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
示例：
html:
<!--双向绑定，通过v-model操作-->
<!--v-on:keyup.13表示回车键按下-->
<input type="text" v-model="num" v-on:keyup.13="submit">
js:
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100,
language: []
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
},
submit(){
console.log("您已提交")
}
}, }
)
</script>
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
全部的按键别名：
.enter*.tab.delete(捕获“删除”和“退格”键)
示例：
<!--双向绑定，通过v-model操作-->
<!--v-on:keyup.enter表示回车键按下-->
<input type="text" v-model="num" v-on:keyup.enter="submit">
(4)v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
<1>遍历数组
语法：
v-for="item in items"
items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
<div id="app">
<!--双向绑定，通过v-model操作-->
<!--v-on:keyup.enter表示回车键按下-->
<input type="text" v-model="num" v-on:keyup.enter="submit">
<!--定义一个事件，通过v-on:事件名=js表达式-->
<input type="button" value="点我啊" v-on:click="add">
<!--花括号：js表达式-->
<h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> <input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{{language.join(',')}}
</h1> <!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu="num++">增加一个</button> <ul>
<li v-for="user in users">
{{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100,
language: [],
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'峰哥', gender:'男', age: 18},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
},
submit(){
console.log("您已提交")
}
}, }
)
</script>
</html>
效果图：
<2>遍历角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法：
v-for="(item,index) in items"
items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。
示例：
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
效果图：
<3>遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始
示例：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--vue对象的html模板-->
<body>
<div id="app">
<!--双向绑定，通过v-model操作-->
<!--v-on:keyup.enter表示回车键按下-->
<input type="text" v-model="num" v-on:keyup.enter="submit">
<!--定义一个事件，通过v-on:事件名=js表达式-->
<input type="button" value="点我啊" v-on:click="add">
<!--花括号：js表达式-->
<h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> <input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{{language.join(',')}}
</h1> <!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu="num++">增加一个</button> <ul>
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul> <ul>
<li v-for="(value, key, index) in user">
{{index + 1}}. {{key}} - {{value}}
</li>
</ul>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100,
language: [],
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'峰哥', gender:'男', age: 18},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
],
user:{name:'柳岩', gender:'女', age: 21}
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
},
submit(){
console.log("您已提交")
}
}, }
)
</script>
</html>
效果图：
(5)v-if和v-show
<1>基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
注意：v-if和v-show的效果是一样的。我们优先使用v-if
语法：
v-if="布尔表达式"
示例：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">点我呀</button>
<br>
<h1 v-if="show">
看到我啦？！
</h1>
<h1 v-show="show">
看到我啦？！show
</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</html>
效果图：
<2>与v-for结合使用
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
修改v-for中的案例，添加v-if：
html:
<ul>
<li v-for="(user, index) in users" v-if="user.gender == '女'">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
Js:
<script>
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100,
language: [],
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'峰哥', gender:'男', age: 18},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
],
user:{name:'柳岩', gender:'女', age: 21}
},
methods: {
add:function () {
//this代表当前的实例
this.num=this.num+2;
},
submit(){
console.log("您已提交")
}
}, }
)
</script>
效果：
只显示女性用户信息
<3>v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后
示例：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
<h1 v-if="random >= 0.75">
看到我啦？！if
</h1>
<h1 v-else-if="random > 0.5">
看到我啦？！if 0.5
</h1>
<h1 v-else-if="random > 0.25">
看到我啦？！if 0.25
</h1>
<h1 v-else>
看到我啦？！else
</h1>
</div>
</body> <script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
random: 1 //设置random的初始值
}
})
</script>
</html>
效果图：
(6)v-bind
html属性不能使用双大括号形式绑定，只能使用v-bind指令。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
示例：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.active{
color: red;
}
</style>
<body>
<!--当v-model对应的输入框的值大于0时，button按钮的样式会修改，颜色会变成红色-->
<div id="app">
<input type="text" v-model="store">
<input type="button" v-bind:class="{active:store>0}" value="加入购物车">
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
store: 0
}
})
</script>
</html>
效果图：
注意：v-bind:class可以简写为:class
(7)计算属性
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.active{
color: red;
}
</style>
<body>
<!--当v-model对应的输入框的值大于0时，button按钮的样式会修改，颜色会变成红色-->
<div id="app">
<input type="text" v-model="store">
<input type="button" v-bind:class="{active:store>0}" value="加入购物车">
<h1>您的生日是：{{birth}} </h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
store: 0,
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法，但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
</script>
</html>
效果图：
