VUE.JS 实践第二章

xuankuxiaoyao2026-03-20 12:31

二、数据绑定

2.1 ：普通数据绑定

新建message01.vue页面

复制代码

<template>
    {{message}}
</template>
<script setup>
  const message="不积跬步无以至千里"
</script>

main.js 页面修改代码

复制代码

import message01 from './components/message01.vue'
createApp(message01).mount('#app')

运行结果

2.2 响应式数据绑定

2.2.1：ref() 响应式绑定函数

新建ref01页面

复制代码

<template>
    {{message}}
</template>
<script setup>
import { ref } from 'vue';
const message=ref('会当凌绝顶，一览众山小')
setTimeout(() => {
   message.value='锲而不舍，金石可镂'
}, 2000);
</script>

main.js 页面修改代码

复制代码

import ref01 from './components/ref01.vue'
createApp(ref01).mount('#app')

运行结果：2秒后页面数据内容自动切换

2.2.2：ref() 响应式绑定函数

新建reactive.vue页面

复制代码

<template>{{ obj.message }}</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '不畏浮云遮望眼，自缘身在最高层' })
setTimeout(() => {
  obj.message = '欲穷千里目，更上一层楼'
}, 5000)
</script>

main.js 页面修改代码

复制代码

import Reactive from './components/Reactive.vue'
createApp(Reactive).mount('#app')

运行结果：5秒后页面数据内容自动切换

4个响应式函数的区别

多学一招：普通数据绑定和响应式数据绑定的区别

1. 普通数据绑定（非响应式）

普通数据绑定只是一次性的赋值，数据初始化时会渲染到视图，但后续数据发生变化时，视图不会自动更新。

2. 响应式数据绑定

响应式数据绑定是 Vue 的核心特性，Vue 会对数据进行「劫持监听」，当数据发生变化时，自动触发视图重新渲染。

其他：多学一招

Vscode快捷键：

放大字体Ctrl + +（Ctrl 加加号）

打开扩展面板 Ctrl + Shift + X

VUE.JS 实践 第二章

1. 普通数据绑定（非响应式）

2. 响应式数据绑定

VUE.JS 实践第二章