Vue.js：
渐进式JavaScript框架
一、Vue它是什么
是一套用于构建用户界面的渐进式框架，在使用Vue的时候，可以只使用Vue里面的一部分去配合其他前端框架一起开发，也可以整个项目从头到尾，从搭建项目，路由系统，全局的状态管理等全部使用Vue，非常灵活。
二、走进Vue.js
1.安装Vue.js
学习/安装/下载到本地
以开发版本来学习，下载到本地，首先引入Vue.js文件。
<!-- 引入Vue.js文件 -->
<!-- 开发版本 -->
<script src="../js/vue.js"></script>
<!-- 生产版本（打包上线时使用） -->
<!-- <script src="../js/vue.min.js"></script> -->
2.准备一个容器
<!-- 第一步：准备一个容器 -->
<div id="app">
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
</div>
3.创建一个Vue对象
<script>
<script src="./js/vue.js"></script>
// 第二步，创建一个Vue对象
let mx = new Vue({
//指定当前Vue对象操作的DOM容器
el:'#app',
//定义当前Vue对象管理的数据
data:{
name:'萌新',
age:'10'
},
//定义当前Vue对象管理的方法
methods:{
//修改姓名的方法
updateName(){
this.name='一只萌新'
},
//修改年龄的方法
updateAge(){
this.age='100'
}
}
})
4.简单修改数据后渲染至页面例子
效果1
效果2
5.注意：初次使用vue，控制台会有两条提示。
如果想去掉这两条信息，可以选择安装vue-devtools，引入生产版本的vue.js。
当然也可以使用以下代码消除：
// 不允许 vue-devtools 检查代码
Vue.config.devtools = false
// vue 在启动时不显示生产提示
Vue.config.productionTip = false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 第一步：准备一个容器 -->
<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>
// 不允许 vue-devtools 检查代码
Vue.config.devtools = false
// vue 在启动时不显示生产提示
Vue.config.productionTip = false
// 第二步，创建一个Vue对象
let mx = new Vue({
//指定当前Vue对象操作的DOM容器
el: '#app',
//定义当前Vue对象管理的数据
data: {
name: '萌新',
age: '10'
// data选项，用于存储当前Vue实例管理的数据
// data选项里面管理的数据，会被添加到Vue实例身上，这里就是vm身上。
// data选项里面管理的数据，其实会被Vue实例身上的_data进行代理；并将代理过后的数据再添加到Vue实例身上，方便直接调用。
},
//定义当前Vue对象管理的方法
methods: {
//修改姓名的方法
updateName() {
this.name = '一只萌新'
},
//修改年龄的方法
updateAge() {
this.age = '100'
}
}
})
</script>
</body>
</html>
三、Vue的响应式原理
1.理解代理对象
// 定义源对象obj1
let obj1 = {
name:'张三',
age:20
}
//定义代理对象obj2，代理源对象obj1
let obj2 = obj1
console.log('obj2:',obj2);
// 代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
console.log(obj1); // {name: "李四", age: 30}
2.Vue的data和_data
// 定义源对象
let myData = {
name: '张三',
age: 20
}
let mx = new Vue({
// 将源对象传递给Vue的data，背后做了两件事
// ① 设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
// ② 将_data里面代理的所有数据，再添加到当前Vue实例身上，也就是vm身上。（方便直接调用数据）
})
// 通过改变vue实例的属性可以改变源对象的属性值
mx.name = '王五'
mx.age = 40
console.log(myData); // {name: "王五", age: 40}
3.给对象添加属性的多种方式
-第一种方式：使用点 .
-第二种方式：使用中括号 [ ]
-第三种方式：使用Object.defineProperty方法
// 方式一
let obj3 = {}
obj3.name = '张三'
// 方式二
obj3['age'] = 20
//方式三
// 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。
// 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。
// 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。
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属性没有设置允许被删除，就不能被删除
四、Vue的常用指令
1.v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值里面写表达式。v-bind:可以用 : 简写。
<body>
<div id="app">
<span>Name:</span>
<!-- v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值里面写表达式 -->
<!-- <input type="text" v-bind:value='name'> -->
<!-- <input type="text" :value='1+1'> -->
<!-- v-bind:可以用:简写 -->
<input type="text" :value='name'>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'萌新',
age:20
}
})
</script>
2.v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法。v-on:可以用 @ 简写。
<body>
<div id="app">
<div>
<span>Name:</span>
<!-- v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值里面写表达式 -->
<!-- <input type="text" :value='1+1'> -->
<!-- v-bind:可以用:简写 -->
<!-- <input type="text" :value='name'> {{name}} -->
<input type="text" v-bind:value='name' v-on:input='updateName'> {{name}}
<!-- v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法。v-on:可以用 @ 简写。 -->
</div>
<div>
<span>Age:</span>
<!-- V-on:可以用@简写 -->
<input type="text" :value='age' @input='updateAge'>{{age}}
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
name:'萌新',
age:20
},
methods: {
updateName(e){
//获取文本框里面的内容，更新name数据
this.name= e.target.value
},
updateAge(e){
//获取文本框里面的内容，更新age数据
this.age= e.target.value
}
},
})
</script>
3.v-model指令可以实现对数据的双向绑定。所谓双向绑定指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。v-model指令是 v-bind:value 和 v-on:input 的简写。ps:实现数据改变时，文本框的值会随之改变；输入框文本改变时，数据也会随之会被更改。
<body>
<div id="app">
<div>
<span>Name:</span>
<!-- v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值里面写表达式 -->
<!-- <input type="text" :value='1+1'> -->
<!-- v-bind:可以用:简写 -->
<!-- <input type="text" :value='name'> {{name}} -->
<input type="text" v-bind:value='name' v-on:input='updateName'> {{name}}
<!-- v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法。v-on:可以用 @ 简写。 -->
</div>
<div>
<span>Age:</span>
<!-- V-on:可以用@简写 -->
<input type="text" :value='age' @input='updateAge'>{{age}}
</div>
<div>
<span>job</span>
<!-- <input type="text" v-model:input='job'>{{job}} -->
<input type="text" v-model='job'>{{job}}
<!-- v-model指令可以实现对数据的双向绑定。
所谓双向绑定指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。
v-model指令是 v-bind:value 和 v-on:input 的简写。 -->
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
name:'萌新',
age:20,
job:'程序员'
},
methods: {
updateName(e){
//获取文本框里面的内容，更新name数据
this.name= e.target.value
},
updateAge(e){
//获取文本框里面的内容，更新age数据
this.age= e.target.value
}
},
})
</script>
4.如果事件方法的代码不是很多，可以写在行内。注意：这里不能写this，$event是事件对象
<div>
<span>年龄：</span>
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
五、条件渲染
1.条件渲染第一种方式：v-if
判断大于或等于90渲染优秀的思路
<div id="app">
<h2 v-if='fen>=90'>优秀</h2>
<h2 v-else-if='fen>=80'>中等</h2>
<h2 v-else-if='fen>=70'>良好</h2>
<h2 v-else-if='fen>=60'>及格</h2>
<h2 v-else>差</h2>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
fen: 90
}
})
</script>
2.条件渲染第二种方式：v-show
显示/隐藏图片的思路
<!-- 条件判断大于或等于90渲染优秀的思路 -->
<div id="app">
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 每次要根据isShow的值，确定是否渲染页面 -->
<div v-if='isShow'>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640268350&t=00e3d08c1d1417c8e57ddf2d56249018" alt="">
</div>
<!-- 模板已经渲染成功，通过样式控制显示隐藏 -->
<div v-show='isShow'>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640268350&t=00e3d08c1d1417c8e57ddf2d56249018" alt="">
</div>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
fen: 60,
isShow:true
}
})
</script>
3.那么v-if和v-show，在场景里如何选择去使用
(1) 如果页面需要反复切换显示和隐藏，推荐用v-show。
(2) 如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，推荐用v-if。所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
六、列表渲染
1.v-for指令：用于列表渲染。
2.列表渲染时，通常都要绑定key，key的作用是提高渲染性能。
3.注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
<body>
<div id="app">
<ul>
<!-- 值命名item index为索引 -->
<li v-for='(item,index) in foods' :key="index">{{item.id}}.{{item.name}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
// fen: 60,
// isShow:false,
foods:[
{
id:1,
name:'薯片',
price:7.9
},
{
id:2,
name:'辣条',
price:1.9
},
{
id:3,
name:'饼干',
price:5.5
},
{
id:4,
name:'可乐',
price:3.9
}
]
}
})
</script>
</body>
再来个小练习：轮播图，over，期待下次更新
<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>
