App下載

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

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

Vue是什么？

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


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


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

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

選項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>

選項2：

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

選項3：

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

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


初始代碼

使用以下代碼創(chuàng)建一個 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>

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

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


進(jìn)入 Vue 實例

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

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

new Vue();

步驟 2：傳遞選項對象

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

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

new Vue({ options/config object });

步驟 3：建立與 DOM 的連接

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

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

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

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

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

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

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

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

只需使用如下所示的兩個大括號即可將 Vue 實例的數(shù)據(jù)對象中指定的值呈現(xiàn)到 DOM。 （有關(guān)更多信息，請參閱下一篇文章?。?/p>

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

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

微信截圖_20201222134328


看吧，Vue是不是很簡單？這么容易就完成了一個實例

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


Vue.js

1 人點贊