Vue 3:玩一下web前端技术(五)

前言

本章内容为VUE语法的简单学习与相关语法讨论。

上一篇文章地址:

Vue 3:玩一下web前端技术(四)_Lion King的博客-CSDN博客

下一篇文章地址:

Vue 3:玩一下web前端技术(六)_Lion King的博客-CSDN博客

一、语法的简单学习

1、导入模块

在Vue中,我们可以使用不同的方式导入模块。下面是几个常见的实际例子:

(1)导入单个模块并赋值给一个变量:

import moduleA from './moduleA';


在这个例子中,我们导入名为moduleA的模块,并将其赋值给变量moduleA。我们可以使用moduleA访问导入的模块。

(2)导入多个模块并赋值给不同的变量:

import { moduleA, moduleB } from './modules';


在这个例子中,我们从一个名为modules的文件中同时导入moduleA和moduleB模块,并将它们分别赋值给变量moduleA和moduleB。我们可以使用这两个变量访问导入的模块。

(3)导入整个模块并使用其命名空间:

import * as utils from './utils';


在这个例子中,我们导入一个名为utils的模块,并将其所有导出内容赋值给变量utils。我们可以使用utils来访问导入的模块的所有方法和属性。

(4)导入模块并重命名:

import { moduleA as myModuleA } from './modules';


在这个例子中,我们从一个名为modules的文件中导入moduleA,并将其重命名为myModuleA。我们可以使用myModuleA来访问导入的模块。

2、创建Vue应用实例的方法

使用全局函数createApp,这也是vue-cli创建工程后的默认方式。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3、vue文件的编写方式

就三部分:html、js、css

4、以App.vue与HelloWorld.vue为例,看VUE文件之间的交互方式

App.vue改写如下:

<template>
  <HelloWorld msg="欢迎来到我的世界!!!"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>

</style>

HelloWorld.vue改写如下:

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style>

</style>

 其实,这两个Vue文件之间的交互逻辑非常简单。让我来逐步解释一下:

(1)在App.vue文件中,我们首先引入了HelloWorld.vue组件。

import HelloWorld from './components/HelloWorld.vue'

这样做是为了能够在App.vue中使用HelloWorld组件。这得利于我们在HelloWorld.vue的组件配置中,我们定义了一个name属性,用于标识组件的名称。

name: 'HelloWorld'

(2)接下来,我们在App.vue的组件配置中注册了HelloWorld组件。

components: {
  HelloWorld
}

这样做是为了使HelloWorld组件在App.vue中可以被使用。

(3)在App.vue的模板中,我们使用了HelloWorld组件,并通过属性props传递了一个名为"msg"的值。

<HelloWorld msg="欢迎来到我的世界!!!"/>

这里的"msg"属性值是一个字符串类型,它将作为HelloWorld组件的"msg"属性的值。

(4)在HelloWorld.vue文件中,我们首先定义了一个模板,其中我们使用了"msg"属性的值。

<h1>{{ msg }}</h1>

这里的"msg"是通过props属性传递进来的。这得利于我们在HelloWorld.vue文件中定义了一个props属性,类似于外部接口,用于接收其他vue文件传过来的数值,其中包含了一个名为"msg"的属性。这样做是为了声明HelloWorld组件可以接受一个名为"msg"的属性,并且该属性的类型是字符串。

props: {
  msg: String
}

基本上,这就是这两个Vue组件之间的交互逻辑。通过使用props属性,在App.vue中传递了一个值给HelloWorld.vue组件,并在HelloWorld.vue中使用该值。这样,HelloWorld.vue组件就可以根据传递的值进行相应的逻辑操作和渲染。

二、相关语法讨论

1、为什么import App1 from './App.vue'与import App from './App.vue'  效果一样?

这两个import语句的效果相同是因为在这种情况下,导入的是同一个模块或文件。

在JavaScript中,使用import语句可以导入其他模块(或文件)中暴露的函数、变量或组件。在这个例子中,'./App.vue'是一个Vue组件文件的相对路径。

当你使用import语句时,你可以给导入的模块或文件起一个新的名称,这是为了方便在你的代码中引用它。在这里,App1和App就是起的名称。

两个import语句的差异在于导入的名称。如果你使用import App1 from './App.vue',那么你在后续的代码中就可以使用App1引用这个Vue组件。同样地,如果你使用import App from './App.vue',你就可以使用App引用这个Vue组件。

所以,无论你使用哪个名称,最终导入的是同一个Vue组件,它们的效果是一样的。使用哪个名称主要取决于你的个人偏好和代码的可读性。

2、'./App.vue'只有一个默认名称App,为什么导入App1也可以?

在这段代码中,`App.vue`中定义了一个组件名为`App`,然后使用了`components`选项将另一个组件`HelloWorld`注册为`App`组件的子组件。

在导入`App1`时,由于`App.vue`导出的是一个默认导出的对象,导入时可以使用任何名称,相当于将App这个值给到变量App1了,类似于重命名的效果。所以你将`App.vue`导入为`App1`是完全合法的。

实际上,导入时的名称并不会影响导入的内容,关键是导入路径必须正确。一般来说,我们会使用与导出的组件名称相同的变量名来导入组件以提高代码的可读性。但是,随意给导入的组件一个不同的变量名是没有问题的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

复习之linux存储的基本管理

一、实验环境的设定 1. 实验环境的搭建 本节内容只需要一台虚拟机 westosa reset重置虚拟机&#xff0c;保证实验环境的纯净配置网络实现ssh连接 重置虚拟机后&#xff0c;配置网络&#xff0c;设定ip&#xff1a;172.25.254.100&#xff0c;保证与主机可以通信 实现ssh连接…

chatgpt 接口使用(一)

使用api实现功能 参考链接&#xff1a;https://platform.openai.com/examples 安装库&#xff1a; pip3 install openai 例如&#xff1a; import os import openaiopenai.api_key os.getenv("OPENAI_API_KEY") response openai.ChatCompletion.create(model&q…

配置tomcat内存大小(windows、linux)

一、参数说明 -Xms&#xff1a; JVM初始分配的堆内存 -Xmx&#xff1a; JVM最大允许分配的堆内存&#xff0c;按需分配 -XX:PermSize&#xff1a; JVM初始分配的非堆内存 -XX:MaxPermSize&#xff1a; JVM最…

QT服务器练习

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//给服务器指针实例化空间server new QTcpServer(this); }Widget::~Widget() {delete ui; }//启动服务器按钮对…

阿里云域名备案

最好的爱情&#xff0c;不是因为我们彼此需要在一起&#xff0c;而是因为我们彼此想要在一起。 阿里云的域名如何备案&#xff0c;域名备案和ICP备案一样吗&#xff1f;&#xff1f; 截至我所掌握的知识&#xff08;2021年9月&#xff09;&#xff0c;阿里云的域名备案和ICP备案…

什么是嵌入式软件开发?

嵌入式软件一般是在交叉的开发环境下进行的&#xff0c;这样的运行环境能够让软件开发过程中更加稳定、可靠和安全&#xff0c;在很大程度上提升了软件开发的质量和效率&#xff0c;同时也使得软件开发的难度和程度大大降低。 嵌入式软件的交叉开发环境&#xff0c;反映了用于…

Spire.Office for.NET Crack

Spire.Office for.NET Crack Spire.Office for.NET是E-iceblue提供的企业级Office.NET API的组合。它包括Spire.Doc、Spire.XLS、Spire.Seadsheet、Spire.Presentation、Spire_PDF、Spire.DataExport、SpireOfficeViewer、Spire-PDFViewer、Spire.DocViewer、Spire.Barcode和Sp…

windows版docker部署springcloud项目

材料&#xff1a; 1.windows版docker环境&#xff08;其他版教程可能道理一样但是比如文件后坠名上可能有差异&#xff09; 2.运行好的数据库容器&#xff08;实现教程&#xff09; 3.所有jar包 实现&#xff1a; 最后整好的文件夹结构图&#xff08;原工程文件机密&#xf…

【Git】git reset 版本回退 git rm

前言 在日常开发时&#xff0c;我们经常会需要撤销之前的一些修改内容或者回退到之前的某一个版本&#xff0c;这时候reset命令就派上用场了 git reset 用法1——所有文件回退到某个版本 1、使用git reflog查看要回退的commit对象 2、使用git reset [-- hard/soft /mixed] …

【Linux后端服务器开发】IP协议

目录 一、IP协议概述 二、协议头格式 三、网段划分 四、IP地址的数量限制 五、路由 六、分片和组装 一、IP协议概述 主机&#xff1a;配有IP地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;即配有IP地址&#xff0c;又能进行路由控制 节点&#xff1a;主…

application.yml 或 application.properties 配置文件乱码问题

一、idea写application.yml配置文件&#xff0c; 用到了中文注释&#xff0c;写的时候好好地&#xff0c;但是运行项目后&#xff0c;出现乱码情况&#xff0c;如下&#xff1a; 二、解决方法 将文件编码方式 设置成UTF-8即可 File-Setting-Editor-File Encodings 再次运行项…

【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

使用React Hooks后&#xff0c;你很快就会发现&#xff0c;代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks&#xff0c; 可以将组件分成多个函数、管理状态和副作用&#xff0c;并且不必声明类即…

FreeRTOS源码分析-7 消息队列

目录 1 消息队列的概念和作用 2 应用 2.1功能需求 2.2接口函数API 2.3 功能实现 3 消息队列源码分析 3.1消息队列控制块 3.2消息队列创建 3.3消息队列删除 3.4消息队列在任务中发送 3.5消息队列在中断中发送 3.6消息队列在任务中接收 3.7消息队列在中断中接收 1 消…

导出文件下载进度条简单实现

前言 今天要跟大家分享的是一个导出数据进度条的简单实现&#xff0c;适用场景用在数据量大、组织数据耗时的情况下的简单实现。 一、设计思路 1、导出数据生成文件上传到OSS&#xff0c; 2、导出数据状态存redis缓存&#xff0c; 3、前端发导出请求后&#xff0c;返回的文件k…

动态sql以及常用的标签

什么是动态sql&#xff1a; 指根据不同的条件生成不同的sql 搭建环境&#xff1a; 建表&#xff1a; create table blog( id varchar(50) not null comment 博客id, title varchar(100) not null comment 博客标题, author varchar(30) not null comment 博客作者, create_ti…

第三章 ref与reactive

ref ref 变为响应式数据shallowRef 浅层响应式数据&#xff08;响应式到 .value为止&#xff09;isRef 判断是否为ref响应式数据triggerRef 强制触发依赖更新customRef 自定义ref函数 <template><div class"App">{{ stu }}<button click"chang…

国际化警告Fall back to translate ‘creator‘ key with ‘zn‘ locale.

发现是自己粗心写错了一个单词 这个需要改成zh messages里面也是zh:zh

忘记安卓图案/密码锁如何解锁?

如何解锁Android手机图案锁&#xff1f;如何删除忘记的密码&#xff1f;Android 手机锁定后如何重置&#xff1f;这是许多智能手机用户在网上提出的几个问题。为了回答这些问题&#xff0c;我们想出了一些简单有效的方法来解锁任何设备而不丢失数据。 忘记手机密码可能会令人恐…

大数据技术之ClickHouse---入门篇---介绍

星光下的赶路人star的个人主页 一棵树长到它想长到的高度之后&#xff0c;它才知道怎样的空气适合它 文章目录 1、Clickhouse入门1.1 什么是Clickhouse1.1.1 Clickhouse的特点1.1.1.1 列示储存1.1.1.2 DBMS的功能1.1.1.3 多样化引擎1.1.1.4 高吞吐写入能力1.1.1.5 数据分区与线…

机器学习:自动编码器Auto-encoder

Self-supervised Learning Framework 不用标注数据就能学习的任务&#xff0c;比如Bert之类的。但最早的方法是Auto-encoder。 Outline Auto-encoder encoder输出的向量&#xff0c;被decoder还原的图片&#xff0c;让输出的图片与输入的图片越接近越好。 将原始的高维向量变…
最新文章