【愚公系列】《循序渐进Vue.js 3.x前端开发实践》010-Vue 组件的属性和方法：属性与方法基础
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在Vue.js的世界里，组件是构建现代前端应用的基石。它们不仅使代码结构更加清晰，也为开发者提供了灵活的复用性和可维护性。而理解组件的属性和方法，是掌握Vue开发的关键一步。
在本篇文章中，我们将深入探讨Vue组件中的属性和方法的基础知识。您将学习到如何定义和使用组件的props、data、computed和methods等重要特性，了解它们在组件中的作用和最佳实践。通过具体的实例，我们会逐步解析每个概念，帮助您在实际开发中更有效地管理组件间的数据流和交互。
无论您是刚入门的开发者，还是希望进一步提升技能的Vue爱好者，这篇文章都将为您提供有价值的见解与实用的技巧。让我们一起探索Vue组件的属性和方法，开启您的前端开发之旅吧！
🚀一、属性与方法基础
在前面的章节中，我们通过使用setup方法来定义Vue 组件中模板所需的属性和方法。setup方法是 Vue 3.x版本引入的组合式 API的一部分,它允许我们在组件创建时编写常规的 JavaScript 代码来构建响应性的数据系统。这个方法为我们提供了一种声明性的方式来组织组件的逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性与方法</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<div>{{count}}</div>
<div>{{type}}</div>
<div>{{typeFunc()}}</div>
<button @click="add">Add</button>
</div>
<script>
const {createApp, ref, computed} = Vue
// 定义组件
const config = {
setup() {
const count = ref(0)
const add = () => {
count.value ++
}
const typeFunc = () => {
return count.value > 10 ? "大" : "小"
}
// const type = computed(()=>{
// return count.value > 10 ? "大" : "小"
// })
const type = computed({
get() {
return count.value > 10 ? "大" : "小"
},
set(newValue) {
if (newValue == "大") {
count.value = 11
} else {
count.value = 0
}
}
})
return {count, add, type, typeFunc}
}
}
// 创建组件并获取到组件实例
let instance = createApp(config).mount("#Application")
// 可以获取到组件中的data数据
console.log(instance.count)
// 修改属性
instance.count = 5
// 下面获取到的count的值为5
console.log(instance.count)
// 实例可以直接调用方法
instance.add()
//1
console.log(instance.count)
console.log(instance.type)
// console.log(instance.type)
instance.type = "大"
// 将输出11
console.log(instance.count)
</script>
</body>
</html>
该代码展示了一个简单的使用 Vue 3 的 Web 应用，通过 setup 函数结合 Vue 3 的 Composition API 实现了一些属性和方法的定义与操作。下面逐步解析代码的各个部分：
🔎1.HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性与方法</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<div>{{count}}</div>
<div>{{type}}</div>
<div>{{typeFunc()}}</div>
<button @click="add">Add</button>
</div>
- 挂载点：
<div id="Application">是 Vue 应用的挂载点。 - 插值： 使用
{{count}}、{{type}}和{{typeFunc()}}进行数据插值，分别显示count的值，type的值，以及通过typeFunc函数返回的内容。 - 按钮： 当单击
Add按钮时，会调用add方法，增加count的值。
🔎2.Vue 应用的逻辑部分
<script>
const {createApp, ref, computed} = Vue;
// 定义组件
const config = {
setup() {
const count = ref(0); // 定义一个响应式的 count 变量，初始值为 0
const add = () => { // 定义 add 方法，用于增加 count
count.value++;
};
// 定义 typeFunc 方法，根据 count 的值来返回 "大" 或 "小"
const typeFunc = () => {
return count.value > 10 ? "大" : "小";
};
// 定义一个计算属性 type，get 和 set 都可用
const type = computed({
get() {
return count.value > 10 ? "大" : "小";
},
set(newValue) {
if (newValue == "大") {
count.value = 11;
} else {
count.value = 0;
}
}
});
// 返回定义的响应式变量和方法，供模板使用
return {count, add, type, typeFunc};
}
};
// 创建 Vue 应用并挂载到 #Application 元素上
let instance = createApp(config).mount("#Application");
// 可以获取到组件中的 data 数据
console.log(instance.count); // 输出 0
// 修改 count 属性
instance.count = 5; // 手动设置 count 的值为 5
// 输出修改后的 count 值
console.log(instance.count); // 输出 5
// 调用 add 方法，增加 count 值
instance.add(); // count 变为 6
console.log(instance.count); // 输出 6
console.log(instance.type); // 输出 "小"（因为 6 < 10）
// 设置 type 为 "大"，这会触发 set 函数，将 count 设置为 11
instance.type = "大";
console.log(instance.count); // 输出 11
</script>
🔎3.核心概念与功能分析
🦋3.1 ref 和响应式数据
ref(0)定义了一个响应式的count变量，初始值为 0。通过count.value访问和修改其值。当count改变时，所有依赖它的模板部分都会自动更新。
🦋3.2 add 方法
add方法通过count.value++增加count的值，每当单击按钮时，count就会增加 1。
🦋3.3 typeFunc 函数
typeFunc是一个简单的函数，根据count.value的值来返回不同的结果。count.value > 10返回 “大”，否则返回 “小”。该函数被直接调用并显示在模板中。
🦋3.4 computed 计算属性
type是一个计算属性，通过computed定义。它既有get方法用于获取当前count的状态（“大” 或 “小”），也有set方法来根据设置的type修改count的值。- 如果
type被设置为 “大”，则count.value被强制设置为 11。 - 如果
type被设置为 “小”，则count.value被重置为 0。
- 如果
🦋3.5 实例访问
- Vue 的实例对象通过
createApp(config).mount("#Application")创建并挂载。之后可以直接访问和操作实例中的数据和方法。例如，通过instance.count可以获取或修改count的值，instance.add()可以调用add方法。
🔎4.运行逻辑
- 初始时，
count的值为 0，type为 “小”（因为count <= 10）。 - 单击 “Add” 按钮，
count递增，页面中的count和type动态更新。 - 调用
instance.type = "大"时，count会被设置为 11，因为type的set方法强制将count修改为 11。 - 可以通过控制台输出看到每次操作后的数据变化。
🔎5.总结
该代码展示了 Vue 3 中如何使用 Composition API 的 ref 和 computed 来管理响应式数据，并通过 setup() 函数返回数据和方法供模板使用。type 计算属性不仅提供了数据的自动更新机制，还能通过 set 方法实现双向数据绑定，直接修改依赖它的 count 值。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）