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;这些服务器协同工作以提供内容服务。 内容分发的核心目标 确保用户能够快速、可…

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…

4_机械臂坐标系简介

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

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

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

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…

RIP路由附加度量值(华为)

#交换设备 RIP路由附加度量值 RIP&#xff08;Routing Information Protocol&#xff09;路由协议中的附加度量值是指在RIP路由原来度量值的基础上所增加的额外度量值&#xff0c;通常以跳数来表示。这个附加度量值可以是正值&#xff0c;也可以是负值&#xff0c;用于影响路…

关于STM32上用HID HOST调鼠标数据的解析

一、前言 关于这章主要是基于我前面的那篇文章 链接: 关于怎么用Cubemx生成的USBHID设备实现读取一体的鼠标键盘设备&#xff08;改进版&#xff09; https://blog.csdn.net/qq_29187987/article/details/139535648?spm1001.2014.3001.5501 引用的文章的简介 引用的这篇文…

数据库概述1

数据&#xff1a;描述事物的符号记录称为数据&#xff1b; 包括数字、图片、音频等&#xff1b; 数据库&#xff1a;长期储存在计算机内有组织、可共享的大量数据的集合&#xff1b;数据库中的数据按照一定的数据模型组织、描述和存储&#xff0c;具有较小的数据冗余、较高的数…

STM32学习笔记(一)--时钟树详解

&#xff08;1&#xff09;时钟概述&#xff1b;时钟是具有周期性的脉冲信号&#xff0c;最常用的是占空比50%的方波。&#xff08;时钟相当于单片机的脉搏&#xff1b;STM32本身非常复杂&#xff0c;外设非常的多&#xff0c;为了保持低功耗工作&#xff0c;STM32 的主控默认不…

【Python】深入了解 AdaBoost:自适应提升算法

我们都找到天使了 说好了 心事不能偷藏着 什么都 一起做 幸福得 没话说 把坏脾气变成了好沟通 我们都找到天使了 约好了 负责对方的快乐 阳光下 的山坡 你素描 的以后 怎么抄袭我脑袋 想的 &#x1f3b5; 薛凯琪《找到天使了》 在机器学习的领域中&#x…

算法工程师 | 如何快速 了解,掌握一个算法!脚踏实地,迎着星辰,向前出发 ~

本文是一些碎碎念 希望对正在迈向 算法工程师道路的你 有所裨益 一般来说&#xff0c;代码 中会有很多 算法实现的细节&#xff0c;但论文可能并没有体现&#xff0c;所以能够尝试自己 仔细阅读论文&#xff0c;手动复现代码&#xff0c;基本上来说对 这个 算法 你有了全…

夏季城市环境卫生挑战多:TSINGSEE青犀智慧环卫方案助力城市垃圾站智能管理

一、背景分析 夏季&#xff0c;随着气温的攀升&#xff0c;城市垃圾的数量和种类也随之增加&#xff0c;这给环卫工作带来了极大的挑战。环卫垃圾站点作为城市垃圾处理的重要一环&#xff0c;其管理效率直接关系到城市环境的整洁与卫生。近年来&#xff0c;随着视频监控技术的…

【Redis】Redis常见问题——缓存更新/内存淘汰机制/缓存一致性

目录 回顾数据库的问题如何提高 mysql 能承担的并发量&#xff1f;缓存解决方案应对的场景 缓存更新问题定期生成如何定期统计定期生成的优缺点 实时生成maxmemory 设置成多少合适呢&#xff1f;项目类型上来说 新的问题 内存淘汰策略Redis淘汰策略为什么redis要内存淘汰内存淘…

ESP32 IDF ADF 加入音频

需要把mp3制作成音频bin 用ADF自带工具 果用户需要生成自己的 audio-esp.bin&#xff0c;则需要执行 mk_audio_bin.py 脚本&#xff08;位于 $ADF_PATH/tools/audio_tone/mk_audio_tone.py&#xff09;&#xff0c;并且指定相关文件的路径。 源 MP3 文件在 tone_mp3_folder …

红黑树(C++)

文章目录 写在前面1. 红黑树的概念及性质1. 1 红黑树的概念1. 2 红黑树的性质 2. 红黑树节点的定义3. 红黑树的插入3.1 按照二叉搜索的树规则插入新节点3.2 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏 4.红黑树的删除5.红黑树的验证6.源码 写在前面 在上篇文章中&…

5.3.1_2 二叉树的层次遍历

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

c++模板模式

文章目录 模板模式什么是模板模式为什么使用模板模式模板模式实现步骤 示例模板模式优缺点 模板模式 什么是模板模式 模板模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法骨架&#xff0c;将某些步骤的具体实现延…