合肥专业做网站公司有哪些,金泉网做网站找谁,做网站在什么地方找,百度云免费做网站【Vue3】选项式 API 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的日子。… 【Vue3】选项式 API 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍如何使用选项式 API 编写 Vue3 组件。
选项式 APIOptions API是 Vue 组件的一种传统书写风格另一种风格是组合式 APIComposition API。
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 从零开始创建一个 Vue3 工程参考【Vue3】从零开始编写项目。
2 编写 Vue 根组件 App.vue。
!-- 组件结构 --
templatediv classpersonh3姓名{{ name }}/h3h3生日{{ birth.getFullYear() - (birth.getMonth() 1) - birth.getDate() }}/h3button clickshowContact查看联系方式/button/div
/templatescript langts
export default {// 组件名name: App,data() {return {name: 哈利·波特,birth: new Date(1980-07-31),contact: 霍格沃茨魔法学校格兰芬多学院,}},methods: {showContact() {alert(this.contact)}}
}
/script!-- 组件样式 --
style langscss
.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总结
此示例中的数据并非响应式数据即数据的变更并不会反应在页面结构中后续会专门讲解响应式数据选项式 APIOptions API 属于 Vue 的传统书写风格建议使用 Vue 官方推荐的组合式 APIComposition API。
