溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue怎么使用”文章吧。
Vue.js 是一套用于構建用戶界面的漸進式框架。
與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。
Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。
另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
很多同學可能覺得 Vue 很難學因此不敢于嘗試，接下來小編帶你了解最基礎的編寫“Hello World”，相信通過這個你就有信心去學習掌握 Vue。
由于我們需要讓一切保持簡單，為什么不適用 CDN，它基本上是由另一臺服務器導入 Vue.js 的。在目前而言為了練習、理解和學習 Vue 的基礎知識，您可以將這種簡單的設置用于非常小的項目中。
<!-- 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>
<script src="https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/dist/vue.js"></script>
您可以將 Vue.js的開發或生產版本下載到本地，并使用 HTML 文件中的 script 標簽直接將其包含在內。
注意：開發版本包含控制臺警告，這些警告對于調試非常有用。而生產版本主要針對大小（通過使用 vue.js 文件的縮小版本等）和速度進行了優化，這對于在實時環境中發布非常重要。
使用以下代碼創建一個 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">
<h2>Hello World!</h2>
</div>
</body>
</html>
代碼非常簡單基礎。我們給頁面命名為“Hello Vue”。以及<head>部分中使用帶有<script>標簽的 CDN 的 vue.js 的開發版本。我們正顯示“Hello World”<body>部分中帶有 id=“demo”的<div>元素內<h2>標簽內的消息。
我們已經使用<script>標簽將 Vue.js 導入了我們的項目，但這并不能解決問題。 這相當于在我們的工作臺上有一臺筆記本電腦。 要打開它并完成一些工作，我們必須按下電源按鈕。 同樣，要在我們的項目中使用 Vue，我們必須使用new關鍵字創建 Vue 對象的實例。 這個實例是 Vue 的電源按鈕！
new Vue();
僅創建實例只會為 Vue 供電。 但是我們想對 Vue 做更多的。 為此，我們必須將選項或配置對象作為參數傳遞給剛創建的實例。 此選項對象具有 Vue 可以識別的一些保留屬性，它們被指定為鍵值對。 顧名思義，并非所有屬性都是必需的，可以在需要時指定。 通常，它們用于存儲數據和執行某些操作。
例如：“el”，“data”，“method”等。
new Vue({ options/config object });
我們希望以某種方式獲取對我們希望操縱的一部分 HTML 代碼的控制。 在我們的示例中，它是帶有 id 和“app”的<div>元素，因此我們可以通過 Vue 顯示消息“Hello World”。
為了在 Vue 實例和 DOM 的一部分之間建立這種連接，以便可以根據我們的需要對其進行控制，我們有一個名為“el”的保留屬性，該屬性轉換為元素。 此屬性將字符串作為值指定為 CSS 選擇器，即id的“#”和“.”對于class。
new Vue({ el: "#app" });
通過此簡單的代碼行，我們現在將帶有 id 的<div>元素，“app”及其內容鏈接到 Vue 實例。 它們現在不可分割！
為了存儲我們要在此 Vue 實例及其鏈接的 DOM 中使用的所有數據/信息，我們還有一個保留的屬性，稱為“data”。 與“el”不同，“data”將對象作為其值。 由于我們要向 DOM 顯示消息“Hello World”，因此讓我們在“數據”對象中將其指定為鍵值對。
new Vue({ el: "#app", data: { message: "Hello World" } });
只需使用如下所示的兩個大括號即可將 Vue 實例的數據對象中指定的值呈現到 DOM。 （有關更多信息，請參閱下一篇文章！）
<div id="app"> <h2>{{ message }}</h2> </div>
為了區分上一個輸出（沒有 Vue），使用 Vue 來顯示，請讓我們顯示“Hello World!”而不是“Hello World!
以上就是關于“Vue怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
