【Vue3】选项式 API
【Vue3】选项式 API
- 背景
- 简介
- 开发环境
- 开发步骤及源码
- 总结
背景
随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。
简介
本文介绍如何使用选项式 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 sassadded 16 packages in 2s10 packages are looking for funding run `npm fund` for details
总结
- 此示例中的数据并非响应式数据，即数据的变更并不会反应在页面结构中，后续会专门讲解响应式数据；
- 选项式 API（Options API） 属于 Vue 的传统书写风格，建议使用 Vue 官方推荐的组合式 API（Composition API）。