背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍如何使用选项式 API 编写 Vue3 组件。
选项式 API(Options API)是 Vue 组件的一种传统书写风格,另一种风格是组合式 API(Composition API)。
开发环境
分类 | 名称 | 版本 |
---|---|---|
操作系统 | Windows | Windows 11 |
IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 从零开始创建一个 Vue3 工程,参考:【Vue3】从零开始编写项目。
2> 编写 Vue 根组件 App.vue
。
<!-- 组件结构 -->
<template>
<div class="person">
<h3>姓名:{{ name }}</h3>
<h3>生日:{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3>
<button @click="showContact">查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
// 组件名
name: 'App',
data() {
return {
name: '哈利·波特',
birth: new Date('1980-07-31'),
contact: '霍格沃茨魔法学校格兰芬多学院',
}
},
methods: {
showContact() {
alert(this.contact)
}
}
}
</script>
<!-- 组件样式 -->
<style lang="scss">
.person {
background-color: cadetblue;
border-radius: 5px;
color: white;
padding: 20px;
button {
background-color: gold;
border-radius: 5px;
padding: 5px 10px;
}
}
</style>
说明:
- 数据定义在
data
选项中,data
选项是一个函数,返回一个 JSON 对象,页面结构中可以直接使用此 JSON 对象中的属性值; - 行为方法定义在
methods
选项中,methods
选项是一个 JSON 对象,其成员由函数function
组成; - 此处定义样式使用到了 sass 预处理器,需要执行
npm install -D sass
命令安装。PS D:\temp\VUE\vue3-demo> npm install -D sass added 16 packages in 2s 10 packages are looking for funding run `npm fund` for details
总结
- 此示例中的数据并非响应式数据,即数据的变更并不会反应在页面结构中,后续会专门讲解响应式数据;
- 选项式 API(Options API) 属于 Vue 的传统书写风格,建议使用 Vue 官方推荐的组合式 API(Composition API)。