Vue43-单文件组件

一、脚手架的作用

单文件组件:xxx.vue,浏览器不能直接运行!!!

脚手架去调用webpack等第三方工具。

二、vue文件的命名规则

建议用下面的两种方式。(首字母大写!!!

三、vue文件的结构

对比非单文件组件, 非单文件组件的弊病:样式不能跟着组件走!

 非单文件组件的样式,要写在html标签中:

四、组件的暴露与引入 

4-1、暴露方式一:分别暴露

4-1、暴露方式二:统一暴露

4-3、暴露方式三:默认暴露(推荐)

 

一般用默认暴露,因为这样写,import引入简单:

4-4、统一暴露的简写形式:

五、App.vue汇总所有的组件

App.vue必须要有!汇总所有的组件

六、 入口文件:main.js

所有的组件都要听从vm的分配,所以要创建vm(不要写在xxx.vue文件中)

 xxx.vue文件就是组件。

vm创建在main.js文件中(main.js——入口文件)

 

main.js文件中的内容

1、el:说明服务哪个容器

2、说明组件的领头者:App。

注意:

main.js中没有容器,要专门为容器创建一个文件:index.html!!!

七、创建vue服务的容器:index.html 

或者index.html中不写<App>标签,写在main.js中:

八、运行index.html文件

报错原因:浏览器不能直接支持ES6的模块化语法:

 所以,运行的话,要用到脚手架!!!

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

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

相关文章

CDN简介

CDN 的基本概念 CDN&#xff08;Content Delivery Network&#xff09;&#xff0c;即内容分发网络。 CDN是一种分布式网络架构&#xff1a;它由分布在不同地理位置的服务器组成网络&#xff0c;这些服务器协同工作以提供内容服务。 内容分发的核心目标 确保用户能够快速、可…

?和??的用法 ---Javascript

当你在JavaScript中看到问号&#xff08;?&#xff09;和双问号&#xff08;??&#xff09;时&#xff0c;它们通常是用于条件处理和空值合并的操作符。 问号 ?&#xff1a; 在JavaScript中&#xff0c;问号? 可以用于条件运算符&#xff08;ternary operator&#xff0…

鸿蒙解决JSON字段名和对象属性名之间的对应关系

HarmonyOS 中使用三方包 class-transformer 来进行解决。 class-transformer 是一个在 JavaScript 和 TypeScript 中用于对象和类之间进行转换的库。它特别有用在处理从 API 返回的 JSON 数据和将其转换为类的实例时&#xff0c;或者在序列化类的实例为 JSON 字符串时。 clas…

Window上ubuntu子系统编译Android

Window上ubuntu子系统编译Android 1、编译环境2、WSL2编译报错2.1 You are building on a machine with 11.6GB of RAM2.2 Case-insensitive filesystems not supported3. android模拟器调试 1、编译环境 AOSP : Android源码下载安装java&#xff1a;sudo apt-get install ope…

Spring @AliasFor用法

同注解内属性互为alias AliasFor的两端必须对称使用&#xff0c;如下name和value互为alias且两端的类型、默认值必须相同,在实际使用时仅赋值一个属性即可&#xff0c;若同时设置多个属性则要求值必须都相同通过Spring AnnotationUtils工具解析注解支持AliasFor&#xff0c;直…

黄仁勋勉励Caltech毕业生:勇于开拓“零十亿”潜力市场,孕育未来科技领袖

Nvidia的创始人兼首席执行官黄仁勋在加州理工学院&#xff08;Caltech&#xff09;2024届毕业生的毕业典礼上发表主题演讲时&#xff0c;鼓励毕业生们勇于探索“零十亿市场”——即目前价值不大&#xff0c;但未来潜力巨大的新兴市场。他分享了Nvidia早期如何在遭遇市场挫折后&…

Matlab自学笔记三十一:结构数组的创建、索引和预分配内存

1.概念 结构&#xff08;structure array&#xff09;是一种具有容器特性的数据类型&#xff0c;它使用称为字段的数据容器对相关数据进行分组&#xff0c;每个字段可以包含任何类型或大小的数据&#xff0c;所有元素都具有相同数量的字段和相同的字段名称。&#xff08;与元胞…

Java锁之舞:性能分析与优化之路

目录 一、同步锁性能分析 &#xff08;一&#xff09;性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 &#xff08;二&#xff09;案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …

机器学习面试-常见题目

文章目录 一、框架问题1. 监督学习和无监督学习有什么不同&#xff1f;2. 什么是深度学习&#xff0c;它与机器学习算法之间有什么联系&#xff1f;3. 如何评估机器学习模型的有效性&#xff1f;4. 如何确保模型没有过拟合&#xff1f;5. 什么是核技巧&#xff0c;有什么用处&a…

事件传播机制 与 责任链模式

1、基本概念 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;将请求沿着处理链传递&#xff0c;直到有一个对象能够处理为止。 2、实现的模块有&#xff1a; Handler&#xff08;处理者&#xff09;&#xff1a;定义一个…

码蹄集部分题目(2024OJ赛19期;贪心集训)

1&#x1f40b;&#x1f40b;水温调节&#xff08;黄金&#xff1b;贪心&#xff09; 时间限制&#xff1a;1秒 占用内存&#xff1a;128M &#x1f41f;题目思路 贪心思路&#xff1a;先将两只水龙头的流速开到最大&#xff0c;温度高了&#xff0c;就把热水的流速降低一个…

Java:缓存行和伪共享

在Java中&#xff0c;缓存行&#xff08;Cache Line&#xff09;和伪共享&#xff08;False Sharing&#xff09;是与多线程访问共享数据相关的两个重要概念。以下是关于这两个概念的详细解释&#xff1a; 缓存行&#xff08;Cache Line&#xff09; 定义&#xff1a;缓存行是…

3.2. 马氏链-马氏链的构造及马氏性(1)

马氏链的构造及马氏性 1. 马氏链的构造本节首先构造马氏链, 即构造活动概率空间: 在序列空间中构造 P x , P μ P_x,P_\mu Px

新人学习笔记之(注释和关键字)

一、注释 1.什么是注释 (1)注释是在程序指定位置添加的说明性信息 (2)简单理解&#xff0c;就是对代码的一种解释 2.注释的分类 (1)单行注释 格式&#xff1a;// 注释信息 (2)多行注释 格式&#xff1a;/*注释信息*/ 3.注释的使用 (1)主要作用&#xff1a;增加代码的阅读性 4.注…

4_机械臂坐标系简介

一、坐标系的标准命名 为了规范起见&#xff0c;有必要给机器人和工作空间专门命名和确定专门的“标准”坐标系。 图3-27为一种典型的工况&#xff0c;机器人抓持某种工具&#xff0c;并把工具末端移动到操作者指定的位置。图3-27所示的5个坐标系就是需要命名的坐标系。这五个坐…

7z及7zip-cpp最高压缩比的免费开源压缩软件

7z介绍 7z是一种主流高效的压缩格式&#xff0c;它拥有极高的压缩比。在计算机科学中&#xff0c;7z是一种可以使用多种压缩算法进行数据压缩的档案格式。该格式最初由7-Zip实现并采用&#xff0c;但这种档案格式是公有的&#xff0c;并且7-Zip软件本身亦在GNU宽通用公共许可证…

MySQL分组聚合

where 与 having 的区别 & order by 假如我们有一张表&#xff0c;表名为 sales&#xff0c;如下所示&#xff1a; ----------------------------------------------------------------------------- | transaction_id | customer_id | product_name | price | quantit…

数据结构之B树的原理与业务场景

B树是一种自平衡的树形数据结构&#xff0c;它能够保持数据有序&#xff0c;并且可以高效地进行查找、顺序访问、插入和删除操作。B树的设计是为了优化磁盘I/O操作&#xff0c;因为它可以减少磁盘访问次数&#xff0c;这在数据库和文件系统中非常有用。 1. B树的原理 节点的出…

PCIe总线-RK3588 PCIe子系统简介(八)

1.PCIe子系统 RK3588 PCIe子系统如下图所示。总共拥有5个PCIe控制器。PCIe30X4(4L)支持RC和EP模式&#xff0c;其他4个仅支持RC模式。ITS port 1连接PCIe30X4(4L)和PCIe30X2(2L)控制器&#xff0c;PCIe30X4(4L)和PCIe30X2(2L)控制器使用PCIe3.0 PIPE PHY。ITS port 0连接PCIe3…