vue3简单的小应用
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 的过程更加平滑。在后续的开发中,可以继续扩展组件的功能,添加更多的交互和数据处理逻辑。
- 点赞
- 收藏
- 关注作者
评论(0)