Vue.js开发基础——数据绑定/响应式数据绑定

一、单文件组件

一个基本的单文件组件：

（三个标签顺序可随意更改）

html 复制代码

<template>
<!-- 此处编写组件的结构 -->
</template>
<script>
/* 此处编写组件的逻辑 */
</script>
<style>
/* 此处编写组件的样式 */
</style>

1.模板(template)

模板用于搭建当前组件的DOM结构，代码写在<template>标签中。<template>是Vue提供的容器标签，只起到包裹作用，不是DOM元素。每个单文件组件最多可以包含一个顶层<template>标签。

2.样式(style)

样式通过css代码为当前组件设置样式，代码写在<style>标签中。每个单文件组件可以包含多个顶层<style>标签，不需要样式也可以省略<style>标签。

3.逻辑

逻辑是通过JavaScript代码处理组件的数据与业务，代码写在<script>标签中。每个单文件组件只能包含一个script>标签，如果当前页面没有逻辑代码且不包含<template>标签，则可以省略<script>标签。

二、数据绑定

1.数据绑定

（1）定义数据

由于数据和页面是分开的，在显示数据前需要在<script>标签中定义组件所需要的数据，语法如下;

javascript 复制代码

<script>
export default {
  setup(){
return{
    数据名：数据值,
    ......
    }
  }
}
</script>

export default------模块导出语法

setup()函数------是Vue3特有的，该函数是组合API的起点，在函数中可以定义数据和方法并通过return关键词返回给一个对象，用于将对象中的数据暴露给模板和组件实例。

更加简洁的setup()函数使用语法：

javascript 复制代码

<script setup>

const  数据名 = 数据值

</script>

（2）输出数据

在<script>标签中定义了的数据后，输出数据由Vue开发者提供的Mustache语法（又称为双大括号语法）在<template>标签中进行输出，语法如下：

html 复制代码

{{数据名}}

Mustache语法------还可以将表达式的值作为输出内容。(表达式的值可以是字符串、数字等等类型)

2.响应式数据绑定

Vue开发者提供了ref()函数、reactive()函数、toRef()函数和toRefs()函数用于定义响应式数据。

注意：在使用以上函数时要从vue中引入才可以使用。

（1）ref()函数

ref()函数用于将数据 转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。

使用ref()函数定义响应式数据的语法如下：

javascript 复制代码

响应式数据 = ref(数据)

如果需要更改响应式数据的值，可以使用以下语法：

javascript 复制代码

响应式数据.value = 新值

**例：**使用ref()函数将数据"每天都开心！"改为响应式数据，并更改为"开心每一天！"。

1.创建src/components/Ref.vue文件

javascript 复制代码

<template>
{{ message }}
</template>
<script setup>
import { ref } from 'vue'
const message = ref('每天都开心！')
/*这里用到了延时函数setTimeout(){}和
箭头函数()=>{}
*/
setTimeout(()=>{
    message.value = '开心每一天！'
},2000)
</script>

这里用到了延时函数setTimeout和箭头函数，setTimeout函数与箭头函数结合使用非常简单，只需要将箭头函数作为setTimeout的第一个参数，并将延迟时间作为第二个参数即可**。**

使用延时函数与箭头函数结合的优势： 在setTimeout中使用箭头函数的一个重要优势是解决了this关键字的问题。在普通的匿名函数中，this关键字指向的是函数的执行环境，而在箭头函数中，this关键字指向的是定义函数时的环境。这意味着在箭头函数中使用this关键字可以避免一些常见的作用域问题，并且可以更方便地访问外部作用域中的变量‌1。

javascript 复制代码

//箭头函数

//延时函数
setTimeout(() => {
     // 要执行的代码
   }, 延迟的时间); 

//延时函数与箭头函数结合
setTimeout(() => {
  // 要执行的代码
}, 延迟的时间);

（2）reactive()函数

reactive()函数用于创建 一个响应式对象或数组，将普通的对象或数组作为参数传给该函数即可。

使用reactive()函数定义响应式数据的语法如下：

javascript 复制代码

响应式对象或数组 = reactive(普通的对象或数组)

例：使用reactive()函数定义一个响应式对象，其中包含信息"每天都开心。"。

1.创建src/components/Reactive.vue文件

javascript 复制代码

<template>
{{ obj.message }}
</template>
<script setup>
import { reactive } from 'vue'
const obj= reactive({message:'每天都开心！'})
setTimeout(()=>{
    obj.message = '开心每一天！'
},2000)
</script>

（3）toRef()函数

toRef()函数用于将响应式对象 中的单个属性 转换为响应式数据。

使用toRef()函数定义响应式数据的语法如下：

javascript 复制代码

响应式数据 = toRef(响应式对象,'属性名')

例：使用toRef()函数将一个响应式对象中的单个message属性转换成响应式数据。

javascript 复制代码

<template>
<div>message的值：{{ message }}</div>
<div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive,toRef } from 'vue'
const obj= reactive({message:'每天都开心！'})
const obj = toRef(obj,'message')
setTimeout(()=>{
    message.value = '开心每一天！'
},2000)
</script>

（4）toRefs()函数

toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。

使用toRefs()函数定义响应式数据的语法如下：

javascript 复制代码

所有属性组成的对象 = toRefs(响应式对象)

例：使用toRefs()函数将一个响应式对象中的所有属性转换成响应式数据。

javascript 复制代码

<template>
<div>message的值：{{ message }}</div>
<div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive,toRefs } from 'vue'
const obj= reactive({message:'每天都开心！'})
let { message } = toRefs(obj)
setTimeout(()=>{
    message.value = '开心每一天！'
},2000)
</script>