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的模块化语法:
所以,运行的话,要用到脚手架!!!
相关文章:
Vue43-单文件组件
一、脚手架的作用 单文件组件:xxx.vue,浏览器不能直接运行!!! 脚手架去调用webpack等第三方工具。 二、vue文件的命名规则 建议用下面的两种方式。(首字母大写!!!&#x…...
如何快速使用向量检索服务DashVector?
免费体验阿里云高性能向量检索服务:https://www.aliyun.com/product/ai/dashvector 本文将介绍如何快速上手使用向量检索服务DashVector。 前提条件 已创建Cluster:创建Cluster。 已获得API-KEY:API-KEY管理。 已安装最新版SDK:…...
Linux 用户和用户组 创建用户 创建组
介绍 一个组有多个用户,可以给组分配权限,那么该组的使用用户都有该组的权限,就不用一个个分配,而且很好管理。 创建用户组 groupadd 组名删除用户组 groupdel test查看用户所属组 id [用户名]修改用户组 把abc用户添加到m…...
Character Animator 2024 mac/win版:赋予角色生命,动画更传神
Character Animator 2024是一款强大的角色动画制作软件,以其创新的功能和卓越的性能,为动画师、游戏开发者以及设计师们带来了全新的创作体验。 Character Animator 2024 mac/win版获取 这款软件采用了先进的骨骼绑定技术,使得角色动画的制作…...
短剧app广告变现模式开发
短剧app搭建是一个涉及多个方面的复杂过程,下面将介绍主要的步骤和考虑因素: 明确目标和定位:在开始搭建之前,首先要明确你的目标受众是谁,以及短剧app的主要定位是什么。这有助于在后续的开发过程中更有针对性地进行…...
如何选择适合的编程语言入门?
推荐学习网站:offernow.cn 如何选择最适合自己的编程语言呢?接下来,我给大家分享一些实用的建议,希望能帮到你们。 一、明确目标和兴趣 考虑你的兴趣和未来方向是选择编程语言的首要因素。如果你对网页开发感兴趣,可以…...
Spring Boot入门教程
Spring Boot入门教程可以按照以下步骤进行,以确保清晰和有条理地学习: 1. Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,旨在简化Spring应用的初始搭建以及开发过程。它使用了特定的方式来进行配置,使开发人员不再…...
芝麻文件重命名 一键批量重命名 支持批量修改图片 文档 文件夹名称
芝麻文件重命名是一款专业的文件批量重命名软件,它提供了丰富的功能和灵活的命名规则,可以大大提高文件管理的效率。以下是关于芝麻文件重命名的详细介绍: 一、软件特点 支持批量重命名:芝麻文件重命名支持文件和文件夹的批量重命…...
docker守护进程配置代理
一:配置 Docker 守护进程使用代理 1.创建或编辑 Docker 配置文件目录 2.创建或编辑代理配置文件 3.重新加载系统守护进程并重启 Docker 4.验证代理设置 5.使用 docker pull 拉取镜像,验证代理设置 步骤 1:创建或编辑 Docker 配置文件目录 Doc…...
使用Minikube部署Kubernetes环境
使用Minikube部署Kubernetes环境 1. Minikube简介 Minikube是一个轻量级的Kubernetes实现,它在本地运行一个Kubernetes集群,可以是单节点或者集群环境,主要用于开发和测试。Minikube支持Kubernetes的所有主要功能,包括Dashboard…...
蚂蚁集团:2023年科研投入211.9亿元
6月13日,蚂蚁集团发布2023年可持续发展报告。报告显示,2023年蚂蚁集团科研投入达到211.9亿元,再创历史新高,蚂蚁科技投入的重点是人工智能和数据要素技术。 蚂蚁集团董事长兼CEO井贤栋在报告致辞中说,面向未来&#x…...
pikachu靶场之XSS漏洞测试
一、环境配置 1.pikachu官网下载 下载地址:https://github.com/zhuifengshaonianhanlu/pikachu 2.百度网盘(里面含有pikachu跟phpstudy) 链接:pikachu下载 密码:abcd 配置:pikachu下载及安装-图文详解…...
python快速入门之Flask框架
文章目录 一、pip安装二、接口开发三、测试 一、pip安装 pip install flask 二、接口开发 from flask import Flaskapp Flask(__name__)app.route("/test") def index():return "test"if __name__ __main__:app.run()三、测试 http://127.0.0.1:5000…...
【云原生| K8S系列】Kubernetes Daemonset,全面指南
Kubernetes中的DaemonSet是什么? Kubernetes是一个分布式系统,Kubernetes平台管理员应该有一些功能可以在所有节点上运行特定于平台的应用程序。例如,在所有Kubernetes节点上运行日志代理。 这就是Daemonset发挥作用的地方。 Daemonset是一个原生的K…...
【Python机器学习实战】 | 基于决策树的药物研究分类预测
🎩 欢迎来到技术探索的奇幻世界👨💻 📜 个人主页:一伦明悦-CSDN博客 ✍🏻 作者简介: C软件开发、Python机器学习爱好者 🗣️ 互动与支持:💬评论 &…...
B端系统的UI框架选择,不要输在了起跑线,如何破?
所谓成也框架、败也框架,框架就是这么的优点和缺点鲜明,市面上的框架多如牛毛,谁家的最优秀呢?为何框架搞出来的UI界面同质化呢,如何避免这种情况,如何在框架的基础上进一步提升颜值和体验呢,本…...
RabbitMQ延迟消息(通过死信交换机实现)
延迟消息:生产者发送消息时指定一个时间,消费者不会立刻收到消息,而是在指定时间后才收到消息 通过DLX和TTL模拟出延迟队列的功能,即,消息发送以后,不让消费者拿到,而是等待过期时间࿰…...
Java - 分支结构 - if…else/switch
Java 分支结构 - if…else/switch if语句语法 if...else 语句语法实例 if...else if...else 语句语法实例 嵌套的 if…else 语句语法实例 switch 语句语法实例 顺序结构只能顺序执行,不能进行判断和选择,因此需要分支结构。 Java有两种分支结构…...
web安全渗透测试十大常规项(一):web渗透测试之XML和XXE外部实体注入
#详细点: XML被设计为传输和存储数据,XML文档结构包括XML声明、DTD文档类型定义(可选)、文档元素,其焦点是数据的内容,其把数据从HTML分离,是独立于软件和硬件的信息传输工具。等同于JSON传输。XXE漏洞XML External Entity Injection,即xml外部实体注入漏洞,XXE漏洞发…...
任务3.8.2 利用RDD计算总分与平均分
实战:使用RDD 计算学生成绩的总分与平均分 项目背景 本项目旨在利用 Apache Spark 的强大数据处理能力,对存储在 HDFS 上的学生成绩文件进行处理,计算每个学生的总分和平均分。 项目目标 读取存储在 HDFS 上的成绩文件。计算每个学生的总…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...






所以,