一、初始Vue
1、准备一个容器
姓名：{{name}}
年龄：{{age}}
2、引入vue.js文件
方式（1）引入本地vue.js文件
vue.js文件官网下载
方式（2）通过CDN引入
3、创建一个Vue对象
注意：初次使用vue，控制台会有两条提示。
如果想去掉这两条信息，可以选择安装vue-devtools，引入生产版本的vue.js。
也可以使用以下代码消除：
// 不允许 vue-devtools 检查代码
Vue.config.devtools = false
// vue 在启动时不显示生产提示
Vue.config.productionTip = false
创建一个Vue对象
let vm = new Vue({
//指定当前Vue对象操作的DOM容器
el:'#app',
//定义当前Vue对象管理的数据
data:{
name:'张三',
age:20
},
//定义当前Vue对象管理的方法
methods: {
//修改姓名的方法
updateName(){
this.name = '李四'
},
//修改年龄的方法
updateAge(){
this.age = 30
}
},
})
4、效果
点击修改按钮
二、Vue的响应式原理
1、代理对象的基本理解
// （1）定义源对象obj1
let obj1 = {
name:'张三',
age:20
}
// （2）定义代理对象obj2，代理源对象obj1
let obj2 = obj1
console.log('obj2:',obj2);
// 代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
console.log(obj1); // {name: "李四", age: 30}
2、vue的data和_data
// （1）定义源对象
let myData = {
name: '张三',
age: 20
}
let vm = new Vue({
// （2）将源对象传递给Vue的data，背后做了两件事
// ① 设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
// ② 将_data里面代理的所有数据，再添加到当前Vue实例身上，也就是vm身上。（方便直接调用数据）
data:myData
})
// 通过改变vue实例的属性可以改变源对象的属性值
vm.name = '王五'
vm.age = 40
console.log(myData); // {name: "王五", age: 40}
3、给对象添加属性的几种方式
方式（1）使用点 .
let obj3 = {}
obj3.name = '张三'
方式（2）使用中括号 [ ]
obj3['age'] = 20
方式（3）defineProperty方法
通过Object对象的defineProperty方法，给指定的对象添加指定的属性。
使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除；对属性的保护措施更加严谨。
Object.defineProperty(obj3,'sex',{
// 属性值
value:'男',
// 允许被枚举（默认不允许）
enumerable:true,
// 允许被删除（默认不允许）
configurable:true
})
// 枚举出对象的所有属性（其实就遍历出对象的所有属性名）
// 如果sex属性没有设置允许被枚举，就不能被枚举
for(let key in obj3){
console.log(key);
}
// 通过delete关键，可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex // 如果sex属性没有设置允许被删除，就不能被删除
4、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(){
// 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(_data,'age',{
get(){
return data.age
},
set(val){
data.age = val
// 当代理对象，监听到数据发生变化了，就会重新渲染页面
document.querySelector('#age').innerHTML = data.age
}
})
// 改变代理对象_data的数据，页面会重新渲染
_data.name = '李四'
_data.age = 40
三、Vue的常用指令
v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式。v-bind:可以用 : 简写。
v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法。v-on:可以用 @ 简写。
v-model指令可以实现对数据的双向绑定。所谓双向绑定指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。v-model指令是 v-bind:value 和 v-on:input 的简写。
实现数据改变时，文本框的值会随之改变；输入框文本改变时，数据也会随之更改。
姓名：
{{name}}
年龄：
{{age}}
工作：
{{job}}
四、条件渲染和列表渲染
1、条件渲染
可以使用v-if 或者v-show实现条件渲染。
★ v-if 和 v-show 如何选择
① 如果页面需要反复切换显示和隐藏，用v-show。
② 如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if。所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
优秀
良好
中等
合格
差
2、列表渲染
v-for指令：用于列表渲染；列表渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
- {{index}}--{{item.name}}--{{item.price}}
五、小练习之轮播图
![]()