【Vue3】选项式 API

【Vue3】选项式 API

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍如何使用选项式 API 编写 Vue3 组件。

选项式 API(Options API)是 Vue 组件的一种传统书写风格,另一种风格是组合式 API(Composition API)。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.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)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

thinkphp6连接kingbase数据库

在/vendor/topthink/think-orm/src/db/connector中将Pgsql.php和pgsql.sql文件复制后改名为Kingbase.php和Kingbase.sql Kingbase.php <?php // ---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK ] // …

MySQL中EXPLAIN关键字详解

昨天领导突然问到&#xff0c;MySQL中explain获取到的type字段中index和ref的区别是什么。 这两种状态都是在使用索引后产生的&#xff0c;但具体区别却了解不多&#xff0c;只知道ref相比于index效率更高。 因此&#xff0c;本文较为详细地记录了MySQL性能中返回字段的含义、状…

使用Excel表格还是JSON数据来将数据存入Neo4的选择要素

在选择使用Excel表格还是JSON数据来将数据存入Neo4j时&#xff0c;需要考虑多个因素&#xff0c;包括数据的复杂性、规模、已有的数据处理工具以及你的个人或团队的熟悉度。以下是对两者的一些比较&#xff0c;帮助你做出选择&#xff1a; Excel表格 优点&#xff1a; 直观性…

Oracle(13)什么是外键(Foreign Key)?

外键&#xff08;Foreign Key&#xff09;是一个数据库表中的列或一组列&#xff0c;它们用于建立和强化两个表之间的链接和关系。外键指向另一个表的主键&#xff0c;用于确保数据的一致性和完整性。通过外键&#xff0c;可以保证一个表中的值必须来源于另一个表中的主键值。 …

【web】-反序列化-to_string

<?php highlight_file(__FILE__); class A{public $s;public function __destruct(){echo "hello".$this->s;}} class B{public $cmd;public function __toString(){system($this->cmd);return 1;} } unserialize($_GET[code]); __toString()当对象被当着…

探索特征的隐秘关系:在Scikit-Learn中进行特征交互性分析

探索特征的隐秘关系&#xff1a;在Scikit-Learn中进行特征交互性分析 在机器学习模型中&#xff0c;特征交互性分析是一种揭示特征之间相互作用对模型输出影响的技术。Scikit-Learn&#xff08;简称sklearn&#xff09;&#xff0c;作为Python中广泛使用的机器学习库&#xff…

【Linux服务器Java环境搭建】013 springboot + vue 前后端分离项目详细介绍(理论)

系列文章目录 【Linux服务器Java环境搭建】_一起来学吧的博客-CSDN博客 前言 在之前系列文章Linux服务器Java环境搭建 中&#xff0c;已经在CentOS中将所有环境及所需组件都安装完成了&#xff0c;比如git、jdk、nodejs、maven、mysql、clickhouse、redis、Nginx、rabbitMQ等…

《梦醒蝶飞:释放Excel函数与公式的力量》17.1使用命名范围和工作表函数

第17章&#xff1a;使用命名范围和工作表函数 17.1 命名范围的优势 在Excel中&#xff0c;使用命名范围是一个强大且灵活的功能&#xff0c;它可以极大地提高工作效率和公式的可读性。命名范围不仅使公式更容易理解&#xff0c;还减少了错误的可能性。以下将详细介绍命名范围的…

C++ STL equal_range 用法

一&#xff1a;功能 用于查找元素&#xff0c;它返回了 lower_bound, upper_bound 这两个函数查找结果值。 1. lower_bound 是返回第一个大于等于查找元素的位置。 2. upper_bound 是返回第一个大于查找元素的位置 二&#xff1a;用法 #include <vector> #include &l…

C++案例三:猜数字游戏

文章目录 介绍代码说明设置随机种子生成随机数猜测循环完整代码运行效果介绍 猜数字游戏是一个经典的编程练习,通过这个案例可以学习到基本的输入输出、随机数生成、条件判断和循环结构。 代码说明 设置随机种子 std::srand(static_cast<unsigned int>(std::time(nu…

自然语言大模型介绍

1 简介 最近一直被大语言模型刷屏。本文是周末技术分享会的提纲&#xff0c;总结了一些自然语言模型相关的重要技术&#xff0c;以及各个主流公司的研究方向和进展&#xff0c;和大家共同学习。 2 Transformer 目前的大模型基本都是Transformer及其变种。本部分将介绍Transf…

24暑假算法刷题 | Day18 | LeetCode 530. 二叉搜索树的最小绝对差,501. 二叉搜索树中的众数,236. 二叉树的最近公共祖先

目录 530. 二叉搜索树的最小绝对差题目描述题解 501. 二叉搜索树中的众数题目描述题解 236. 二叉树的最近公共祖先题目描述题解 530. 二叉搜索树的最小绝对差 点此跳转题目链接 题目描述 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差…

Python 更换 pip 源详细指南

目录 前言pip 国内源临时换源方法一&#xff1a;添加参数方法二&#xff1a;设置环境变量 永久换源方法三&#xff1a;修改配置方法四&#xff1a;pip 命令修改 总结 前言 在我们使用 Python 3 时&#xff0c;pip 是一个不可或缺的工具&#xff0c;它用于安装和管理第三方库。…

在虚拟机 CentOS7 环境下安装 MySQL5.7 数据库

配置目标 在虚拟机的 Linux CentOS7 环境下安装 MySQL5.7 版数据库&#xff0c;并能从宿主机 Windows 系统连接该数据库&#xff08;默认端口&#xff1a;3306&#xff09;。 1. 准备工作 WMware 虚拟机&#xff1a;VMware Workstation 16 ProCentOS7 镜像&#xff1a;CentO…

ubuntu 上安装软件

1.ubuntu 上安装火狐 在Ubuntu上安装Mozilla Firefox&#xff08;火狐浏览器&#xff09;通常很简单&#xff0c;你可以通过Ubuntu的软件包管理器来完成安装。以下是安装步骤&#xff1a; 打开终端&#xff08;Terminal&#xff09;。 更新你的软件包列表&#xff0c;以确保你…

基于密钥的身份验证(Linux-Linux)

A主机&#xff1a; 1、生成密钥对 [rootservera ~]# ssh-keygen查看公钥 注&#xff1a;id_rsa为私钥&#xff08;证书&#xff09;&#xff0c;id_rsa.pub为公钥 2、注册公钥到服务器 [rootservera ~]# ssh-copy-id root172.25.250.106 查看.ssh 3、使用密钥连接服务器 #…

域名解析中断

在当今数字化的时代&#xff0c;网络已经成为我们生活和工作中不可或缺的一部分。然而&#xff0c;当域名解析中断时&#xff0c;整个网络世界仿佛瞬间陷入了混乱&#xff0c;给个人和企业带来诸多不便和损失。 域名解析&#xff0c;简单来说&#xff0c;就是将我们在浏览器中…

【yolov8】3、yolov8 环境安装 【GPU版】

pycharm下载安装 yolov8 环境安装 【GPU版】 1、要求1.1 什么是 CUDA 和 CUDNN1.2 查看cuda版本的3种方法&#xff08;版本在10.2以上的可以忽略本章节&#xff09;&#xff1a;1.3 没有找到NIVDIA图标&#xff0c;确认是否有英伟达显卡 2、pycharm下载安装进入官网 3、yolov8…

【Android】视图与常用控件总结

文章目录 一、视图基础1.1 设置视图的宽高1.2 设置视图的间距1.3 设置视图的对齐方式1.4 总结 二、控件2.1 TextView2.1.1 设置宽高2.1.2 设置内容2.1.3 设置大小2.1.4 设置颜色 2.2 Button2.3 EditText2.4 ImageView2.5 ProgressBar2.6 AlertDialog2.7 ProgressDialog 本文主要…

JAVASE进阶day14(网络编程续TCP,日志)

TCP 三次握手 四次挥手 package com.lu.day14.tcp;import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.Socket;public class Client {public static void main(String[] args) {try(Socket socket new Socket("192.…