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选项中
总价格为：{{totalPrice}}
计算属性的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 = document.getElementsByTagName('button');
for(var i = 0;i < btns.length;i++){
(function(i){
btns[i].onclick = function(){
alert('点击了' + i + '个')
}
})
}for(var i = 0;i < btns.length;i++){
(function(num){
btns[i].addEventListener('click',function(){
console.log('您点击了' + num + '个按钮');
})
})(i)
}ES5之前因为 if 和 for 都没有块级作用域的概念，所以在很多时候，我们都必须借助于 function的作用域来解决应用外面变量的问题
let btns = document.getElementsByTagName('button');
for(let i = 0;i < btns.length;i++){
btns[i].onclick = function(){
alert('点击了' + i + '个')
}
}const的使用
const 关键字，在很多语言中已经存在，比如C/C++中，主要的作用是将某个变量修饰为常量
在JavaScript中也一样，使用const修饰的标识符为常量，不可以再次赋值
什么时候使用const？
当修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性
建议：在开发中，优先使用const，只有需要改变某一个标识符的时候，才使用let
const的注意
（一）
const a = 20;
a = 30; //错误：不可以修改（二）
const name; //错误：const修饰的标识符必须赋值对象增强写法
1、属性的简写
ES6之前
let name = 'wh'
let age = 3
let obj = {
name: name,
age: age
}
console.log(obj);
//ES6之后
let obj1 = {
name,age
}
console.log(obj1);2、方法的简写
ES6之前
let obj = {
test :function(){
console.log('obj的test函数');
}
}
obj.test()
//ES6之后
let obj2 = {
test(){
console.log('obj2的test函数')
}
}
obj2.test()event事件
推荐写法：
方法二：
输入的内容时：{{message}}
原理
v-model 其实是一个语法糖，它的背后本质是是包含两个操作：
1、v-bind 绑定一个 value属性
2、v-on 指令给当前元素绑定 input
也就是说
等同于
v-model：radio
当存在多个单选框时
可以同时定义相同的name属性，是单选框不能同时选定
或者可以绑定相同的 v-model 属性
您的选择:{{gender}}