前言

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

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

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

到底什么是組件？

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

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

為什么你一定要使用組件

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

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

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

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

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

下面是一個簡單組件的例子：

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

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

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

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

模板部分

當使用Vue時，模板是你放置HTML代碼的地方。這一部分將決定你的組件看起來是什么樣子。

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

在上面的例子中，我們有一個非常簡單的模板，只是渲染了一個H1標簽。

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

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

腳本部分

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

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

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

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

選項API：舊的方式

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

放棄Options API的原因是它會變得非常冗長和重復，這會使你的代碼難以閱讀和維護。

順便說一下，Options API是我們在以前的例子中使用的版本。

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

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

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

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

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

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

風格部分

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

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

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

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

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

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

總結(jié)

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

最新評論