|
近几年，互联网前端行业发展得依旧迅猛，
涌现出了很多优秀的框架，
同事这些框架也正在逐渐改变我们的前端开发方式，
Google 的 AngularJS 、Facebook 的 ReactJS，
这些前端 MVC（MVVM）框架的出现
和组件化开发的普及和规范化，
既改变了原有的开发思维和方式，
也是的前端开发者加快脚步，
更新自己的知识结构。
2014年2月，
原 Google 员工尤雨溪公开发布了自己的前端库——Vue.js，
时至今日Vue.js 在 Github 上已经收货超过30000Star，
而且也有越来越多的开发者在实际的生产环境中运用它。
Vue是什么？
构建用户界面的 渐进式框架
只关注视图层（view）
![]() 
需要用到什么就用什么。
vue中的两个核心点
响应式数据绑定
当数据发生改变>自动更新视图
利用 Object.definedProperty 中的setter/getter代理数据，
监控对数据的操作。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue快速入门案例</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
{{message}}
</div>
<script>
//数据
let data = {
message:"Hello Vue"
};
//Vm实例
var vm = new Vue({
el:"#demo",//挂载元素
data:data
});
</script>
</body>
</html>
这里就是把我们的数据呈现到页面中，
代码实现效果如下：
![]()
之前我们说vue.js是响应式数据绑定，
因为我们之前实现了变量"vm"实例，
我们可以我们把数据修改一下，
页面也会随之改变！
注意：引用vue的时候，它不兼容IE8
组合的视图组件：
-
UI页面映射为组件树 -
划分组件可维护、可重用、可测试
![]()
虚拟DOM
虚拟DOM(virtual DOM)
运行js的速度很快的，
大量操作DOM就会很慢。
时常在更新数据后会重新渲染页面，
这样造成在没有改变数据的地方
也重新渲染了DOM节点，
这样造成了很大程度上的资源浪费。
这里是一张示意图：
![]()
利用在内存中生成与真实DOM与之的数据结构，
这个在内存中生的结构称之为虚拟DOM。
当数据发生变化时，能够只能计算出重新渲染组件的
最小代价并应用到DOM操作上。
MVVM模式
M:Model 数据模型
V：view 视图模板
VM：view-Model 视图模型
![]()
接下来给大家写一个双向数据绑定的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
//数据
let data = {
message:"Hello,Vue"
};
//实例
var vm = new Vue({
el:"#demo",//挂载元素
data:data
});
</script>
</body>
</html>
效果实现如下：
![]()
接下来我们修改下输入框内的内容。
页面内容也随之改变，这就叫双向数据 绑定。
vue的实例
vue实例
每一个应用都是通过vue这个结构函数
创建根实例（root instance）启动
new vue （选项对象）
需要传入选项对象，对象包含挂载元素，
数据，模版，方法等。
el:挂载元素选择器 String | HtmlElement
data: 代理数据 Object | Function
methods:定义方法 Object
如果你想了解全部属性可以看它的API
vue代理data数据
每个Vue实例都会代理其打他对象所有的属性，
这些被代理的属性是响应的，
新添加的属性不具备响应功能，
改变后不会更新视图
vue实例自身属性性和方法
暴露自身的属性和方法，已$开头，例如：$el $data ......
接下来我给大家写个vue实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE的实例</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
<span v-on:click="clickHandle">{{message}}</span>
</div>
<script>
//数据
let obj = {
message:"hello Vue"
};
//声明式渲染
var vm = new Vue({
el:"#demo",
data:obj,
methods:{
clickHandle(){
alert("click")
}
}
});
console.log(vm.$data)
</script>
</body>
</html>
实现效果如下：
声明式渲染
声明式
只需要声明在哪里就做什么，不需要关心如何实现。
命令式
需要以具体的代码表达在哪里做什么，如何实现。
我们来个例子，求数组中每一项的倍数。
命令式
使用for循环拿出每一项，然后求值完成后，在放入另一个数组中
声明式
使用map方法，就能实现。
代码如下
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
<span v-on:click="clickHandle">{{message}}</span>
</div>
<script>
var arr = [1,2,3,4,5];
//求数组中每一项的倍数，放在另一个数组中
//命令式
// var newArr = [];
// for(var i = 0 ; i < arr.length ; i ++){
// arr.push(arr[i]*2)
// }
//声明式
var newArr = arr.map(function(item){
return item * 2 ;
});
console.log(newArr);
</script>
</body>
</html>
声明式效果实现如下：
| 
转播
