Vue3 学习教程，从入门到精通，Vue 3 内置属性语法知识点及案例代码(25）

Vue 3 内置属性语法知识点及案例代码

Vue 3 提供了丰富的内置属性，帮助开发者高效地构建用户界面。以下将详细介绍 Vue 3 的主要内置属性，并结合详细的案例代码进行说明。每个案例代码都包含详细的注释，帮助初学者更好地理解其用法。

1. data

知识点

  • data: 用于定义组件的响应式数据。
  • 在 Vue 3 中，data 必须是一个返回对象的函数。
  • 响应式数据的变化会自动更新视图。

案例代码

<template><div><h1>{{ message }}</h1><button @click="updateMessage">更新消息</button></div>
</template><script>
export default {name: 'DataExample',data() {return {message: 'Hello, Vue 3!'};},methods: {updateMessage() {this.message = '消息已更新！';}}
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

说明:

  • data 函数返回一个包含 message 属性的对象。
  • 点击按钮时，updateMessage 方法会更新 message 的值，视图会自动刷新。

2. methods

知识点

  • methods: 用于定义组件中的方法。
  • 方法中的 this 指向当前组件实例，可以访问 data、props 等属性。

案例代码

<template><div><p>计数器: {{ count }}</p><button @click="increment">增加</button><button @click="decrement">减少</button></div>
</template><script>
export default {name: 'MethodsExample',data() {return {count: 0};},methods: {increment() {this.count++;},decrement() {this.count--;}}
};
</script><style scoped>
button {margin: 0 5px;
}
</style>

说明:

  • 定义了两个方法 increment 和 decrement，用于增加和减少 count 的值。
  • 按钮点击时调用相应方法，更新视图。

3. computed

知识点

  • computed: 用于定义计算属性，基于依赖进行缓存。
  • 计算属性只有在依赖发生变化时才会重新计算。
  • 适用于需要基于现有数据计算出新数据的场景。

案例代码

<template><div><p>原始价格: {{ price }} 元</p><p>折扣价格: {{ discountedPrice }} 元</p><button @click="increasePrice">增加价格</button></div>
</template><script>
export default {name: 'ComputedExample',data() {return {price: 100};},computed: {discountedPrice() {return this.price * 0.9; // 假设打9折}},methods: {increasePrice() {this.price += 10;}}
};
</script><style scoped>
button {margin-top: 10px;
}
</style>

说明:

  • discountedPrice 是一个计算属性，基于 price 计算折扣后的价格。
  • 当 price 变化时，discountedPrice 会自动更新。

4. watch

知识点

  • watch: 用于监听数据的变化，并在变化时执行相应的回调函数。
  • 适用于需要在数据变化时执行异步操作或复杂逻辑的场景。

案例代码

<template><div><p>用户名: {{ username }}</p><input v-model="username" placeholder="输入用户名" /><p v-if="isUsernameValid">用户名有效</p><p v-else>用户名无效</p></div>
</template><script>
export default {name: 'WatchExample',data() {return {username: '',isUsernameValid: false};},watch: {username(newVal) {if (newVal.length >= 3) {this.isUsernameValid = true;} else {this.isUsernameValid = false;}}}
};
</script><style scoped>
input {margin-top: 10px;padding: 5px;
}
</style>

说明:

  • watch 监听 username 的变化。
  • 根据 username 的长度更新 isUsernameValid 的值。
  • 输入框内容变化时，视图会根据 isUsernameValid 显示相应的提示。

5. props

知识点

  • props: 用于接收父组件传递的数据。
  • 可以是数组或对象，用于定义组件的接收属性。

案例代码

父组件

<template><div><ChildComponent :greeting="message" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent},data() {return {message: '你好，Vue 3!'};}
};
</script>

子组件 (ChildComponent.vue)

<template><div><h2>{{ greeting }}</h2></div>
</template><script>
export default {name: 'ChildComponent',props: {greeting: {type: String,required: true}}
};
</script><style scoped>
h2 {color: #35495e;
}
</style>

说明:

  • 父组件通过 props 向子组件传递 greeting 数据。
  • 子组件通过 props 接收并使用该数据。

6. emit

知识点

  • emit: 用于触发自定义事件，向父组件传递数据或通知事件。
  • 子组件通过 emit 触发事件，父组件监听并处理事件。

案例代码

子组件 (ChildComponent.vue)

<template><div><button @click="notifyParent">通知父组件</button></div>
</template><script>
export default {name: 'ChildComponent',methods: {notifyParent() {this.$emit('child-event', '来自子组件的消息');}}
};
</script><style scoped>
button {padding: 5px 10px;
}
</style>

父组件

<template><div><h1>{{ message }}</h1><ChildComponent @child-event="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent},data() {return {message: '等待子组件的消息...'};},methods: {handleChildEvent(payload) {this.message = payload;}}
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

说明:

  • 子组件通过 this.$emit 触发 child-event 事件，并传递一个字符串作为负载。
  • 父组件监听 child-event 事件，并调用 handleChildEvent 方法处理事件。
  • 父组件的 message 会根据子组件传递的负载进行更新。

7. v-model

知识点

  • v-model: 用于在表单输入元素和组件状态之间创建双向绑定。
  • 简化了表单处理和数据绑定。

案例代码

<template><div><input v-model="text" placeholder="输入文本" /><p>输入的内容: {{ text }}</p></div>
</template><script>
export default {name: 'VModelExample',data() {return {text: ''};}
};
</script><style scoped>
input {padding: 5px;margin-bottom: 10px;
}
</style>

说明:

  • v-model 双向绑定 text 数据和输入框的值。
  • 输入框内容变化时，text 的值会实时更新，反之亦然。

8. v-bind 和 v-on

知识点

  • v-bind: 用于动态绑定 HTML 属性或组件的 props。
  • v-on: 用于绑定事件监听器。

案例代码

<template><div><img v-bind:src="imageUrl" alt="示例图片" /><button v-on:click="changeImage">更换图片</button></div>
</template><script>
export default {name: 'VBindVOnExample',data() {return {imageUrl: 'https://via.placeholder.com/150',images: ['https://via.placeholder.com/150','https://via.placeholder.com/200','https://via.placeholder.com/250']};},methods: {changeImage() {const index = Math.floor(Math.random() * this.images.length);this.imageUrl = this.images[index];}}
};
</script><style scoped>
img {width: 150px;height: 150px;margin-bottom: 10px;
}
button {padding: 5px 10px;
}
</style>

说明:

  • v-bind:src 动态绑定图片的 src 属性。
  • v-on:click 绑定点击事件，调用 changeImage 方法更换图片。
  • 点击按钮时，随机选择一张图片并更新 imageUrl，图片会实时更换。

9. v-if 和 v-for

知识点

  • v-if: 根据条件渲染元素。
  • v-for: 用于遍历数组或对象，渲染列表。

案例代码

<template><div><h2>水果列表</h2><ul><li v-for="(fruit, index) in fruits" :key="index">{{ index + 1 }}. {{ fruit.name }}<button v-if="fruit.quantity > 0" @click="buyFruit(index)">购买</button><span v-else>已售罄</span></li></ul><p>总购买数量: {{ totalPurchased }}</p></div>
</template><script>
export default {name: 'VIfVForExample',data() {return {fruits: [{ name: '苹果', quantity: 5 },{ name: '香蕉', quantity: 0 },{ name: '橘子', quantity: 3 }],totalPurchased: 0};},methods: {buyFruit(index) {if (this.fruits[index].quantity > 0) {this.fruits[index].quantity--;this.totalPurchased++;}}}
};
</script><style scoped>
ul {list-style-type: none;padding: 0;
}
li {margin: 5px 0;
}
button {margin-left: 10px;padding: 2px 5px;
}
</style>

说明:

  • 使用 v-for 遍历 fruits 数组，渲染水果列表。
  • 使用 v-if 判断水果的 quantity 是否大于 0，显示“购买”按钮或“已售罄”。
  • 点击“购买”按钮时，减少对应水果的数量，并增加总购买数量。

10. provide 和 inject

知识点

  • provide: 用于向子组件提供数据或方法。
  • inject: 用于在子组件中接收 provide 提供的数据或方法。

案例代码

祖先组件 (AncestorComponent.vue)

<template><div><h1>祖先组件</h1><ChildComponent /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'AncestorComponent',components: {ChildComponent},provide() {return {ancestorMessage: '来自祖先组件的消息'};}
};
</script>

子组件 (ChildComponent.vue)

<template><div><h2>子组件</h2><p>{{ ancestorMessage }}</p></div>
</template><script>
export default {name: 'ChildComponent',inject: ['ancestorMessage']
};
</script><style scoped>
h2 {color: #35495e;
}
</style>

说明:

  • 祖先组件通过 provide 提供 ancestorMessage 数据。
  • 子组件通过 inject 接收 ancestorMessage，并在模板中使用。
  • 这种方式可以实现跨层级组件间的数据共享。

总结

以上介绍了 Vue 3 中常用的内置属性及其用法，包括 data、methods、computed、watch、props、emit、v-model、v-bind、v-on、v-if、v-for、provide 和 inject。每个知识点都配有详细的案例代码和注释，帮助初学者更好地理解和应用这些属性。

通过不断实践和深入学习，您将能够熟练地使用这些属性，构建功能丰富、响应式的 Vue 3 应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/92051.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/92051.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器学习基石：深入解析线性回归

机器学习基石：深入解析线性回归

线性回归是机器学习中最基础、最核心的算法之一&#xff0c;它为我们理解更复杂的模型奠定了基础。本文将带你全面解析线性回归的方方面面。1. 什么是回归&#xff1f; 回归分析用于预测连续型数值。它研究自变量&#xff08;特征&#xff09;与因变量&#xff08;目标&#xf…
阅读更多...
OneCodeServer 架构深度解析：从组件设计到运行时机制

OneCodeServer 架构深度解析：从组件设计到运行时机制

一、架构概览与设计哲学1.1 系统定位与核心价值OneCodeServer 作为 OneCode 平台的核心服务端组件&#xff0c;是连接前端设计器与后端业务逻辑的桥梁&#xff0c;提供了从元数据定义到应用程序执行的完整解决方案。它不仅是一个代码生成引擎&#xff0c;更是一个全生命周期管理…
阅读更多...
Jwts用于创建和验证 ​​JSON Web Token（JWT）​​ 的开源库详解

Jwts用于创建和验证 ​​JSON Web Token（JWT）​​ 的开源库详解

Jwts用于创建和验证 ​​JSON Web Token&#xff08;JWT&#xff09;​​ 的开源库详解在 Java 开发中&#xff0c;提到 Jwts 通常指的是 ​​JJWT&#xff08;Java JWT&#xff09;库​​中的核心工具类 io.jsonwebtoken.Jwts。JJWT 是一个专门用于创建和验证 ​​JSON Web To…
阅读更多...
如果发送的数据和接受的数据不一致时，怎么办？

如果发送的数据和接受的数据不一致时，怎么办？

那ART4222这个板卡举例&#xff0c;我之间输入一个原始数据“6C532A14”&#xff0c;但是在选择偶校验时&#xff0c;接收的是“6C532B14”&#xff0c;我发送的码率&#xff08;运行速度&#xff09;是100000&#xff0c;但接受的不稳定&#xff0c;比如&#xff1b;“100100.…
阅读更多...
ISCC认证：可持续生产的新标杆。ISCC如何更快认证

ISCC认证：可持续生产的新标杆。ISCC如何更快认证

在全球可持续发展浪潮中&#xff0c;ISCC&#xff08;国际可持续与碳认证&#xff09;体系已成为企业绿色转型的重要工具。这一国际公认的认证系统覆盖农业、林业、废弃物处理等多个领域&#xff0c;通过严格的可持续性标准、供应链可追溯性要求和碳排放计算规范&#xff0c;建…
阅读更多...
想对学习自动化测试的一些建议

想对学习自动化测试的一些建议

Python接口自动化测试零基础入门到精通&#xff08;2025最新版&#xff09;接触了不少同行&#xff0c;由于他们之前一直做手工测试&#xff0c;现在很迫切希望做自动化测试&#xff0c;其中不乏工作5年以上的人。 本人从事软件自动化测试已经近5年&#xff0c;从server端到web…
阅读更多...
电子电气架构 ---智能电动汽车嵌入式软件开发过程中的block点

电子电气架构 ---智能电动汽车嵌入式软件开发过程中的block点

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…
阅读更多...
createAsyncThunk

createAsyncThunk

下面&#xff0c;我们来系统的梳理关于 Redux Toolkit 异步操作&#xff1a;createAsyncThunk 的基本知识点&#xff1a;一、createAsyncThunk 概述 1.1 为什么需要 createAsyncThunk 在 Redux 中处理异步操作&#xff08;如 API 调用&#xff09;时&#xff0c;传统方法需要手…
阅读更多...
STM32F103C8T6 BC20模块NBIOT GPS北斗模块采集温湿度和经纬度发送到EMQX

STM32F103C8T6 BC20模块NBIOT GPS北斗模块采集温湿度和经纬度发送到EMQX

云平台配置 访问下载页面&#xff1a;免费试用 EMQX Cloud 或 EMQX Enterprise | 下载 EMQX&#xff0c;根据需求选择对应版本下载。将下载的压缩包上传至服务器&#xff08;推荐存放于C盘根目录&#xff0c;便于后续操作&#xff09;&#xff0c;并解压至指定路径&#xff08…
阅读更多...
YOLO11涨点优化：自研检测头， 新创新点（SC_C_11Detect）检测头结构创新，实现有效涨点

YOLO11涨点优化：自研检测头， 新创新点（SC_C_11Detect）检测头结构创新，实现有效涨点

目标检测领域迎来重大突破！本文揭秘原创SC_C_11Detect检测头，通过空间-通道协同优化与11层深度结构，在YOLO系列上实现mAP最高提升5.7%，小目标检测精度暴涨9.3%！创新性结构设计+即插即用特性，为工业检测、自动驾驶等场景带来革命性提升！ 一、传统检测头的三大痛点 在目…
阅读更多...
OSCP 考试期间最新考试政策

OSCP 考试期间最新考试政策

根据 Offensive Security 官方最新考试政策&#xff08;2025 年 7 月&#xff09;&#xff0c;OSCP 考试期间禁止或严格限制以下工具与行为&#xff1a; 一、绝对禁止使用的工具/服务 类别举例说明商业/付费版本Metasploit Pro、Burp Suite Pro、Cobalt Strike、Canvas、Core …
阅读更多...
如何基于MQ实现分布式事务

如何基于MQ实现分布式事务

文章目录1.可靠消息最终一致性1.1 本地消息表1.1.1 本地消息表的优缺点1.消息堆积&#xff0c;扫表慢2.集中式扫表&#xff0c;会影响正常业务3.定时扫表的延迟问题1.1.2 本地消息表的代码实践1.表结构设计2.具体业务实现1.2 事务消息1.2.1 事务消息的三个阶段阶段1&#xff1a…
阅读更多...
ARM学习（45）AXI协议总线学习

ARM学习（45）AXI协议总线学习

笔者来介绍一下ARM AMBA 总线中的AXI协议 1、简介 ARM 公司推出的AMBA 总线（Advanced Microcontroller Bus Architecture） ，目前已经推出到AMBA5版本。主要包括 APB：Advanced Peripheral Bus，针对外设 AHB：Advanced High-Performance Bus，高性能总线，支持64/128 位多管…
阅读更多...
Visual C++与HGE游戏引擎：创建伪2.5D斜45度视角游戏

Visual C++与HGE游戏引擎：创建伪2.5D斜45度视角游戏

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本教程专注讲解如何结合Visual C和HGE游戏引擎构建一个斜45度视角的伪2.5D游戏世界。HGE提供了DirectX的接口&#xff0c;简化了图形和音频处理&#xff0c;使得开发者可以专注于游戏逻辑和视觉效果的实现。教程…
阅读更多...
打造个人数字图书馆：LeaNote+cpolar如何成为你的私有化知识中枢？

打造个人数字图书馆：LeaNote+cpolar如何成为你的私有化知识中枢？

文章目录前言1. 安装Docker2. Docker本地部署Leanote蚂蚁笔记3. 安装cpolar内网穿透4. 固定Leanote蚂蚁笔记公网地址前言 在信息爆炸的时代&#xff0c;如何系统管理知识资产并实现价值输出&#xff1f;蚂蚁笔记&#xff08;Leanote&#xff09;提供了一种全新解决方案。这款开…
阅读更多...
[特殊字符]️ 整个键盘控制无人机系统框架

[特殊字符]️ 整个键盘控制无人机系统框架

&#x1f3af; 五大核心模块详解1. &#x1f4e5; 输入处理模块keyboard_control_node ├── 功能&#xff1a;捕获键盘输入并转换为ROS消息 ├── 文件&#xff1a;keyboard_control.cpp ├── 输入&#xff1a;键盘按键 (W/A/S/D/R/F/Q/E/L/ESC) ├── 输出&#xff1a;g…
阅读更多...
机器学习第三课之逻辑回归（三）LogisticRegression

机器学习第三课之逻辑回归（三）LogisticRegression

目录 简介 1.下采样 2.过采样 简介 接上两篇篇博客最后&#xff0c;我们使用了K折交叉验证去寻找最合适的C值&#xff0c;提升模型召回率&#xff0c;对于选取C的最优值&#xff0c;我们就要把不同C值放到模型里面训练&#xff0c;然后用验证集去验证得到结果进行比较&#x…
阅读更多...
1.Java语言有什么特点

1.Java语言有什么特点

1.Java语言有什么特点 1.面向对象编程&#xff0c;拥有封装&#xff0c;继承和多态的特性&#xff0c;所有可以很好的设计出低耦合的项目工程。 2.很好的可移植性&#xff0c;在Java中有java虚拟机&#xff08;JVM&#xff09;的支持&#xff0c;每写一个类都是.Class文件。J…
阅读更多...
部署 Kibana 8.2.2 可视化管理 Elasticsearch 8.2.2 集群

部署 Kibana 8.2.2 可视化管理 Elasticsearch 8.2.2 集群

✅ 适用版本&#xff1a;Elasticsearch 8.2.2 Kibana 8.2.2 一、环境准备 组件版本示例地址Elasticsearch8.2.2192.168.130.61:9200, 192.168.130.62:9200, 192.168.130.65:9200Kibana8.2.2部署在 192.168.130.651操作系统CentOS 7⚠️ 严格版本匹配&#xff1a;Kibana 8.2.2…
阅读更多...
7.2 I/O接口 (答案见原书 P305)

7.2 I/O接口 (答案见原书 P305)

第7章 输入/输出系统 7.1 I/O系统基本概念 (答案见原书 P301) & 7.2 I/O接口 (答案见原书 P305) 01. 在统一编址的方式下，区分存储单元和I/O设备是靠（ A ）。 题目原文 在统一编址的方式下，区分存储单元和I/O设备是靠（ ）。 A. 不同的地址码 B. 不同的地址线 C. 不同…
阅读更多...
最新文章

Copyright @ 2022~2023