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>
相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法