vue3学习笔记-快速上手

news2024/10/5 21:25:53

创建第一个vue3的应用

之前看书学习vue,书籍对应的版本是vue2,今天群里看小伙伴聊天,觉得他们说得对 ,反正是从零开始学,而且vue2都不维护了,那为什么不直接学习vue3呢,于是乎,又开启了从0学vue3之路。

参考教程:https://cn.vuejs.org/guide/quick-start.html

安装nodejs环境之后,执行 npm create vue@latest 命令就可以初始化一个vue3的项目:

600442a7575f1057ff16d8faefbb78e8.jpeg

因为很多功能后面都需要学,所以一开始初始化项目的时候,可以选择否。

了解组合式API和选项式API的区别

4c21405df28f4739d889e97eb4af06f2.jpeg

通过 CDN 使用 Vue 时,无法使用单文件组件 (SFC) 语法,这句话怎么理解?

09cd2f4f282013a18ad2ae83d49b0b21.jpeg

通过 CDN 使用 Vue:这意味着你可以直接在 HTML 页面中通过 <script> 标签引入 Vue.js 的 CDN 链接,而不需要通过 npm 或 yarn 等包管理工具安装 Vue.js。这种方式简单快捷,适合于快速原型开发或小型项目。

Vue.js 的单文件组件是一种特殊的文件格式,它允许你将模板、JavaScript 逻辑和样式都写在一个 .vue 文件中。这种格式需要构建工具来处理,因为它们需要被编译成浏览器可以理解的格式。由于通过 CDN 使用 Vue.js 不涉及构建步骤,因此你不能直接使用 .vue 文件。相反,你需要将 Vue 组件的逻辑、模板和样式分开编写,并直接在浏览器中通过 <script>、<style> 和 HTML 直接编写模板

使用 ES 模块构建版本

<script type="module">的含义

4862ecf943fcedfd6571aadcf5c91d88.jpeg

发现将圈中的位置改成其他命名,页面也可以正常访问:

661ff0730d32eab257b5696e22200e68.jpeg

如果你也对vue的学习感兴趣,那就快来加入一起学习交流吧

e954fed0aa727e522b987d6c392c9c20.png

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

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

相关文章

Linux之进程间通信(二)

system V system V共享内存是内核中专门设计的通信的方式, 粗粒度划分操作系统分为进程管理, 内存管理, 文件系统, 驱动管理.., 粒度更细地分还有 进程间通信模块. 对于操作系统, 通信的场景有很多, 有以传送数据, 快速传送数据, 传送特定数据块, 进程间协同与控制以目的, 它…

一键设置jdk环境脚本

自动化脚本 一、使用方法 创建一个txt文本&#xff0c;放在和jdk存放的同一目录下&#xff0c;复制粘贴进我的代码&#xff0c;利用全局替换&#xff0c;将jdk1.8,改成你自己的jdk包名字&#xff0c;再重新把这个文件保存为.vbs文件。然后运行就行了 MsgBox "Runing s…

线上社交app的搭建,圈子社交系统,小程序+app+H5三端,源码交付,支持二开!

在科技飞速发展的大背景下&#xff0c;年轻人社交不再局限于面对面&#xff0c;线上社交app已深入各大年轻人的手机中。相比于传统交友方式&#xff0c;线上社交app为用户提供了更加新奇的交友体验。同时&#xff0c;它还可以吸引更多的朋友&#xff0c;提高用户的整体交友体验…

第4篇:创建Nios II工程之Hello_World<三>

Q&#xff1a;接着我们再来完成Nios II软件工程设计部分。 A&#xff1a;从Quartus Tools选择Nios II Software Build Tools for Eclipse&#xff0c;打开Nios II SBT软件&#xff0c;Workspace指定到hello_world工程的software文件夹路径&#xff1b;再从File-->New-->…

Java学习13

目录 一.内部类: 1.概念&#xff1a; 2.内部类的分类&#xff1a; &#xff08;1&#xff09;定义在外部类的局部位置上&#xff08;通常在方法体中&#xff09;&#xff1a; 1. 局部内部类&#xff08;有类名&#xff09; 2.匿名内部类&#xff08;无类名-重点&#xff01;…

Linux 基础命令使用创建用户

浏览网站的时候图片&#xff0c;看到一个小练习。创建用户分别位于不同的用户组。 解答下面的题目 2、建立用户使用 useradd&#xff0c;设置密码使用passwd的命令。大概不会使用命令可以借助man来解答。 先建立用户组&#xff1a; groupadd group1 # group1 不存在先建立&…

Redis底层数据结构之ZSkipList

目录 一、概述二、ZSkipList结构三、和平衡树和哈希表的对比 redis底层数据结构已完结&#x1f44f;&#x1f44f;&#x1f44f;&#xff1a; ☑️redis底层数据结构之SDS☑️redis底层数据结构之ziplist☑️redis底层数据结构之quicklist☑️redis底层数据结构之Dict☑️redis…

可替代IBM DOORS的现代化需求管理解决方案Jama Connect,支持数据迁移及重构、实时可追溯性、简化合规流程

作为一家快速发展的全球性公司&#xff0c;dSPACE一直致力于寻找保持领先和优化开发流程的方法。为推进其全球现代化计划&#xff0c;dSPACE开始寻找可以取代传统需求管理平台&#xff08;IBM DOORS&#xff09;的需求管理解决方案。 通过本次案例&#xff0c;您将了解dSPACE为…

【YOLO 系列】基于YOLO V8的火灾烟雾监控检测识别系统【python源码+Pyqt5界面+数据集+训练代码】

摘要&#xff1a; 火灾烟雾的及时检测对于人们的生命财产安全至关重要。然而&#xff0c;在大多数情况下&#xff0c;火灾往往在被发现时已经进展到了难以控制的阶段&#xff0c;这导致了严重的后果。为了解决这一问题&#xff0c;我们提出了基于深度学习技术的火灾烟雾检测系…

前端开发攻略---介绍HTML中的<dialog>标签,浏览器的原生弹框。

1、演示 2、介绍 <dialog> 标签用于定义对话框&#xff0c;即一个独立的窗口&#xff0c;通常用来显示对话框、提示框、确认框等弹出式内容。在对话框中&#xff0c;可以包含文本、表单元素、按钮等内容&#xff0c;用户可以和这些内容进行交互。 3、兼容性 4、示例代码 …

03-MVC执行流程-参数解析与Model

重要组件 准备Model&#xff0c;Controller Configuration public class WebConfig {ControllerAdvicestatic class MyControllerAdvice {ModelAttribute("b")public String bar() {return "bar";}}Controllerstatic class Controller1 {ResponseStatus(H…

现代永磁同步电机控制原理pdf及全套matlab仿真模型

现代永磁同步电机控制原理pdf及matlab仿真模型。全书包含SVPWM, DTC, Lun, smo, EKF, HFI等经典控制算法。将书中10章节涉及到的模型复原搭建模型。 模型获取链接&#xff1a;现代永磁同步电机控制原理pdf及全套matlab仿真模型

电商API数据采集接口||大数据的发展,带动电子商务产业链,促进了社会的进步

最近几年计算机技术在诸多领域得到了有效的应用&#xff0c;同时在多方面深刻影响着我国经济水平的发展。除此之外&#xff0c;人民群众的日常生活水平也受大数据技术的影响。 主流电商API数据采集接口||在这其中电子商务领域也在大数据技术的支持下&#xff0c;得到了明显的进…

windows环境下DVWA靶场搭建

目录 一&#xff0c;安装PHPstudy 二&#xff0c;DVWA靶场上传 一&#xff0c;安装PHPstudy 具体安装步骤&#xff0c;请看上篇文章https://blog.csdn.net/m0_72210904/article/details/138258609?spm1001.2014.3001.5501 二&#xff0c;DVWA靶场上传 压缩包&#xff1a;&…

计算机混合运算(计算器)

学习贺利坚老师,计算机混合运算, 做出处理混合运算 数据结构例程——表达式求值&#xff08;用栈结构&#xff09;_用栈表达式求值-CSDN博客文章浏览阅读1.5w次&#xff0c;点赞14次&#xff0c;收藏61次。本文针对数据结构基础系列网络课程(3)&#xff1a;栈和队列中第5课时栈…

工业异常检测

工业异常检测在业界和学界都一直是热门&#xff0c;近期其更是迎来了全新突破&#xff1a;与大模型相结合&#xff01;让异常检测变得更快更准更简单&#xff01; 比如模型AnomalyGPT&#xff0c;它克服了以往的局限&#xff0c;能够让大模型充分理解工业场景图像&#xff0c;判…

与 Apolo 共创生态:Apolo 7周年大会我的启示与心得分享

文章目录 前言一、Apolo加速企业自动驾驶解决方案落地二、应用X企业预制套件&#xff1a;启示与心得三、Studio X企业协同工具链&#xff1a;共创心得分享 前言 本篇文章我将围绕Apolo 7周年来给大家分享我所学习到的内容和一些心得。 Apolo 7周年活动链接&#xff1a;https:…

2024年【陕西省安全员C证】报名考试及陕西省安全员C证考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年陕西省安全员C证报名考试为正在备考陕西省安全员C证操作证的学员准备的理论考试专题&#xff0c;每个月更新的陕西省安全员C证考试资料祝您顺利通过陕西省安全员C证考试。 1、【多选题】下列做法正确的有&#…

模块化兼容性

模块化兼容性 由于webpack同时支持CommonJS和ES6 module&#xff0c;因此需要理解它们互操作时webpack是如何处理的 同模块化标准 如果导出和导入使用的是同一种模块化标准&#xff0c;打包后的效果和之前学习的模块化没有任何差异 不同模块化标准 不同的模块化标准&#x…

Vue入门到关门之计算属性与监听属性

一、计算属性 1、什么是计算属性 计算属性是基于其它属性计算得出的属性&#xff0c;就像Python中的property&#xff0c;可以把方法/函数伪装成属性&#xff0c;在模板中可以像普通属性一样使用&#xff0c;但它们是基于响应式依赖进行缓存的。这意味着只有在依赖的响应式数…