当前位置: 首页 > news >正文

【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)。

相关文章:

【Vue3】选项式 API

【Vue3】选项式 API 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子。…...

2、如何发行自己的数字代币(truffle智能合约项目实战)

2、如何发行自己的数字代币&#xff08;truffle智能合约项目实战&#xff09; 1-Atom IDE插件安装2-truffle tutorialtoken3-tutorialtoken源码框架分析4-安装openzeppelin代币框架&#xff08;代币发布成功&#xff09; 1-Atom IDE插件安装 正式介绍基于web的智能合约开发 推…...

百日筑基第二十三天-23种设计模式-创建型总汇

百日筑基第二十三天-23种设计模式-创建型总汇 前言 设计模式可以说是对于七大设计原则的实现。 总体来说设计模式分为三大类&#xff1a; 创建型模式&#xff0c;共五种&#xff1a;单例模式、简单工厂模式、抽象工厂模式、建造者模式、原型模式。结构型模式&#xff0c;共…...

张量的基本使用

目录 1.张量的定义 2.张量的分类 3.张量的创建 3.1 根据已有数据创建张量 3.2 根据形状创建张量 3.3 创建指定类型的张量 1.张量的定义 张量&#xff08;Tensor&#xff09;是机器学习的基本构建模块&#xff0c;是以数字方式表示数据的形式。PyTorch就是将数据封装成张量…...

Oracle(14)什么是唯一键(Unique Key)?

唯一键&#xff08;Unique Key&#xff09;是数据库表中的一个或多个列&#xff0c;它们的值必须在整个表中唯一&#xff0c;但允许包含NULL值。唯一键的主要目的是确保表中每一行的数据在指定的列&#xff08;或列组合&#xff09;中是唯一的&#xff0c;以防止重复数据的出现…...

PostgreSQL的引号、数据类型转换和数据类型

一、单引号和双引号&#xff08;重要&#xff09;&#xff1a; 1、在mysql没啥区别 2、在pgsql中&#xff0c;实际字符串用单引号&#xff0c;双引号相当于mysql的,用来包含关键字&#xff1b; -- 单引号&#xff0c;表示user_name的字符串实际值 insert into t_user(user_nam…...

Mad MAD Sum-Codeforces Round 960 (Div. 2)

题目在这里 大意: MAD函数返回出现次数 ≥ 2 \geq2 ≥2的最大整数 b i b_i bi​ M A D ( a [ 1 , 2 , . . . i ] ) MAD(a[1,2,...i]) MAD(a[1,2,...i]) 每次操作把 a i a_i ai​进行上述操作&#xff0c;直到全变为0为止&#xff0c;对每次操作的数组进行求和&#xff0c;记…...

Flutter 插件之 package_info_plus

当使用Flutter开发应用时,通常需要获取应用程序的基本信息,例如包名、版本号和构建号。Flutter提供了一个名为 package_info_plus 的插件,它能方便地帮助我们获取这些信息。 1. 添加依赖 首先,需要在项目的 pubspec.yaml 文件中添加 package_info_plus 的依赖。打开 pubs…...

如何实现布隆过滤器?

1.布隆过滤器的场景 在Redis 缓存击穿&#xff08;失效&#xff09;、缓存穿透、缓存雪崩怎么解决&#xff1f;中我们说到可以使用布隆过滤器避免「缓存穿透」。 你会说我们只要记录了每个用户看过的历史记录&#xff0c;每次推荐的时候去查询数据库过滤存在的数据实现去重。 …...

运维团队如何高效监控容器化环境中的PID及其他关键指标

随着云计算和容器化技术的快速发展&#xff0c;越来越多的企业开始采用容器化技术来部署和管理应用程序。然而&#xff0c;容器化环境的复杂性和动态性给运维团队带来了前所未有的挑战。本文将从PID&#xff08;进程标识符&#xff09;监控入手&#xff0c;探讨运维团队如何高效…...

通过vue3 + TypeScript + uniapp + uni-ui 实现下拉刷新和加载更多的功能

效果图: 核心代码: <script lang="ts" setup>import { ref, reactive } from vue;import api from @/request/api.jsimport empty from @/component/empty.vueimport { onLoad,onShow, onPullDownRefresh, onReachBottom } from @dcloudio/uni-applet form …...

Pointnet++改进即插即用系列:全网首发WTConv2d大接受域的小波卷积|即插即用,提升特征提取模块性能

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入WTConv2d,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三 1.理…...

4核16G服务器支持多少人?4C16G服务器性能测评

租赁4核16G服务器费用&#xff0c;目前4核16G服务器10M带宽配置70元1个月、210元3个月&#xff0c;那么能如何呢&#xff1f;配置为ECS经济型e实例4核16G、按固定带宽10Mbs、100GB ESSD Entry系统盘。 那么问题来了&#xff0c;4C16G10M带宽的云服务器可以支持多少人同时在线&…...

塔子哥的平均数-美团2023笔试(codefun2000)

题目链接 塔子哥的平均数-美团2023笔试(codefun2000) 题目内容 给定一个正整数数组a1 ,a2 ,…,an&#xff0c;求平均数正好等于k的最长连续子数组的长度 输入描述 输出描述 输出一个整数&#xff0c;表示最长满足题目条件的长度。 样例1 输入 5 2 1 3 2 4 1 输出 3 样例1解释…...

故障诊断 | 基于小波包能量谱对滚动轴承的故障诊断Matlab代码

故障诊断 | 基于小波包能量谱对滚动轴承的故障诊断Matlab代码 目录 故障诊断 | 基于小波包能量谱对滚动轴承的故障诊断Matlab代码效果一览基本介绍程序设计参考资料 效果一览 基本介绍 基于小波包能量谱对滚动轴承的故障诊断 matlab代码 数据采用的是凯斯西储大学数据 首先利用…...

E14.【C语言】练习:有关短路运算

#include <stdio.h> int main() {int i 0,a0,b2,c 3,d4;i a && b && d;printf("a %d\nb %d\nc %d\nd %d\n", a, b, c, d);return 0; } 求输出结果 分析&#xff1a; a&#xff1a;先使用后 &#xff0c;a&#xff08;见第15篇http://…...

python BeautifulSoup库安装与使用(anaconda、pip)

BeautifulSoup 是一个可以从HTML或XML文件中提取数据的Python库。Beautiful Soup 已成为和 lxml、html5lib 一样出色的Python解释器&#xff0c;为用户灵活地提供不同的解析策略或强劲的速度。 Requests 获取html BeautifulSoup 解析html、xml,BeautifulSoup4库也称bs4库 安装B…...

基于Matlab的数据可视化

基于Matlab的数据可视化 一、二维图形的绘制&#xff08;一&#xff09;基本图形函数&#xff08;1&#xff09;plot函数&#xff08;2&#xff09;fplot函数&#xff08;3&#xff09;其他坐标系的二维曲线 &#xff08;二&#xff09;图形属性设置&#xff08;1&#xff09;线…...

深入理解Linux网络(二):UDP接收内核探究

深入理解Linux网络&#xff08;二&#xff09;&#xff1a;UDP接收内核探究 一、UDP 协议处理二、recvfrom 系统调⽤实现 一、UDP 协议处理 udp 协议的处理函数是 udp_rcv。 //file: net/ipv4/udp.c int udp_rcv(struct sk_buff *skb) {return __udp4_lib_rcv(skb, &udp_…...

linux内核中list的基本用法

内核链表 1 list_head 结构 为了使用链表机制&#xff0c;驱动程序需要包含<linux/types.h>头文件&#xff0c;该文件定义了如下结构体实现双向链&#xff1a; struct list_head {struct list_head *next, *prev; };2 链表的初始化 2.1 链表宏定义和初始化 可使用以…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...