一、初始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>
2、引入vue.js文件
方式（1）引入本地vue.js文件
<!-- 开发版本 -->
<script src="../js/vue.js"></script>
<!-- 生产版本（打包上线时使用） -->
<!-- <script src="../js/vue.min.js"></script> -->
方式（2）通过CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
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响应式的原理
<div>
<h2>姓名：<span id="name"></span></h2>
<h2>年龄：<span id="age"></span></h2>
</div>
// （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 的简写。
实现数据改变时，文本框的值会随之改变；输入框文本改变时，数据也会随之更改。
<div id="app">
<div>
<span>姓名：</span>
<input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
</div>
<div>
<span>年龄：</span>
<!-- 如果事件方法的代码不是很多，可以写在行内。注意：这里不能写this，返回的就是事件对象。 -->
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
<div>
<span>工作：</span>
<input type="text" v-model="job">{{job}}
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
//数据
data: {
name: '张三',
age: 20,
job:'程序员'
},
methods: {
updateName(e){
//获取文本框里面的内容，更新数据
this.name = e.target.value
}
}
})
</script>
四、条件渲染和列表渲染
1、条件渲染
可以使用v-if 或者v-show实现条件渲染。
★ v-if 和 v-show 如何选择
① 如果页面需要反复切换显示和隐藏，用v-show。
② 如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if。所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
<div id="app">
<!-- 根据成绩，显示下面的等级 -->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>
<hr>
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 每次要根据isShow的值，确定是否渲染页面 -->
<div v-if="isShow">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428174908_sgsyj.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144539&t=de45197a8aa3bf884b08b791723e7ed0">
</div>
<hr>
<!-- 模板已经渲染成功，通过样式控制显示隐藏 -->
<div v-show="isShow">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic40.nipic.com%2F20140428%2F9081536_114914525167_2.jpg&refer=http%3A%2F%2Fpic40.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144712&t=1261090ac684bf8e3c83f61ed012a2a7">
</div>
</div>
<script>
new Vue({
el:'#app',
//定义数据
data:{
score:55,
isShow:false
}
})
</script>
2、列表渲染
v-for指令：用于列表渲染；列表渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
<div id="app">
<ul>
<li v-for="(item,index) in foods" :key="index">{{index}}--{{item.name}}--{{item.price}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
//定义数据
data:{
foods:[
{
id:1,
name:'薯片',
price:7.9
},
{
id:2,
name:'饼干',
price:3.9
},
{
id:3,
name:'面包',
price:9.9
},
{
id:4,
name:'蛋糕',
price:16.9
}
]
}
})
</script>
五、小练习之轮播图
<div id="app">
<img :src="imgs[showActive]" >
</div>
<script>
new Vue({
el:'#app',
data:{
//显示的下标
showActive:0,
//图片数组
imgs:["http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89",
"http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/109951166646695577.jpg?imageView&quality=89",
"http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89",
"http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89",
"http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89"]
},
// 生命周期函数（表示页面挂载完成）
mounted() {
setInterval(() => {
this.showActive++
//如果下标越界，重新从0开始
if(this.showActive>=5) this.showActive = 0
}, 3000);
},
})
</script>
网友评论