前言

本章內(nèi)容為VUE語法的簡單學(xué)習(xí)與相關(guān)語法討論。

上一篇文章地址：

Vue 3：玩一下web前端技術(shù)（四）_Lion King的博客-CSDN博客

下一篇文章地址：

Vue 3：玩一下web前端技術(shù)（六）_Lion King的博客-CSDN博客

一、語法的簡單學(xué)習(xí)

1、導(dǎo)入模塊

在Vue中，我們可以使用不同的方式導(dǎo)入模塊。下面是幾個(gè)常見的實(shí)際例子：

（1）導(dǎo)入單個(gè)模塊并賦值給一個(gè)變量：

import moduleA from './moduleA';

在這個(gè)例子中，我們導(dǎo)入名為moduleA的模塊，并將其賦值給變量moduleA。我們可以使用moduleA訪問導(dǎo)入的模塊。

（2）導(dǎo)入多個(gè)模塊并賦值給不同的變量：

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

在這個(gè)例子中，我們從一個(gè)名為modules的文件中同時(shí)導(dǎo)入moduleA和moduleB模塊，并將它們分別賦值給變量moduleA和moduleB。我們可以使用這兩個(gè)變量訪問導(dǎo)入的模塊。

（3）導(dǎo)入整個(gè)模塊并使用其命名空間：

import * as utils from './utils';

在這個(gè)例子中，我們導(dǎo)入一個(gè)名為utils的模塊，并將其所有導(dǎo)出內(nèi)容賦值給變量utils。我們可以使用utils來訪問導(dǎo)入的模塊的所有方法和屬性。

（4）導(dǎo)入模塊并重命名：

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

在這個(gè)例子中，我們從一個(gè)名為modules的文件中導(dǎo)入moduleA，并將其重命名為myModuleA。我們可以使用myModuleA來訪問導(dǎo)入的模塊。

2、創(chuàng)建Vue應(yīng)用實(shí)例的方法

使用全局函數(shù)createApp，這也是vue-cli創(chuàng)建工程后的默認(rèn)方式。

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>

?其實(shí)，這兩個(gè)Vue文件之間的交互邏輯非常簡單。讓我來逐步解釋一下：

（1）在App.vue文件中，我們首先引入了HelloWorld.vue組件。

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

這樣做是為了能夠在App.vue中使用HelloWorld組件。這得利于我們在HelloWorld.vue的組件配置中，我們定義了一個(gè)name屬性，用于標(biāo)識組件的名稱。

name: 'HelloWorld'

（2）接下來，我們在App.vue的組件配置中注冊了HelloWorld組件。

components: {
? HelloWorld
}

這樣做是為了使HelloWorld組件在App.vue中可以被使用。

（3）在App.vue的模板中，我們使用了HelloWorld組件，并通過屬性props傳遞了一個(gè)名為"msg"的值。

<HelloWorld msg="歡迎來到我的世界！??！"/>

這里的"msg"屬性值是一個(gè)字符串類型，它將作為HelloWorld組件的"msg"屬性的值。

（4）在HelloWorld.vue文件中，我們首先定義了一個(gè)模板，其中我們使用了"msg"屬性的值。

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

這里的"msg"是通過props屬性傳遞進(jìn)來的。這得利于我們在HelloWorld.vue文件中定義了一個(gè)props屬性，類似于外部接口，用于接收其他vue文件傳過來的數(shù)值，其中包含了一個(gè)名為"msg"的屬性。這樣做是為了聲明HelloWorld組件可以接受一個(gè)名為"msg"的屬性，并且該屬性的類型是字符串。

props: {
? msg: String
}

基本上，這就是這兩個(gè)Vue組件之間的交互邏輯。通過使用props屬性，在App.vue中傳遞了一個(gè)值給HelloWorld.vue組件，并在HelloWorld.vue中使用該值。這樣，HelloWorld.vue組件就可以根據(jù)傳遞的值進(jìn)行相應(yīng)的邏輯操作和渲染。

二、相關(guān)語法討論

1、為什么import App1 from './App.vue'與import App from './App.vue' ?效果一樣？

這兩個(gè)import語句的效果相同是因?yàn)樵谶@種情況下，導(dǎo)入的是同一個(gè)模塊或文件。

在JavaScript中，使用import語句可以導(dǎo)入其他模塊（或文件）中暴露的函數(shù)、變量或組件。在這個(gè)例子中，'./App.vue'是一個(gè)Vue組件文件的相對路徑。

當(dāng)你使用import語句時(shí)，你可以給導(dǎo)入的模塊或文件起一個(gè)新的名稱，這是為了方便在你的代碼中引用它。在這里，App1和App就是起的名稱。

兩個(gè)import語句的差異在于導(dǎo)入的名稱。如果你使用import App1 from './App.vue'，那么你在后續(xù)的代碼中就可以使用App1引用這個(gè)Vue組件。同樣地，如果你使用import App from './App.vue'，你就可以使用App引用這個(gè)Vue組件。

所以，無論你使用哪個(gè)名稱，最終導(dǎo)入的是同一個(gè)Vue組件，它們的效果是一樣的。使用哪個(gè)名稱主要取決于你的個(gè)人偏好和代碼的可讀性。

2、'./App.vue'只有一個(gè)默認(rèn)名稱App，為什么導(dǎo)入App1也可以？

在這段代碼中，`App.vue`中定義了一個(gè)組件名為`App`，然后使用了`components`選項(xiàng)將另一個(gè)組件`HelloWorld`注冊為`App`組件的子組件。

在導(dǎo)入`App1`時(shí)，由于`App.vue`導(dǎo)出的是一個(gè)默認(rèn)導(dǎo)出的對象，導(dǎo)入時(shí)可以使用任何名稱，相當(dāng)于將App這個(gè)值給到變量App1了，類似于重命名的效果。所以你將`App.vue`導(dǎo)入為`App1`是完全合法的。

實(shí)際上，導(dǎo)入時(shí)的名稱并不會影響導(dǎo)入的內(nèi)容，關(guān)鍵是導(dǎo)入路徑必須正確。一般來說，我們會使用與導(dǎo)出的組件名稱相同的變量名來導(dǎo)入組件以提高代碼的可讀性。但是，隨意給導(dǎo)入的組件一個(gè)不同的變量名是沒有問題的。文章來源地址http://www.zghlxwxcb.cn/news/detail-614772.html

到了這里，關(guān)于Vue 3：玩一下web前端技術(shù)（五）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！