前言

Vue.js是一個(gè)漸進(jìn)式框架，旨在以一種非常簡(jiǎn)單、直接的方式構(gòu)建用戶(hù)界面。它被設(shè)計(jì)成易于使用，并且足夠靈活，可以處理各種各樣的應(yīng)用。

在本教程中，我們將向你展示如何用Vue.js創(chuàng)建一個(gè)簡(jiǎn)單的組件。我們還將介紹一些在使用組件時(shí)需要知道的基本概念。

我們將介紹在Vue中創(chuàng)建一個(gè)組件的基本語(yǔ)法，以及一些關(guān)于組件用途的理論。在這篇文章的最后，你應(yīng)該對(duì)Vue.js的基礎(chǔ)知識(shí)有一個(gè)扎實(shí)的了解。

到底什么是組件？

在一個(gè)傳統(tǒng)的Web應(yīng)用程序中，你有很多HTML模板在服務(wù)器上渲染。每個(gè)模板負(fù)責(zé)頁(yè)面的一個(gè)特定部分，如頁(yè)眉、頁(yè)腳或內(nèi)容區(qū)。

使用Vue.js，每一塊UI都是一個(gè)單獨(dú)的組件。這使得你的代碼更加模塊化，更容易推理。它也使得在你的應(yīng)用程序的其他部分重復(fù)使用組件變得更加容易。

為什么你一定要使用組件

組件是保持你的代碼有條理的一個(gè)好方法。它們還可以使你的應(yīng)用程序的其他部分更容易重復(fù)使用代碼。

使用組件的另一個(gè)好處是，它們可以幫助你減少你要寫(xiě)的代碼量。例如，如果你有一個(gè)你想在你的網(wǎng)絡(luò)應(yīng)用程序的每一頁(yè)上使用的頁(yè)眉和頁(yè)腳，你可以創(chuàng)建一個(gè)頁(yè)眉 和頁(yè)腳 組件。然后，你所要做的就是在你所有的其他模板中包含這些文件。

在Vue中創(chuàng)建一個(gè)組件

現(xiàn)在我們已經(jīng)了解了什么是組件，以及為什么你應(yīng)該使用它們，讓我們來(lái)看看如何在Vue中實(shí)際創(chuàng)建一個(gè)組件。

有了這個(gè)框架，這個(gè)過(guò)程實(shí)際上是非常容易的。如果你使用Vue CLI，你需要做的就是創(chuàng)建一個(gè).vue文件，并把它分成三個(gè)部分，組成這個(gè)框架的組件：模板、腳本和樣式。

下面是一個(gè)簡(jiǎn)單組件的例子：

<template>
  <h1>Hello, {{name}}</h1>
</template>

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

這個(gè)例子將渲染一個(gè)H1，里面有一個(gè)變量 "name"。但它究竟是如何工作的呢？讓我們來(lái)看看這些部分分別做什么。

模板部分

當(dāng)使用Vue時(shí)，模板是你放置HTML代碼的地方。這一部分將決定你的組件看起來(lái)是什么樣子。

<template>
  <h1>Hello, {{name}}</h1>
</template>

在上面的例子中，我們有一個(gè)非常簡(jiǎn)單的模板，只是渲染了一個(gè)H1標(biāo)簽。

通過(guò)選擇使用Vue，我們的HTML可以使用一些工具，如單向和雙向綁定，這使我們能夠以更直接的方式與我們的JavaScript代碼溝通應(yīng)用程序的這一面，與vanilla JS應(yīng)用程序相比。

這就是我們看到的 "小胡子 "語(yǔ)法：H1將渲染存儲(chǔ)在我們JavaScript代碼中的數(shù)據(jù)。這將我們引向...

腳本部分

腳本部分是你要放置你的JavaScript代碼的地方。這是你的代碼的一部分，它將允許你控制你的組件的行為方式：

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
</script>

在我們的例子中，我們有一個(gè)非常簡(jiǎn)單的腳本，只是定義了一個(gè)數(shù)據(jù)對(duì)象。這個(gè)數(shù)據(jù)對(duì)象將在我們的模板中使用，并且可以以許多不同的方式與我們的HTML相結(jié)合。

截至目前，Vue.js正沉浸在一個(gè)相當(dāng)巨大的轉(zhuǎn)型中，這實(shí)際上意味著我們有兩種完全不同的方式來(lái)用Vue.js編寫(xiě)我們的JavaScript代碼。讓我們來(lái)簡(jiǎn)單看看它們各自的情況。

選項(xiàng)API：舊的方式

Options API是Vue.js過(guò)去處理組件的方式。它在V2和V3中仍然被支持，但它不再是推薦的方式了。然而，很多生產(chǎn)應(yīng)用仍然在使用這種語(yǔ)法，所以學(xué)習(xí)如何使用它仍然是一個(gè)好主意。

放棄Options API的原因是它會(huì)變得非常冗長(zhǎng)和重復(fù)，這會(huì)使你的代碼難以閱讀和維護(hù)。

順便說(shuō)一下，Options API是我們?cè)谝郧暗睦又惺褂玫陌姹尽?/p>

正如你所看到的，Options API是相當(dāng)啰嗦的。你必須以一種非常特殊的方式來(lái)構(gòu)造你的組件，以便它們能夠工作。這可能很快就會(huì)讓人不知所措，特別是當(dāng)你在一個(gè)有大量數(shù)據(jù)的大項(xiàng)目上工作時(shí)。

合成API：現(xiàn)在和未來(lái)

為了簡(jiǎn)化我們編寫(xiě)組件的方式，Vue團(tuán)隊(duì)想出了Composition API。這是一種新的編寫(xiě)組件的方式，更加靈活和容易理解。讓我們來(lái)看看我們?nèi)绾问褂肅omposition API重寫(xiě)我們之前的例子。

<script setup>
import {ref} from 'vue';

const name = ref('John');
</script>

乍一看，我們用Composition API編寫(xiě)腳本代碼的方式比Options版本更類(lèi)似于vanilla JS。我們可以用let和const來(lái)聲明我們的變量，盡管我們確實(shí)需要使用一個(gè)叫做ref的工具，它與React的useState非常相似。

風(fēng)格部分

樣式部分是你將放置你的CSS代碼的地方。這一部分將決定你的組件看起來(lái)如何。

這里你可以看到一個(gè)非常簡(jiǎn)單的樣式部分，它只是對(duì)我們的H1標(biāo)簽應(yīng)用了一些基本的樣式。

<style>
  h1 {
    color: red;
  }
</style>

需要注意的是，在Vue中，除非你使用 "范圍 "裝飾器，否則你的樣式會(huì)應(yīng)用到每一個(gè)組件。

正如你所看到的，在Vue中創(chuàng)建一個(gè)組件的過(guò)程是非常簡(jiǎn)單的。你所需要做的就是創(chuàng)建一個(gè).vue文件，并把它分成三個(gè)部分：模板、腳本和樣式。

這就是它的全部?jī)?nèi)容!通過(guò)遵循這些簡(jiǎn)單的步驟，你應(yīng)該不難用Vue創(chuàng)建你自己的自定義組件

總結(jié)

到此這篇關(guān)于用Vue.js創(chuàng)建一個(gè)組件的文章就介紹到這了,更多相關(guān)Vue.js創(chuàng)建組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論