Bootstrap

Vue前端开发2.2 数据绑定

文章目录


在这里插入图片描述

一、初识数据绑定

（一）数据绑定概述

欢迎大家加入今天的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的响应式原理，并将其应用到更多的项目中去。

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
打卡信奥刷题（264）用Scratch图形化工具信奥P10337 [普及组][UESTCPC 2024] 操作序列
计算机网络——分层结构
【MongoDB】新增、删除字段（属性）
Element-ui源码分析
数据库用户管理
在MacOS安装Caffe环境以及相关的问题
【C语言】strtok、strerror函数
Java中如何快速构建项目脚手架
springboot websocket 知识点汇总
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名
;