在使用 Vue 时，在浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
通过https://cn.vuejs.org/官方网站下载vue.js文件和vue.min.js文件，并用 <script> 标签引入。
初始vue
第一步：准备一个容器
第二步：创建一个Vue对象（ new Vue({ }) ）
el：' ' ,指定当前的vue对象操作DOM容器。
data：{ } ,定义当前vue对象管理的数据。
methods：{ }，定义当前vue对象管理的方法。
修改属性值的方法写在methods里面，并用v-on绑定事件
vue的响应式原理
一、理解什么是代理对象
1.定义源对象
let obj1 = {
name:'张三',
age:20
}
2.定义代理对象
let obj2 = obj1
console.log('obj2:',obj2);
代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
二、看一下Vue是如何使用代理对象
1.定义源对象
let myData = {
name:'张三',
age:20
}
let vm = new Vue({
2.将源对象传递给Vue的Data选项，背后做了两件事情
一.设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
二.将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）
data:myData
})
vm._data.name = '李四'
vm._data.age = 30
三、给对添加属性的几种方式
方式一:
obj3.name = '张三'
方式二：
obj3['age'] = 20
方式三：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除
使用这种方式，给对象添加的属性，对属性的保护措施更加严格
Object.defineProperty(obj3,'sex',{
value:'男',
允许被枚举（默认不允许）
enumerable:true,
允许被删除（默认不允许）
configurable:true
})
枚举出对象的所有属性（其实就遍历出对象的所有属性名）
for(let key in obj3){
console.log(key);
}
通过delete关键，可以删除对象身上的指定属性
delete obj3.name
四、Vue响应式的原理
1定义一个源对象
let data = {
name:'张三',
age:20
}
在页面中，显示姓名和年龄
document.querySelector('#name').innerHTML = data.name
document.querySelector('#age').innerHTML = data.age
2.定义一个代理对象（使用_data 去代理 data）
let _data = {}
3.使用Object.defineProperty给代理对象添加属性
Object.defineProperty(_data,'name',{
get方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
get(){
return data.name
},
set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
set(val){
data.name = val
//当代理对象，监听到数据发生变化了，就会重新渲染页面
document.querySelector('#name').innerHTML = data.name
}
})
Object.defineProperty(_data,'age',{
get(){
return data.age
},
set(val){
data.age = val
document.querySelector('#age').innerHTML = data.age
}
})
