Vue官方文档=>>>首页-学习下拉栏-文档-教程 =>火速一键进入学习
渐进式JavaScript框架：就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。（当然也可以从头到尾全部用Vue搭建）
一、初始Vue
1.给Vue准备一个容器
（它需要一个DOM容器，给vue去使用）
姓名：{{name}}
年龄：{{age}}
vue的点击事件绑定
（小回顾）
bindtap="方法名" //微信小程序的触屏绑定
onclick="方法名()" //原生的点击绑定
2.引入vue.js文件
方式1：引入本地vue.js文件
方式2：通过CDN引入
3.创建一个Vue对象
let vm = new Vue({
//指定当前Vue对象操作的DOM容器
el:'#app',
//定义当前Vue对象管理的数据
data:{
name:'张三',
age:20
},
//定义当前Vue对象管理的方法
methods: {
//修改姓名的方法
updateName(){
this.name = '李四'
},
//修改年龄的方法
updateAge(){
this.age = 30
}
},
})
在vue的配置选项里面，定义的所有的数据以及定义的所有方法，都会成为Vue的属性。
在方法里面，this指向的是对象本身。
以下为网页显示效果：el:' #容器的id '， // 指定当前Vue对象操作的DOM容器
data: { }， // 定义当前Vue对象管理的数据
methods: { }， // 定义当前Vue对象管理的方法
点击 修改姓名-- 姓名变成李四
点击 修改年龄-- 年龄变成30
*小注意：初创建vue，会出现以下2条提示：
*解决方法：
下载安装vue-devtools工具（官方调试工具），
关闭生产提示：创建Vue对象前先键入： Vue.config.productionTip = false
*安装vue-devtools工具后，可进入后台，进入Vue的调试工具以检查我的数据
二、Vue的响应式原理
1.理解什么是代理对象
- 1.定义源对象
let obj1 = {
name:'张三',
age:20
}
- 2.定义代理对象
let obj2 = obj1;
console.log('obj2:',obj2);
//代理对象修改了源对象的数据
obj2.name = '李四';
obj2.age = 30;
console.log(obj1); //{name: '李四', age: 30}
obj2是obj1的代理对象，代理对象修改了源对象的数据。
通过obj2 修改了obj1 的姓名和年龄，那obj1也变了哦~
2.看一下Vue是如何使用代理对象的
- 1.定义源对象（就是定一份数据）
let myData = {
name:'张三',
age:20
}
- 2.将一个数据传递给Vue的data选项（背后做了两件事情）
1）设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
2）将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）
let vm = new Vue({
data:myData //把myData这个对象传给了vue实例
})
vm._data.name = '李四'; //data和_data互相影响，一方变另一方也变
vm._data.age = 30;
console.log(vm);
console.log(myData);
因为对象是引用类型，在传递时，传的是地址。
操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象。
3.给对象添加属性的几种方式
let obj3 = {}
- 方式一：
obj3.name = '张三';
- 方式二：
obj3['age'] = 20;
- 方式三：
Object.defineProperty(obj3,'sex',{
value:'男', //属性值
enumerable:true, //允许被枚举（默认不允许）
configurable:true //允许被删除（默认不允许）
})
console.log(obj3);
Object.defineProperty( 对象名，属性名，{ 属性值 } )
通过Object对象的defineProperty方法，给指定的对象添加指定的属性。
使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除；
使用这种方式，给对象添加的属性，对属性的保护措施更加严格。
//枚举出对象的所有属性（其实就遍历出对象的所有属性名）
for(let key in obj3){
console.log(key);
}
//通过delete关键，可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex
console.log(obj3);
如果没有设置enumerable值和configurable值，那就不可以遍历出对象的属性名，也不可以删除哦
*此处插个播，看看不要钱 JavaScript中的可枚举属性与不可枚举属性
4.Vue响应式的原理 ★★★★★
姓名：
年龄：
- 1.定义一个源对象
let data = {
name:'张三',
age:20
}
- 2.定义一个代理对象（使用_data 去代理 data）
let _data = {}
- 3.使用Object.defineProperty给代理对象添加属性
Object.defineProperty(_data,'name',{
//这里除了写value，还可以写2个方法哦~
//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
}
})
console.log(_data.name);
console.log(_data.age);
_data.name = '李四'
_data.age = 30
console.log(data);
除了写value，还可以写2个方法哦~
- get方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
- set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
当代理对象，监听到数据发生变化时，就会重新渲染页面
三、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}}
以上，到目前为止是单向绑定。
通过在后台 vm.data = '李四' ，可以把页面的数据改掉；但是在页面的 input 中做修改并不会改变后台的数据哦~
问题来了：如何给它做双向绑定呢？
绑定一个input事件 ，
代码如下：
姓名：
{{name}}
年龄：
{{age}}
工作：
{{job}}
let vm = new Vue({
el: '#app',
//数据
data: {
name: '张三',
age: 20,
job: '程序员'
},
methods: {
updateName(e){ //这边可以接收一个事件对象e，可以通过e.target获取当前元素
this.name = e.target.value // 获取文本框里面的内容，更新数据
}
},
})
设置了一个更新姓名的方法，该方法更新name属性值
注意：在调用方式时，如果没有传递参数，那么事件方法会默认传一个事件对象参数。
这里边接收事件对象 e，可以通过 e.target 获取当前元素
e.target.value 获取文本框里面的内容
this.name = e.target.value 更新数据
如果事件方法的代码不是很多，可以写在行内，
注意：不能写 this 。示例：
四、Vue的条件渲染和列表渲染
1.条件渲染
- v-if 条件渲染
代码如下：
优秀
良好
中等
合格
差
- v-if / v-show 条件渲染
v-if 指令用于条件渲染，表达式返回true，显示元素；否则不显示元素。
v-if 每次根据isShow的值，确定是否渲染页面。
v-show 指令也是用于条件渲染，表达式返回true，显示元素；否则不显示元素。
v-show 模板已经渲染成功，通过样式控制显示隐藏。
优秀
良好
中等
合格
差
问题来了：v-if 和 v-show 如何选择?？
- 如果页面需要反复切换显示和隐藏，用v-show。
- 如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
（超多模块如果用v-if很耗性能的！达咩！）
2.列表渲染
- v-for 列表渲染
v-for 指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
代码如下：
- {{index}}--{{item.name}}--{{item.price}}
- 练习：轮播图
第一种写法：后台查看，页面会有5张图片，通过display去显示或者隐藏（不太好）
![]()
v-for 列表渲染，循环出item和index（在组件中使用v-for循环时,或在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的 字符串/数字 类型 :key值。）
:src绑定imgs这个数组的item
v-show 条件渲染，表达式返回true，显示元素；否则不显示元素
-- 此时页面效果为 显示 下标为0的那张图片 ，3秒后换下一张 --
mounted() { } 这个函数，是生命周期函数（表示页面挂载完成），
这里并没有调用，但它会自己执行哦。
第二种写法：
![]()
只需要绑定一个 :src = imgs数组[索引]
因为在script里设定了定时器，且this.showActive++ 索引会自己变，然后mounted() { } 这个函数自己执行，页面会更新。
(未完待续...loading...)