Vue怎么使用

發(fā)布時(shí)間：2022-02-24 15:58:03 來(lái)源：億速云閱讀：148 作者：iii 欄目：開發(fā)技術(shù)

這篇“Vue怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue怎么使用”文章吧。

Vue是什么？

Vue.js 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。
另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)。

很多同學(xué)可能覺得 Vue 很難學(xué)因此不敢于嘗試，接下來(lái)小編帶你了解最基礎(chǔ)的編寫“Hello World”，相信通過(guò)這個(gè)你就有信心去學(xué)習(xí)掌握 Vue。

Vue環(huán)境設(shè)置

由于我們需要讓一切保持簡(jiǎn)單，為什么不適用 CDN，它基本上是由另一臺(tái)服務(wù)器導(dǎo)入 Vue.js 的。在目前而言為了練習(xí)、理解和學(xué)習(xí) Vue 的基礎(chǔ)知識(shí)，您可以將這種簡(jiǎn)單的設(shè)置用于非常小的項(xiàng)目中。

選項(xiàng)1：

選項(xiàng)2：

選項(xiàng)3：

您可以將 Vue.js的開發(fā)或生產(chǎn)版本下載到本地，并使用 HTML 文件中的 script 標(biāo)簽直接將其包含在內(nèi)。

注意：開發(fā)版本包含控制臺(tái)警告，這些警告對(duì)于調(diào)試非常有用。而生產(chǎn)版本主要針對(duì)大?。ㄍㄟ^(guò)使用 vue.js 文件的縮小版本等）和速度進(jìn)行了優(yōu)化，這對(duì)于在實(shí)時(shí)環(huán)境中發(fā)布非常重要。

初始代碼

使用以下代碼創(chuàng)建一個(gè) HTML 文件

<!DOCTYPE html>

<html>

<head>

<title>Hello Vue!</title>

</head>

<body>

<h2>Hello World!</h2>

</div>

</body>

</html>

代碼非常簡(jiǎn)單基礎(chǔ)。我們給頁(yè)面命名為“Hello Vue”。以及<head>部分中使用帶有<script>標(biāo)簽的 CDN 的 vue.js 的開發(fā)版本。我們正顯示“Hello World”<body>部分中帶有 id=“demo”的<div>元素內(nèi)<h2>標(biāo)簽內(nèi)的消息。

進(jìn)入 Vue 實(shí)例

步驟 1：創(chuàng)建新的 Vue 實(shí)例

我們已經(jīng)使用<script>標(biāo)簽將 Vue.js 導(dǎo)入了我們的項(xiàng)目，但這并不能解決問題。這相當(dāng)于在我們的工作臺(tái)上有一臺(tái)筆記本電腦。要打開它并完成一些工作，我們必須按下電源按鈕。同樣，要在我們的項(xiàng)目中使用 Vue，我們必須使用new關(guān)鍵字創(chuàng)建 Vue 對(duì)象的實(shí)例。這個(gè)實(shí)例是 Vue 的電源按鈕！

new Vue();

步驟 2：傳遞選項(xiàng)對(duì)象

僅創(chuàng)建實(shí)例只會(huì)為 Vue 供電。但是我們想對(duì) Vue 做更多的。為此，我們必須將選項(xiàng)或配置對(duì)象作為參數(shù)傳遞給剛創(chuàng)建的實(shí)例。此選項(xiàng)對(duì)象具有 Vue 可以識(shí)別的一些保留屬性，它們被指定為鍵值對(duì)。顧名思義，并非所有屬性都是必需的，可以在需要時(shí)指定。通常，它們用于存儲(chǔ)數(shù)據(jù)和執(zhí)行某些操作。

例如：“el”，“data”，“method”等。

new Vue({ options/config object });

步驟 3：建立與 DOM 的連接

我們希望以某種方式獲取對(duì)我們希望操縱的一部分 HTML 代碼的控制。在我們的示例中，它是帶有 id 和“app”的<div>元素，因此我們可以通過(guò) Vue 顯示消息“Hello World”。

為了在 Vue 實(shí)例和 DOM 的一部分之間建立這種連接，以便可以根據(jù)我們的需要對(duì)其進(jìn)行控制，我們有一個(gè)名為“el”的保留屬性，該屬性轉(zhuǎn)換為元素。此屬性將字符串作為值指定為 CSS 選擇器，即id的“#”和“.”對(duì)于class。

new Vue({ el: "#app" });

通過(guò)此簡(jiǎn)單的代碼行，我們現(xiàn)在將帶有 id 的<div>元素，“app”及其內(nèi)容鏈接到 Vue 實(shí)例。它們現(xiàn)在不可分割！

步驟 4：指定我們的數(shù)據(jù)

為了存儲(chǔ)我們要在此 Vue 實(shí)例及其鏈接的 DOM 中使用的所有數(shù)據(jù)/信息，我們還有一個(gè)保留的屬性，稱為“data”。與“el”不同，“data”將對(duì)象作為其值。由于我們要向 DOM 顯示消息“Hello World”，因此讓我們?cè)凇皵?shù)據(jù)”對(duì)象中將其指定為鍵值對(duì)。

new Vue({ el: "#app", data: { message: "Hello World" } });

步驟 5：將此數(shù)據(jù)呈現(xiàn)到 DOM

只需使用如下所示的兩個(gè)大括號(hào)即可將 Vue 實(shí)例的數(shù)據(jù)對(duì)象中指定的值呈現(xiàn)到 DOM。（有關(guān)更多信息，請(qǐng)參閱下一篇文章！）

<div id="app"> <h2>{{ message }}</h2> </div>

為了區(qū)分上一個(gè)輸出（沒有 Vue），使用 Vue 來(lái)顯示，請(qǐng)讓我們顯示“Hello World!”而不是“Hello World!

以上就是關(guān)于“Vue怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)