Vue前端开发2.2 数据绑定

文章目录

一、初识数据绑定
- （一）数据绑定概述
- （二）数据绑定构成
- - 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的响应式原理，并将其应用到更多的项目中去。