1.使用
（1）下载到本地
（2）引用网址（https://www.bootcdn.cn/vue/）
2.创建一个Vue实例
let vm = new Vue({
//指定当前Vue对象操作的DOM容器
el: '#app',
//定义当前Vue对象管理的数据
data: {
name: '张三',
age: 20
},
//定义当前Vue对象管理的方法
methods: {
updateName() {
},
updateAge() {
}
}
})
3.初识Vue的响应式管理
原理：先设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
再将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）
（1）先定义一个源对象
let data = {
name:'张三',
age:20
}
（2）再定义一个代理对象来代理对象data
let _data = {}
（3）使用Object.defineProperty给代理对象添加属性
Object.defineProperty(_data,'name',{
//get方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
get(){
// console.log('get方法执行了');
return data.name
},
//set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
set(val){
// console.log('set方法执行了');
data.name = val
//当代理对象，监听到数据发生变化了，就会重新渲染页面
document.querySelector('#name').innerHTML = data.name
}
})
其中，Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
好处：使用这种方式给对象添加的属性，默认不能被枚举和删除，对属性的保护措施更严格（如果要允许被枚举和删除要加上enumerable:true;configurable:true）
响应式添加删除对象
<div id="app">
<div>对象信息：{{obj}}</div>
<div>
属性名：<input type="text" v-model="key">
属性值：<input type="text" v-model="value">
<button @click="addPro">添加信息</button>
属性名：<input type="text" v-model="key2">
<button @click="delPro">删除信息</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
obj: {},
key: '',
key2: '',
value: ''
},
methods: {
addPro() {
// vue通过$set方法，给对象添加响应式属性
this.$set(this.obj, this.key, this.value)
},
delPro() {
// vue通过$delete方法，删除对象的属性
this.$delete(this.obj, this.key2)
}
},
})
</script>
4.常用指令
（1）v-bind:value=""用于绑定属性,可在属性值上直接写表达式，也可简写为:value=""
v-bind:value="name"
（2）v-on:(事件名)=""用于绑定事件，可指定Vue实例中的定义方法，也可简写为@(事件名)=""
v-on:input="updateName"
（3）v-model,可实现对数据的双向绑定,v-model指令是 v-bind:value 和 v-on:input 的简写
v-model="job"
（4）v-if和v-show,两者都是控制显示和隐藏
区别：如果页面需要反复切换显示和隐藏，用v-show
如果页面有很多模块需要隐藏，但用户可能只对其中一个模块一个感兴趣，用v-if
（5）v-for，用于列表渲染，通常都要绑定key,key的作用都是提高渲染性能，key值必须唯一，也可将列表的索引作为key值使用
v-for="(item,index) in foods" :key="index"
5.关闭生产提示
Vue.config.productionTip = false
（关闭控制台的提示）
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9108 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
