Vue 中的MVVM

 View层：

1、视图层

2、在前端开发中，通常就是 DOM 层

3、主要的作用是给用户展示 各种信息

Model层：

1、数据层

2、数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据

3、在计数器案例中，就是后面取出来的obj，当然，里面的数据可能没有这么简单

VueModel层：

1、试图模型层

2、视图模型层是View和 Model 沟通的桥梁

3、一方面它实现了Data Binding，也就是数据绑定，将Model 的改变实时的反应到 View中

4、另一方面它实现了DOM Listener ，也就是DOM监听，当DOM 发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应Data

创建Vue 实例传入options

el：

        类型：string | HTMLElement

        作用：决定之后Vue 实例会管理哪一个DOM

data：

        类型：Object | Function (组件当中data 必须是一个函数)

        作用：Vue实例对应的数据对象

methods：

        类型：{ [key:string] :Function}

        作用：定义属于Vue的一些方法 

什么是计算属性

众所周知，在模板中可以直接通过插值语法显示一些data中的数据

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

        比如：firstName 和 lastName 两个变量，我们需要显示完整的名称

        但是如果多个地方都需要显示完整的名称，我们就需要写多个{ {firstName}}  { {lastName }}

我们可以将上面的代码换成计算属性，计算属性是写在computed选项中

	<div id="app">
			<h2>总价格为：{
  {totalPrice}}</h2>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					books:[
					{id:110, name:'穆斯林的葬礼',price:119},
					{id:111, name:'兄弟', price:59},
					{id:112, name:'达芬奇的密码',price:98},
					{id:113, name:'查理九世',price:87},
					]
				},
				computed:{
					totalPrice:function(){
						let result = 0
						for(let i = 0;i < this.books.length;i++){
							result += this.books[i].price
						}
						return result
					}
				}
			})
			
		</script>

        计算属性的setter 和 getter

每个计算属性都包含一个 getter 和 setter

        上面的例子是指使用getter来读取

        在某些情况下，也可以提供一个setter方法，但是不常用

	fullName:{
						set:function(newValue){
							const names = newValue.split('');
							this.firstName = names[0];
							this.lastName = names[1];
						},
						
						get: function(){
						return this.firstName + ' ' + this.lastName
					}
				},

事件监听

在前端开发中，我们需要经常和用户交互

        这个时候，就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

        使用 v-on 来监听事件

let 与 var 

实际上，var 的设计可以看成是JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，以为需要向后兼容

let 可以看成更完美的 var

块级作用域

        js 中使用 var 来声明一个变量时，变量的作用域主要是和函数的定义有关

        针对于其他块定义来说是没有作用域的，比如 if / for 等，这个在开发过程中会引起一些问题

ES5 中，var 是没有块级作用域的，比如if  和 for

ES6 中，let 是有块级作用的 ，比如if  和 for

var btns = documen