App下載

Vue很難學(xué)嗎？手把手教你寫(xiě)Vue

猿友 2020-12-22 16:12:57 瀏覽數(shù) (7987)
反饋

Vue是什么？

Vue.js 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(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é)可能覺(jué)得 Vue 很難學(xué)因此不敢于嘗試，接下來(lái)小編帶你了解最基礎(chǔ)的編寫(xiě)“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：

<!-- development version -->

<script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>

<!-- production version -->

<script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)"></script>

選項(xiàng)2：

<script src="https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>

選項(xiàng)3：

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

注意：開(kā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>

    <!-- including Vue with development version CDN -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  </head>

  <body>

    <div id="app">

      <h1>Hello World!</h1>

    </div>

  </body>

</html>

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

瀏覽器中的當(dāng)前輸出如下： 微信截圖_20201222134755


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

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

我們已經(jīng)使用<script>標(biāo)簽將 Vue.js 導(dǎo)入了我們的項(xiàng)目，但這并不能解決問(wèn)題。 這相當(dāng)于在我們的工作臺(tái)上有一臺(tái)筆記本電腦。 要打開(kā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)參閱下一篇文章?。?/p>

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

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

微信截圖_20201222134328


看吧，Vue是不是很簡(jiǎn)單？這么容易就完成了一個(gè)實(shí)例

當(dāng)然了，Vue還有更多拓展的內(nèi)容，小編特地幫你挑選出來(lái)供你學(xué)習(xí)


Vue.js

1 人點(diǎn)贊