1 使用 Vue.js 的 Hello World · JavaBeginnersTutorial 中文系列教程

# 1 使用 Vue.js 的 Hello World > 原文： [https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/](https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/) 嗨，搖滾明星（音樂不包括在內）！激動地進入 Vue.js 世界？那我們還等什么呢？ *好消息*：入門 Vue 很簡單。今天讓我們保持**目標**非常簡單。遵循古老的傳統，讓我們旨在使用 Vue 在我們的網頁上顯示消息“`Hello World`”。 ## 環境設置由于我們已決定使一切保持簡單，因此為什么不使用 **CDN**，它基本上是從另一臺服務器導入 Vue.js 的。在本教程系列的后面，我們將使用 Vue CLI 和 Webpack 進行更復雜的設置來捆綁所有文件。但是就目前而言，為了練習，理解和學習 Vue 的基礎知識，CDN 會做。是的，您也可以將這種簡單的設置用于非常小的項目。 ### 選項 1： ```js  <script src="https://cdn.jsdelivr.net/npm/[[email?protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>  <script src="https://cdn.jsdelivr.net/npm/[[email?protected]](/cdn-cgi/l/email-protection)"></script> ``` ### 選項 2： Vue 也可用于 unpkg， ```js <script src="https://unpkg.com/[[email?protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script> ``` 在撰寫本文時，最新的版本是 2.5.16。建議在 URL 中包含特定的版本號。您可以手動將版本編輯為使用中的最新版本。但是，如果您不想提及該版本并使用最新版本，請繼續， ```js <script src="https://cdn.jsdelivr.net/npm/[[email?protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script>  <script src="https://unpkg.com/vue/dist/vue.js"></script> ``` ### 選項 3：您可以[將 Vue.js 的開發或生產版本](https://vuejs.org/v2/guide/installation.html)下載到本地，并使用 HTML 文件中的`script`標簽直接將其包含在內。 **注意**：開發版本包含控制臺警告，這些警告對于調試非常有用。而生產版本主要針對大小（通過使用 vue.js 文件的縮小版本等）和速度進行了優化，這對于在實時環境中發布非常重要。 ## 初始代碼我使用 Visual Studio Code 作為 IDE。您可以使用 Sublime Text，WebStorm，Atom，Notepad ++或您選擇的任何其他 IDE。 **我的建議？** 請選擇 [**JS Fiddle**](https://jsfiddle.net/) 標簽。這僅僅是錦上添花。最好的部分是，您可以在一個屏幕上查看 HTML，CSS，JS 和輸出。與必須每次刷新一次以反映更改的瀏覽器不同，JS 小提琴會檢測到更改并在“結果”窗格中自動呈現輸出。使用以下代碼創建一個 HTML 文件“`index.html`”， ```js <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <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 的開發版本。我們正在顯示“`Hello World!`” `<body>`部分中帶有`id=”app`的`<div>`元素內`<h1>`標簽內的消息。 Chrome 瀏覽器中的當前輸出如下， ![Initial code set up](https://img.kancloud.cn/57/d4/57d443e3480af504d0f379b3471dc76c_873x343.png) 到目前為止和我在一起？好的，我聽到您說我們已經渲染了“`Hello World!`”帶有`<h1>`標簽，但這與我們使用 Vue.js 進行顯示的最初目標不矛盾嗎？ **好問題。** ## 讓我們現在回答 ### 步驟 1：創建新的 Vue 實例我們已經使用`<script>`標簽將 Vue.js 導入了我們的項目，但這并不能解決問題。這相當于在我們的工作臺上有一臺筆記本電腦。要打開它并完成一些工作，我們必須按下電源按鈕。同樣，要在我們的項目中使用 Vue，我們必須使用`new`關鍵字創建 Vue 對象的實例。這個實例是 Vue 的電源按鈕！ ```jsscript new Vue(); ``` ### 步驟 2：傳遞選項對象僅創建實例只會為 Vue 供電。但是我們想對 Vue 做更多的。為此，我們必須將選項或配置對象作為參數傳遞給剛創建的實例。此選項對象具有 Vue 可以識別的一些保留屬性，它們被指定為**鍵值對**。顧名思義，并非所有屬性都是必需的，可以在需要時指定。通常，它們用于存儲數據和執行某些操作。 **例如**：“`el`”，“`data`”，“`method`”等。 ```jsscript new Vue({ options/config object }); ``` ### 步驟 3：建立與 DOM 的連接我們希望以某種方式獲取對我們希望操縱的一部分 HTML 代碼的控制。在我們的示例中，它是帶有`id`和“`app`”的`<div>`元素，因此我們可以通過 Vue 顯示消息“Hello World”。為了在 Vue 實例和 DOM 的一部分之間建立這種連接，以便可以根據我們的需要對其進行控制，我們有一個名為“`el`”的保留屬性，該屬性轉換為*元素*。此屬性將字符串作為值指定為 CSS 選擇器，即`id`的“`#`”和“`.`”對于`class`。 ```jsscript new Vue({ el: "#app" }); ``` 通過此簡單的代碼行，我們現在將帶有`id`的`<div>`元素，“`app`”及其內容鏈接到 Vue 實例。它們現在*不可分割*！ ### 步驟 4：指定我們的數據為了存儲我們要在此 Vue 實例及其鏈接的 DOM 中使用的所有數據/信息，我們還有一個保留的屬性，稱為“`data`”。與“`el`”不同，“`data`”將對象作為其值。由于我們要向 DOM 顯示消息“`Hello World`”，因此讓我們在“數據”對象中將其指定為鍵值對。 ```jsscript new Vue({ el: "#app", data: { message: "Hello World" } }); ``` ### 步驟 5：將此數據呈現到 DOM 只需使用如下所示的兩個大括號即可將 Vue 實例的數據對象中指定的值呈現到 DOM。（有關更多信息，請參閱下一篇文章！） ```html <div id="app"> <h1>{{ message }}</h1> </div> ``` 為了區分上一個輸出（沒有 Vue），使用 Vue 來顯示，請讓我們顯示“`Hello World!`”而不是“`Hello World!`”。 ![Vue.js output](https://img.kancloud.cn/78/da/78dac9138bad0021e4e80fa86448c8b9_983x480.png) 好極了！因此，我們創建了第一個 Vue 應用。 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs/tree/master/01_Hello%20World%20with%20Vuejs)中提供了本文討論的所有代碼。祝你有美好的一天！