vue3学习笔记-快速上手

创建第一个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.mzph.cn/pingmian/4618.shtml

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

相关文章

2024Xtu程设第一次练习题解

程设练习题谢大会专门查重 1.1531奇怪的数字 题目让我们从小到大输出1e6以内所有的答案&#xff0c;其实也没什么好的思路 就是将一个数n的所有位都拆出来&#xff0c;遍历这些位&#xff08;每次取一个x&#xff09;&#xff0c;然后通过作除法&#xff08;y n / x&#xf…

java多态知识

目录 一、定义 二、注意事项 三、多态的好处 四、多态的弊端以及解决办法 一、定义 多态定义:多态是在继承/实现情况下的一种现象&#xff0c;表现为:对象多态、行为多态。 对象多态&#xff1a;都是同一对象&#xff0c;表现出不同角色&#xff0c;比如小明&#xff0c;…

java:SpringBoot入门

Spring 提供若干子项目,每个项目用于完成特定功能 Spring Boot 可以简化配置并且快速开发 SpringBootWeb快速入门 创建Springboot模块并使用Springweb依赖 在类上添加注解 RestController可以将字符串自动转成json返回数据给页面 再在方法上添加注解 RequestMapping(&…

python应用-socket网络编程(2)

socket 是 Python 标准库中的一个模块&#xff0c;它提供了低级别的网络通信接口。使用 socket 模块&#xff0c;你可以创建客户端和服务器应用程序&#xff0c;以便在网络上进行数据交换。 接着上文我们介绍下socket模块其他的一些函数。 目录 gettimeout() 和settimeout()…

0422empAJAX项目

数据库字段&#xff1a; 多条件查询&#xff1b; 分页查询&#xff1b; 添加图片&#xff1b; ajax离职操作&#xff1b; 删除选项&#xff0c;点击离职操作后仍然可实现删除选项

项目部署总结

1、安装jdk 第一步&#xff1a;上传jdk压缩安装包到服务器 第二步&#xff1a;将压缩安装包解压 tar -xvf jdk-8uXXX-linux-x64.tar.gz 第三步&#xff1a;配置环境变量 编辑/etc/profile文件&#xff0c;在文件末尾添加以下内容&#xff1a; export JAVA_HOME/path/to/j…

鉴权到底做什么

两种方案&#xff1a; 将 token 放在 cookie 里&#xff1b;将 token 放在请求头里&#xff0c;用 Authorization 字段。 无论对于前端还是后端而言&#xff0c;这两种方案都是各有利弊的&#xff0c;下面稍微讲几点&#xff0c;实际开发中根据需求来选用即可。 将 token 放在…

进程控制5 - exit()退出+子进程被收养+僵死进程

我们应当知道的是&#xff0c;在用fork创建子进程后&#xff0c;父子进程的执行的先后顺序是不定的&#xff0c;这时&#xff0c;我们可以用wait函数&#xff0c;wait()会暂停当前进程的执行&#xff0c;直到有信号到来或者子进程结束。总的来说&#xff0c;wait()的作用就是阻…

C语言编译的优化等级应该选哪个?O0、O1、O2还是O3

在使用IDE开发STM32程序时&#xff0c;IDE一般都会提供优化等级设置的选项&#xff0c;例如下图中KEIL软件优化等级的设置。 从上图中也可以看出&#xff0c;设置不同的优化等级&#xff0c;实际上是修改了编译器的编译参数。这个编译器是由ARM公司提供的C/C编译器armclang或者…

微信小程序Vue+nodejs+uniapp课堂教学辅助在线学习系统

uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 后台主要实现功能&#xff1a;一、用户的管理(用户的信息管理) 二、 课程的管理&#xff08;课程发布&#xff0c;课后成绩的查看&#xff0c…

DAY 5

1. 2. #include <iostream>using namespace std; class Person {string name;int *age;public:Person():name("zhangsan"),age(new int (18)){cout << "Person的无参函数" << endl;}Person(string name,int *age):name("zhangsan&q…

水稻病害检测(YOLO数据集,多分类,稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫)

是自己利用LabelImg工具进行手工标注&#xff0c;数据集制作不易&#xff0c;请尊重版权&#xff08;稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫&#xff09; 如果需要yolv8检测模型和数据集放在一起的压缩包&#xff0c;可以关注&#xff1a;最新最…

聊聊Flink:Docker搭建Flink

一、准备工作 查看下Docker和Docker Compose版本&#xff0c;确保你安装了这些软件。 在 Flink 官网上下载 Flink 的 Docker 镜像。您可以使用以下命令从 Docker Hub 中下载&#xff1a; docker pull flink:1.18.0-scala_2.12 此命令将下载 Flink 1.18.0 版本的 Docker 镜像…

电商架构:系统设计+表设计

如有不对&#xff0c;请指正 欢迎评论区交流 需要哪些系统 商品系统、订单系统、权限系统、审核系统等。 商品系统 订单系统 审核系统 权限系统 参考 基于电商中台架构-商品系统设计(一) 附件

2024年【流动式起重机司机】报名考试及流动式起重机司机复审模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【流动式起重机司机】报名考试及流动式起重机司机复审模拟考试&#xff0c;包含流动式起重机司机报名考试答案和解析及流动式起重机司机复审模拟考试练习。安全生产模拟考试一点通结合国家流动式起重机司机考试…

电脑已经有了一个Windows10,再多装一个Windows10组成双系统

前言 前段时间已经讲过一次双Windows系统的安装教程&#xff0c;但是小白重新去看了一下&#xff0c;发现写的内容太多&#xff0c;怕小伙伴看了之后一脸萌。 所以今天咱们就重新再来讲讲&#xff1a;在同一台机器上安装Windows10双系统的教程。 注意哦&#xff01;这里的Wi…

Android优化RecyclerView图片展示:Glide成堆加载批量Bitmap在RecyclerView成片绘制Canvas,Kotlin(b)

Android优化RecyclerView图片展示&#xff1a;Glide成堆加载批量Bitmap在RecyclerView成片绘制Canvas&#xff0c;Kotlin&#xff08;b&#xff09; 对 Android GridLayoutManager Glide批量加载Bitmap绘制Canvas画在RecyclerView&#xff0c;Kotlin&#xff08;a&#xff09;-…

【GitHub】主页简历优化

【github主页】优化简历 写在最前面一、新建秘密仓库二、插件卡片配置1、仓库状态统计2、Most used languages&#xff08;GitHub 常用语言统计&#xff09;使用细则 3、Visitor Badge&#xff08;GitHub 访客徽章&#xff09;4、社交统计5、打字特效6、省略展示小猫 &#x1f…

求解约瑟夫问题

思路&#xff1a; 我们要创建两个指针 有一个指针pcur指向头结点&#xff0c;该pcur作为报数的指针&#xff0c;还有一个指针ptail指向尾结点&#xff0c;作为记录pcur的地址 每报数为m时&#xff0c;pcur指向下一个元素的地址&#xff0c;ptail销毁报数为m的地址&#xff0…

制糖工业智能工厂数字孪生可视化平台,推进制糖产业数字化转型

制糖工业智能工厂数字孪生可视化平台&#xff0c;推进制糖产业数字化转型。随着信息技术的快速发展&#xff0c;数字化转型已成为各行各业的重要趋势。在糖果加工制造领域&#xff0c;智能工厂数字孪生可视化平台的出现&#xff0c;为行业数字化转型注入了新的活力。 糖果加工制…