vue3简单的小应用

举报
周杰伦本人 发表于 2025/01/22 14:08:27 2025/01/22
【摘要】 vue3简单的小应用一、创建功能组件接下来,我们将创建一个具有实际功能的组件。右键新建一个名为“components”的文件夹,用于存放各个功能组件,就像树枝和叶子一样。在“components”文件夹中,新建一个名为“Person.vue”的文件,用于展示个人信息。二、编写 Person 组件在“Person.vue”文件中,可以利用代码片段快速生成模板。例如,通过输入“v2”并回车,生成...

vue3简单的小应用

一、创建功能组件

接下来,我们将创建一个具有实际功能的组件。右键新建一个名为“components”的文件夹,用于存放各个功能组件,就像树枝和叶子一样。在“components”文件夹中,新建一个名为“Person.vue”的文件,用于展示个人信息。

二、编写 Person 组件

在“Person.vue”文件中,可以利用代码片段快速生成模板。例如,通过输入“v2”并回车,生成一套基本的模板结构。这个“v2”是自己配置的代码片段,代表 Vue 2 专属的代码片段。在模板中,添加一个类名为“person”的 div 容器,并为其添加一些样式,如背景色设为蓝色等。在 script 标签中,定义组件的名称为“Person”。接下来,展示个人信息,如姓名、年龄和电话。在 data 函数中,返回一个对象,包含姓名“张三”、年龄“18”和电话“13812341234”。然后,在 template 中使用插值语法展示这些信息。

Person.vue文件具体代码如下:

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
  data() {
    return {
      name: '张三',
      age: 18,
      phone: '13812341234'
    };
  },
  methods: {
    changeName() {
      this.name = '张杠三';
    },
    changeAge() {
      this.age += 1;
    },
    showPhone() {
      alert(this.phone);
    }
  }
};
</script>

<style>
.person {
  background-color: #00f;
  color: #fff;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

三、添加交互功能

为了使组件更具交互性,添加两个按钮,分别用于修改名字和年龄。为这两个按钮绑定点击事件,分别调用“changeName”和“changeAge”方法。在 methods 中定义这两个方法,其中“changeName”方法将姓名修改为“张杠三”,“changeAge”方法将年龄自增。这样,当点击按钮时,就可以看到姓名和年龄的变化。

四、注册并使用组件

在“App.vue”中,需要引入并注册“Person”组件,才能在页面上使用它。首先,通过“import Person from './components/Person.vue'”引入组件。然后,在 components 选项中注册“Person”组件。最后,在 template 中使用“”标签来插入组件。此时,回到页面上,可以看到“Person”组件的内容。

<template>
  <div class="app">
    <h1>你好啊</h1>
    <Person />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Person from './components/Person.vue';

export default defineComponent({
  name: 'App',
  components: {
    Person//注册组件
  }
});
</script>

<style>
.app {
  background-color: #ddd;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

五、使用开发者工具

如果页面上没有显示预期的内容,可以使用开发者工具进行检查。有时可能需要重启项目或重新打开浏览器。开发者工具可以帮助我们查看组件的结构和数据。如果没有安装开发者工具,可以通过搜索和下载插件来安装。安装完成后,重新启动项目并打开开发者工具,就可以看到组件的详细信息了。安装vue扩展插件

六、总结

通过上述步骤,我们成功创建了一个具有交互功能的“Person”组件,并在“App.vue”中注册和使用了它。同时,我们也证明了在 Vue 3 中可以使用 Vue 2 的语法来编写组件。这种兼容性使得从 Vue 2 迁移到 Vue 3 的过程更加平滑。在后续的开发中,可以继续扩展组件的功能,添加更多的交互和数据处理逻辑。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。