App下載

Vue很難學嗎？手把手教你寫Vue

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

Vue是什么？

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


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


Vue環(huán)境設置

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

選項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ā)或生產版本下載到本地，并使用 HTML 文件中的 script 標簽直接將其包含在內。

注意：開發(fā)版本包含控制臺警告，這些警告對于調試非常有用。而生產版本主要針對大?。ㄍㄟ^使用 vue.js 文件的縮小版本等）和速度進行了優(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>

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

瀏覽器中的當前輸出如下： 微信截圖_20201222134755


進入 Vue 實例

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

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

new Vue();

步驟 2：傳遞選項對象

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

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

new Vue({ options/config object });

步驟 3：建立與 DOM 的連接

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

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

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

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

步驟 4：指定我們的數據

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

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

步驟 5：將此數據呈現到 DOM

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

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

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

微信截圖_20201222134328


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

當然了，Vue還有更多拓展的內容，小編特地幫你挑選出來供你學習


Vue.js

1 人點贊