文章目录
- 一、初识数据绑定
- （一）数据绑定概述
- （二）数据绑定构成
- 1、定义数据
- 2、输出数据
- （三）数据绑定案例演示
- 1、创建单文件组件
- 2、切换页面显示组件
- （四）将Vue引入HTML页面中
- 1、概述
- 2、演示
- （1）创建网页
- （2）导入Vue 3框架
- （3）编写页面代码
- （4）编写脚本代码
- （5）查看网页
- 二、响应式数据绑定
- （一）响应式数据绑定概述
- （二）使用ref()函数
- 1、定义
- 2、语法
- 3、演示
- （三）使用reactive()函数
- 1、定义
- 2、语法
- 3、演示
- （四）使用toRef()函数
- 1、定义
- 2、语法
- 3、演示
- （五）使用toRefs()函数
- 1、定义
- 2、语法
- 3、演示
- （六）课堂练习 - 实现轮播图
- 1、创建单文件组件
- 2、切换页面显示组件
- 3、查看轮播图效果
- 三、实战总结
一、初识数据绑定
（一）数据绑定概述
欢迎大家加入今天的Vue前端开发实战讲稿。在今天的课程中，我们将深入探讨Vue中的数据绑定功能。数据绑定是Vue的核心特性之一，它使得数据和视图之间的同步变得简单而高效。通过数据绑定，我们可以将页面中的数据分离出来，放到组件的<script>标签中，实现数据驱动视图的效果。
（二）数据绑定构成
1、定义数据
在实现数据显示之前，我们需要在<script>标签中定义组件所需的数据。Vue 3提供了setup函数和<script setup>语法糖，使得数据定义更加简洁。
语法格式：
<script>
export default {setup() {return {数据名: 数据值,……}}
}
</script>
使用setup语法糖：
<script setup>
const 数据名 = 数据值
</script>
2、输出数据
Vue提供了Mustache语法（双大括号语法），用于将数据输出到页面中。
语法格式：
{{数据名}}
示例代码：
<template><div>{{ message }}</div>
</template>
（三）数据绑定案例演示
1、创建单文件组件
我们将通过一个简单的例子来演示数据绑定的效果。首先，在components目录下创建一个名为Message.vue的单文件组件。
代码示例：
<template><div class="box">{{ message }}</div>
</template><script setup>
const message = "泸职院欢迎您~"
</script><style>
.box {margin-top: 30px;text-align: center;font-size: 35px;font-family: 仿宋;font-weight: bold;color: red;
}
</style>
2、切换页面显示组件
接下来，我们需要将这个组件导入到主应用中，并在本地服务器上查看数据绑定的效果。
（四）将Vue引入HTML页面中
1、概述
除了通过Vite创建项目，Vue还支持直接将Vue引入HTML页面中。这种方式虽然只能使用Vue的核心功能，但非常适合开发一些简单的页面。
2、演示
（1）创建网页
创建一个名为data_binding.html的网页
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>演示Vue 3数据绑定</title>
</head>
<body>
</body>
</html>
（2）导入Vue 3框架
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>演示Vue 3数据绑定</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
</body>
</html>
（3）编写页面代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>演示Vue 3数据绑定</title><!-- 导入Vue 3框架 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style>#app {margin-top: 30px;text-align: center;font-size: 35px;font-family: 隶书;font-weight: bold;color: blue;}</style></head><body><div id="app">{{ message }}</div> </body>
</html>
（4）编写脚本代码
创建一个Vue实例，并挂载到DOM元素。
<script>
const { createApp } = Vue;
const app = createApp({setup() {return {message: '天行健，君子自强不息~'};}
});
app.mount('#app');
</script>
（5）查看网页
访问file:///D:/vueprojects/chapter02/data_binding.html
二、响应式数据绑定
（一）响应式数据绑定概述
为了实现页面中数据的动态更新，我们需要进行响应式数据绑定。Vue提供了多个函数来定义响应式数据，如ref()、reactive()、toRef()和toRefs()。
（二）使用ref()函数
1、定义
ref()函数用于将普通数据转换为响应式数据。
2、语法
定义响应式数据：
响应式数据 = ref(数据)
修改响应式数据：
响应式数据.value = 新值
3、演示
创建一个名为Ref.vue的单文件组件，演示如何使用ref()函数。
代码示例：
<template><div id="box">{{ message }}</div>
</template><script setup>
import { ref } from 'vue'
const message = ref('读书破万卷，下笔如有神')
setTimeout(() => {message.value = '会当凌绝顶，一览众山小'
}, 2000)
</script><style>
#box {text-align: center;font-family: 楷体;font-size: 35px;font-weight: bold;color: purple;
}
</style>
（三）使用reactive()函数
1、定义
reactive()函数用于创建一个响应式对象或数组。
2、语法
响应式对象或数组 = reactive(普通的对象或数组)
3、演示
创建一个名为Reactive.vue的单文件组件，演示如何使用reactive()函数。
代码示例：
<template><div id="box">{{ poem.content }}</div>
</template><script setup>
import { reactive } from 'vue'
const poem = reactive({content : '感时花溅泪，恨别鸟惊心'})
setTimeout(() => {poem.content = '露从今夜白，月是故乡明'
}, 2000)
</script><style>
#box {margin-top: 25px;text-align: center;font-family: 楷体;font-size: 35px;font-weight: bold;color: blue;
}
</style>
（四）使用toRef()函数
1、定义
toRef()函数用于将响应式对象中的单个属性转换为响应式数据。
2、语法
响应式数据 = toRef(响应式对象, '属性名')
3、演示
创建一个名为ToRef.vue的单文件组件，演示如何使用toRef()函数。
代码示例：
<template><div id="box">{{ poem.m2 }}</div>
</template><script setup>
import { reactive, toRef } from 'vue'
const poem = reactive({m1: '感时花溅泪，恨别鸟惊心', m2: '会当凌绝顶，一览众山小'})
const m2 = toRef(poem, 'm2')
setTimeout(() => { m2.value = '露从今夜白，月是故乡明'
}, 2000)
</script><style>
#box {margin-top: 25px;text-align: center;font-family: 楷体;font-size: 35px;font-weight: bold;color: orange;
}
</style>
（五）使用toRefs()函数
1、定义
toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。
2、语法
所有属性组成的对象 = toRefs(响应式对象)
3、演示
创建一个名为ToRefs.vue的单文件组件，演示如何使用toRefs()函数。
代码示例：
<template><div id="box"><p id="m1">{{ poem.m1 }}</p><p id="m2">{{ poem.m2 }}</p></div>
</template><script setup>
import { reactive, toRefs } from 'vue'
const poem = reactive({m1: '床前明月光，疑是地上霜', m2: '不敢高声语，恐惊天上人'})
const {m1, m2} = toRefs(poem)
setTimeout(() => { m1.value = '众鸟高飞尽，孤云独去闲'
}, 2000)
setTimeout(() => { m2.value = '春风知别苦，不遣柳条青'
}, 5000)
</script><style>
#box {margin-top: 25px;text-align: center;font-family: 楷体;font-size: 35px;font-weight: bold;color: green;
}
#m1 {color: brown;
}
#m2 {color: gold
}
</style>
（六）课堂练习 - 实现轮播图
1、创建单文件组件
在components目录下创建一个名为SlideShow.vue的单文件组件。这个组件将实现一个简单的轮播图功能。
代码示例：
<template><div id="app"><div class="slide"><img :src="slides[currentIndex]"></div></div>
</template><script setup>import { ref } from 'vue';// 导入图片import linux from '../assets/linux.png';import hadoop from '../assets/hadoop.png';import hive from '../assets/hive.png';import spark from '../assets/spark.png';// 使用 ref 创建响应式的 slides 数组和 currentIndex 引用const slides = ref([linux, hadoop, hive, spark]);const currentIndex = ref(0);// 轮播到下一张const goNext = () => {currentIndex.value = (currentIndex.value + 1) % slides.value.length;};// 每3秒轮播一次let intervalId = setInterval(goNext, 3000);
</script><style>#app {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f2f5;}.slide {margin: 0 10px;padding: 10px;border: 1px solid blueviolet;font-size: 35px;font-family: 仿宋;color: red;max-width: 80%;max-height: 80%;overflow: hidden;}img {width: 400px; height: 300px;display: block;}
</style>
2、切换页面显示组件
import App from './components/SlideShow.vue'
3、查看轮播图效果
访问http://localhost:5173，你将看到初始显示的是linux图片。每3秒后，图片将自动切换到下一张，依次是hadoop、hive和spark图片。
三、实战总结
通过本次实战，我们不仅学习了如何使用Vue的数据绑定和响应式数据，还亲手实现了一个实用的轮播图组件。希望大家能够通过这个例子，更好地理解Vue的响应式原理，并将其应用到更多的项目中去。