一、初始Vue
1.第一步：准备一个容器
<div id="app">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
v-on:指令用于绑定事件
<button v-on:click="updateName">修改姓名</button>
<button v-on:click="updateAge">修改年龄</button>
</div>
引入vue.js文件
<!-- 开发版本 -->
<script src="../js/vue.js"></script>
<!-- 生产版本 -->
<!-- <script src="../js/vue.min.js"></script> -->
关闭生产提示
Vue.config.productionTip = false
2.第二步：创建一个Vue对象
let vm = new Vue({
//指定当前Vue对象操作的DOM容器
el:'#app',
//定义当前Vue对象管理的数据
data:{
name:'张三',
age:20
},
//定义当前Vue对象管理的方法
methods: {
//修改姓名的方法
updateName(){
this.name = '李四'
},
//修改年龄的方法
updateAge(){
this.age = 30
}
},
})
二、Vue的响应式原理
1.理解什么是代理对象
01.定义源对象
let obj1 = {
name:'张三',
age:20
}
02.定义代理对象
let obj2 = obj1
console.log('obj2:',obj2);
//代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
console.log('obj1:',obj1);
console.log('----------------------------------------');
2.看一下Vue是如何使用代理对象
01.定义源对象
let myData = {
name:'张三',
age:20
}
02.将源对象传递给Vue的Data选项，背后做了两件事情
// 一.设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
// 二.将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）
let vm = new Vue({
data:myData
})
vm._data.name = '李四'
vm._data.age = 30
console.log(myData);
console.log('----------------------------------------');
3.给对添加属性的几种方式
let obj3 = {}
//方式一:
obj3.name = '张三'
//方式二：
obj3['age'] = 20
//方式三：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
// 使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除
// 使用这种方式，给对象添加的属性，对属性的保护措施更加严格
Object.defineProperty(obj3,'sex',{
//属性值
value:'男',
//允许被枚举（默认不允许）
enumerable:true,
//允许被删除（默认不允许）
configurable:true
})
console.log(obj3);
//枚举出对象的所有属性（其实就遍历出对象的所有属性名）
for(let key in obj3){
console.log(key);
}
//通过delete关键，可以删除对象身上的指定属性
delete obj3.name
delete obj3.sex
console.log(obj3);
console.log('----------------------------------------');
4.Vue响应式的原理
01定义一个源对象
let data = {
name:'张三',
age:20
}
//在页面中，显示姓名和年龄
document.querySelector('#name').innerHTML = data.name
document.querySelector('#age').innerHTML = data.age
02.定义一个代理对象（使用_data 去代理 data）
let _data = {}
03.使用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
}
})
三、Vue的常用指令
<div>
<span>姓名：</span>
<!-- v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式 -->
<!-- v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法 -->
<input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
</div>
<div>
<span>年龄：</span>
<!-- v-bind:可以用:简写。 -->
<!-- v-on:可以用@简写。 -->
<!-- 如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象 -->
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
<div>
<span>工作：</span>
<!-- 通过v-model指令，可以实现对数据的双向绑定，
v-model指令是 v-bind:value 和 v-on:input 的简写。-->
<input type="text" v-model="job">{{job}}
</div>
四、条件渲染何列表渲染
1.v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
- v-for指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
