使用vue.js 2.0框架啟動並運行-js教程-PHP中文網

首頁

web前端

js教程

使用vue.js 2.0框架啟動並運行

Jennifer Aniston

Feb 14, 2025 am 10:16 AM

Getting up and Running with the Vue.js 2.0 Framework

想從零開始學習 Vue.js？ SitePoint Premium 提供涵蓋基礎知識、項目、技巧和工具以及更多內容的完整 Vue 書籍合集。立即加入，每月只需 14.99 美元。

本文已更新，主要更新了工具部分。

自從流行的 JavaScript 框架 Vue.js 發布 v2 版本後，我就迫不及待地想嘗試一下，看看它用起來是什麼感覺。作為對 Angular 和 React 非常熟悉的人，我期待著看看它們之間以及 Vue 之間的異同。

Vue 2 擁有出色的性能指標，相對較小的負載（捆綁的Vue 運行時版本在縮小和gzip 壓縮後重約30KB），以及對配套庫（如vue-router 和Vuex，Vue 的狀態管理庫）的更新。僅在一篇文章中涵蓋所有內容實在太多了，但請關注後續文章，我們將更仔細地研究與核心框架完美結合的各種庫。

關鍵要點

Vue.js 2.0 引入了受 React 啟發的虛擬 DOM，用於高效渲染，並集成了改進的庫，如 vue-router 和 Vuex，用於狀態管理。
組件是 Vue.js 2.0 的基礎，其中應用程序被構建為一系列嵌套組件，並推薦使用單文件組件（.vue）以更好地組織代碼。
從頭開始設置 Vue 項目需要使用 webpack 和 vue-loader 來處理 .vue 文件，以及 Babel 來使用現代 JavaScript 功能，從而增強開發工作流程。
Vue Devtools 對於調試至關重要，它可以深入了解應用程序的狀態以及數據在組件中的流動。
Vue.js 2.0 通過利用 v-model 進行雙向數據綁定以及使用 v-on 進行自定義事件處理來促進交互式表單的構建，從而使組件之間的狀態管理無縫銜接。
本文演示了構建一個 GitHub 用戶統計數據獲取應用程序，它使用 Vue 的反應式系統和生命週期鉤子來有效地管理和顯示數據，說明了 Vue.js 在實際場景中的實際用法。

其他庫的靈感

在學習本教程的過程中，您會看到 Vue 擁有許多明顯受到其他框架啟發的功能。這是一件好事；看到新的框架借鑒其他庫的一些想法並改進它們，真是太好了。特別是，您會看到 Vue 的模板非常接近 Angular 的模板，但其組件和組件生命週期方法更接近 React 的（以及 Angular 的）。

一個這樣的例子是，與 React 和當今 JavaScript 領域幾乎所有框架一樣，Vue 使用虛擬 DOM 的概念來保持渲染效率。 Vue 使用 snabbdom 的一個分支，這是更流行的虛擬 DOM 庫之一。 Vue 網站包含關於其虛擬DOM 渲染的文檔，但作為用戶，您只需要知道Vue 非常擅長保持渲染速度（實際上，在許多情況下，它的性能優於React），這意味著您可以放心，您正在構建一個可靠的平台。

組件，組件，組件

與當今的其他框架一樣，Vue 的核心構建塊是組件。您的應用程序應該是一系列組件，這些組件相互構建以生成最終的應用程序。 Vue.js 更進一步，建議（儘管沒有強制）您在一個 .vue 文件中定義組件，然後構建工具（我們很快就會介紹）可以解析這些文件。鑑於本文的目的是全面探索 Vue 及其使用感受，我將為此應用程序使用此約定。

Vue 文件如下所示：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

或者，如果您不喜歡將組件的所有部分都放在一個文件中，您可以為每個元素提供一個 src 屬性，並分別指向單獨的 HTML、JS 或 CSS 文件。

設置項目

雖然優秀的 Vue CLI 可以輕鬆設置完整的項目，但在開始使用新庫時，我喜歡從頭開始，以便更多地了解這些工具。

如今，webpack 是我首選的構建工具，我們可以將其與 vue-loader 插件結合使用，以支持我之前提到的 Vue.js 組件格式。我們還需要 Babel 和 env 預設，以便我們可以使用現代 JavaScript 語法編寫所有代碼，以及 webpack-dev-server，它會在檢測到文件更改時更新瀏覽器。

讓我們初始化一個項目並安裝依賴項：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

然後創建初始文件夾和文件：

mkdir src
touch webpack.config.js src/index.html src/index.js

項目結構應如下所示：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

現在讓我們設置 webpack 配置。這歸結為以下幾點：

告訴 webpack 對任何 .vue 文件使用 vue-loader
告訴 webpack 對任何 .js 文件使用 Babel 和 env 預設
告訴 webpack 使用 src/index.html 作為模板生成一個 HTML 文件供 dev-server 提供服務：

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

最後，我們將向 HTML 文件添加一些內容，然後我們就可以開始了！

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

我們創建了一個 ID 為 app 的空 div，因為這是我們將放置 Vue 應用程序的元素。我總是更喜歡使用 div，而不是 body 元素，因為這讓我可以控制頁面的其餘部分。

編寫我們的第一個 Vue.js 應用程序

我們將忠於以往的每個編程教程，編寫一個 Vue 應用程序，在深入研究更複雜的內容之前，先將“Hello, World！”放到屏幕上。

每個 Vue 應用程序都是通過導入庫然後實例化一個新的 Vue 實例來創建的：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

我們為 Vue 提供一個要渲染到頁面上的元素，這樣我們就創建了一個 Vue 應用程序！我們傳遞一個選擇器，用於選擇我們希望 Vue 用我們的應用程序替換的元素。這意味著當 Vue 運行時，它將獲取我們創建的 div#app 並將其替換為我們的應用程序。

我們使用變量名 vm 的原因是因為它代表“視圖模型”。雖然與“模型視圖視圖模型”（MVVM）模式沒有嚴格關聯，但 Vue 部分受到它的啟發，並且使用變量名 vm 來表示 Vue 應用程序的約定一直沿用至今。當然，您可以隨意命名變量！

到目前為止，我們的應用程序什麼也沒做，所以讓我們創建我們的第一個組件 App.vue，它實際上會將某些內容渲染到頁面上。

Vue 沒有規定應用程序的結構，所以這取決於您。我最終為每個組件創建了一個文件夾，在本例中為 App（我喜歡大寫字母，表示一個組件），其中包含三個文件：

index.vue
script.js
style.css

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

文件結構現在應該如下所示：

mkdir src
touch webpack.config.js src/index.html src/index.js

App/index.vue 定義了模板，然後導入其他文件。這符合 Vue 文檔中“關於關注點分離”部分中推薦的結構。

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

我喜歡將其命名為 index.vue，但您可能也希望將其命名為 app.vue，以便更容易搜索。我更喜歡在我的代碼中導入 App/index.vue 而不是 App/app.vue，但同樣，您可能不同意，因此請隨意選擇您和您的團隊最喜歡的任何名稱。

目前，我們的模板只是

Hello, World!

，我將 CSS 文件留空。主要工作是在 script.js 中進行，它如下所示：

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

這樣做會創建一個組件，我們將為其命名為 App，主要用於調試目的，我稍後會介紹，然後定義該組件擁有並負責的數據。目前，我們沒有任何數據，因此我們可以通過返回一個空對象來告訴 Vue 這點。稍後，我們將看到一個使用數據的組件示例。

現在我們可以回到 src/index.js 並告訴 Vue 實例渲染我們的 App 組件：

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

首先，我們導入組件，相信 webpack 和 vue-loader 會負責解析它。然後我們聲明組件。這是一個重要的步驟：默認情況下，Vue 組件不是全局可用的。每個組件都必須有一個它們將要使用的所有組件的列表，以及它將被映射到的標籤。在本例中，因為我們像這樣註冊我們的組件：

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

這意味著在我們的模板中，我們將能夠使用 app 元素來引用我們的組件。

最後，我們定義 render 函數。此函數使用一個助手（通常稱為 h）調用，該助手能夠創建元素。它與 React 使用的 React.createElement 函數不太相似。在本例中，我們為其提供字符串 'app'，因為我們要渲染的組件註冊為具有標籤 app。

大多數情況下（以及在本教程的其餘部分），我們不會在其他組件上使用 render 函數，因為我們將定義 HTML 模板。但是，如果您想了解更多信息，則值得閱讀 Vue.js 關於 render 函數的指南。

完成之後，最後一步是在 package.json 中創建一個 npm 腳本：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

現在，運行 npm run start。您的默認瀏覽器應該在 https://www.php.cn/link/03b0db8c971432a5e8d163897176a7cc 打開，您應該在屏幕上看到“Hello, World！”。

嘗試編輯 src/index.vue 將消息更改為其他內容。如果一切順利，webpack-dev-server 應該刷新頁面以反映您的更改。

太好了！我們正在使用 Vue.js 運行。

Vue Devtools

在我們深入研究一個稍微複雜一點的 Vue 應用程序之前，現在是時候提到您絕對應該安裝 Vue devtools 了。這些位於 Chrome 開發者工具中，為您提供了一種查看應用程序以及所有傳遞的屬性、每個組件擁有的狀態等等的好方法。

Getting up and Running with the Vue.js 2.0 Framework

構建應用程序

作為一個示例應用程序，我們將使用 GitHub API 來構建一個應用程序，讓我們輸入用戶名並查看該用戶的某些 GitHub 統計信息。我在這裡選擇 GitHub API 是因為它對大多數人都很熟悉，無需身份驗證即可使用，並且為我們提供了大量信息。

在開始應用程序之前，我喜歡快速思考一下我們需要哪些組件，我認為我們的App 組件將渲染另外兩個組件：GithubInput，用於接收用戶的輸入，以及GithubOutput，它將顯示用戶的屏幕上的信息。我們將從輸入開始。

注意：您可以在 GitHub 上找到所有代碼，甚至可以查看在線運行的應用程序。

初始設置

在 src 目錄中為 GithubOutput 和 GithubInput 組件創建文件夾：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

向每個文件夾添加必要的文件：

mkdir src
touch webpack.config.js src/index.html src/index.js

src 文件夾的結構現在應該如下所示：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Vue.js 中的表單

讓我們從 GithubInput 組件開始。與 App 組件一樣，index.vue 文件應該包含模板，以及加載腳本和 CSS 文件。目前，模板只是包含

github input

。我們很快就會正確填寫它。我喜歡放入一些虛擬 HTML，以便在創建新組件時檢查我的模板是否已正確連接：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

創建此組件時，我們所做的不同之處在於創建與組件關聯的數據片段。這與 React 的狀態概念非常相似：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

這表示此組件擁有一段它擁有並負責的數據，即 username。我們很快將根據用戶的輸入更新它。

最後，為了將此組件放到屏幕上，我需要使用 App 組件註冊它，因為 App 組件將渲染它。

為此，我更新 src/App/script.js 並告訴它 GithubInput：

mkdir src
touch webpack.config.js src/index.html src/index.js

然後我可以更新 App 組件的模板：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Vue 組件的一個限制（Angular 和React 中也是如此）是每個組件必須有一個根節點，因此當組件必須渲染多個元素時，務必記住將它們全部包裝在某些東西中，最常見的是div。

跟踪表單輸入

我們的 GithubInput 組件需要做兩件事：

跟踪輸入的當前值
傳達該值已更改，以便其他組件可以知道並因此更新其狀態。

我們可以通過創建一個包含輸入元素的表單來完成第一個版本。我們可以使用 Vue 的內置指令來跟踪表單值。 GithubInput 的模板如下所示：

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

您會注意到有兩個重要的屬性：v-on 和 v-model。

v-on 是我們在 Vue 中綁定到 DOM 事件並調用函數的方式。例如，

Click me!

每當單擊段落時，都會調用組件的 foo 方法。如果您想更詳細地了解事件處理，我強烈推薦 Vue 關於事件處理的文檔。 v-model 在表單輸入和數據之間創建雙向數據綁定。在幕後，v-model 實際上是在偵聽表單輸入上的更改事件並更新 Vue 組件中的數據以匹配。

考慮到我們上面的模板，以下是我們如何使用 v-on 和 v-model 來處理表單中的數據：

v-on:submit.prevent="onSubmit" 將方法 onSubmit 綁定到表單提交時運行。通過添加 .prevent，這意味著 Vue 將自動阻止默認操作發生。（如果 Vue 沒有這樣做，我們可以在代碼中調用 event.preventDefault()，但我們不妨利用 Vue 的功能。）
v-model:username 將輸入的值綁定到代碼中的值 username。對於那些熟悉 Angular 的人來說，您可能會認識到這與 ng-model 非常相似。當我們創建 GithubInput 時，我們聲明它擁有一段數據 username，在這裡我們將該數據綁定到輸入字段。兩者將自動保持同步。

現在，回到我們組件的 JavaScript 中，我們可以聲明 onSubmit 方法。請注意，此處的名稱完全是任意的——您可以隨意選擇任何名稱——但我喜歡堅持使用根據將觸發事件命名的函數的約定：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

我們可以直接引用 this 上的數據，因此 this.username 將提供文本框的最新值。如果它不為空，我們希望讓其他組件知道數據已更改。為此，我們將使用消息總線。這些是組件可以發出事件並用於偵聽其他事件的對象。當您的應用程序變得更大時，您可能需要考慮更結構化的方法，例如 Vuex。目前，消息總線可以完成這項工作。

好消息是我們可以使用空的 Vue 實例作為消息總線。為此，我們將創建 src/bus.js，它只是創建一個 Vue 實例並導出它：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

在 GithubInput 組件中，我們可以導入該模塊並通過在用戶名更改時發出事件來使用它：

mkdir src
touch webpack.config.js src/index.html src/index.js

這樣，我們的表單就完成了，我們可以開始對生成的數據做一些事情了。

顯示來自 GitHub 的結果

GithubOutput 組件與我們的其他兩個組件具有相同的結構。在 GithubOutput/script.js 中，我們還導入 bus 模塊，因為我們需要它來知道用戶名何時更改。此組件將負責的數據將是一個對象，該對象將 GitHub 用戶名映射到我們從 GitHub API 獲取的數據。這意味著我們不必每次都向 API 發出請求；如果我們之前已經獲取了數據，我們可以簡單地重複使用它。我們還將存儲我們收到的最後一個用戶名，以便我們知道在屏幕上顯示什麼數據：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

創建組件時，我們要偵聽在消息總線上發出的任何 new-username 事件。值得慶幸的是，Vue 支持許多生命週期鉤子，包括 created。因為我們是負責任的開發人員，所以我們還將在組件銷毀時使用 destroyed 事件停止偵聽事件：

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

然後我們定義 onUsernameChange 方法，該方法將被調用並設置 currentUsername 屬性：

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

請注意，我們不必將 onUsernameChange 方法顯式綁定到當前範圍。當您在 Vue 組件上定義方法時，Vue 會自動對其調用 myMethod.bind(this)，因此它們始終綁定到組件。這就是為什麼您需要在 methods 對像上定義組件的方法的原因之一，這樣 Vue 就可以完全了解它們並相應地設置它們。

條件渲染

如果我們沒有用戶名——在組件首次創建時我們不會有——我們想向用戶顯示一條消息。 Vue 有許多條件渲染技術，但最簡單的是 v-if 指令，它接受一個條件，並且只有在條件存在時才會渲染元素。它還可以與 v-else 配合使用：

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

同樣，這對於任何 Angular 開發人員來說都非常熟悉。我們在這裡使用雙等號而不是三等號，因為我們希望條件不僅在 currentUsername 為 null 時為真，而且在 currentUsername 為 undefined 時也為真，並且 null == undefined 為真。

從 GitHub 獲取數據

Vue.js 沒有自帶 HTTP 庫，這是有充分理由的。如今，fetch API 本地包含在許多瀏覽器中（儘管在撰寫本文時，IE11、Safari 或 iOS Safari 除外）。為了本教程的緣故，我不會使用 polyfill，但如果您需要，可以在瀏覽器中輕鬆地為 API 添加 polyfill。如果您不喜歡 fetch API，則有很多用於 HTTP 的第三方庫，Vue 文檔中提到的一個庫是 Axios。

我非常支持像 Vue 這樣的框架不包含 HTTP 庫。它可以減小框架的捆綁包大小，並讓開發人員選擇最適合他們的庫，並根據需要輕鬆自定義請求以與他們的 API 通信。我將在本文中堅持使用 fetch API，但您可以隨意將其替換為您喜歡的任何庫。

如果您需要了解 fetch API，請查看 SitePoint 上 Ludovico Fischer 的帖子，這將使您快速上手。

為了發出 HTTP 請求，我們將為組件提供另一個方法 fetchGithubData，該方法向 GitHub API 發出請求並存儲結果。它還將首先檢查我們是否已經擁有此用戶的數據，如果沒有，則不會發出請求：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

然後我們只需要在用戶名更改時觸發此方法：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

還有一件事需要注意，由於 Vue 跟踪您正在使用的數據的方式，因此它知道何時更新視圖。有一份很棒的反應式指南詳細解釋了它，但本質上，Vue 無法神奇地知道您何時從對像中添加或刪除了屬性，因此如果我們這樣做：

mkdir src
touch webpack.config.js src/index.html src/index.js

Vue 將無法識別這一點，也不會更新我們的視圖。相反，我們可以使用特殊的 Vue.set 方法，它明確地告訴 Vue 我們添加了一個鍵。上面的代碼將如下所示：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

此代碼將修改 this.githubData，添加我們傳遞給它的鍵和值。它還會通知 Vue 更改，以便它可以重新渲染。

現在我們的代碼如下所示：

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

最後，我們需要使用 App 組件註冊 GitHubOutput 組件：

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

並將其包含在模板中：

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

儘管我們尚未編寫將獲取的數據顯示在屏幕上的視圖代碼，但您應該能夠使用您的用戶名填寫表單，然後檢查 Vue devtools 以查看從 GitHub 請求的數據。這顯示了這些 devtools 的實用性和強大之處；您可以檢查任何組件的本地狀態，並準確查看發生了什麼。

在視圖中顯示一些統計信息

我們現在可以更新模板以顯示一些數據。讓我們將此代碼包裝在另一個 v-if 指令中，以便只有在請求完成後我們才會渲染數據：

mkdir src/App
touch src/App/{index.vue,script.js,style.css}

這樣，我們現在可以將 GitHub 詳情渲染到屏幕上，我們的應用程序就完成了！

重構

我們肯定可以做一些改進。上面渲染 GitHub 數據的 HTML 代碼只需要一小部分——當前用戶的數據。這是另一個組件的完美案例，我們可以為其提供用戶數據，它可以渲染它。

讓我們創建一個 GithubUserData 組件，其結構與我們的其他組件相同：

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

此組件只有一個很小的區別：它將獲取一個屬性 data，這將是用戶的數據。屬性（或“props”）是組件將由其父組件傳遞的數據位，它們在 Vue 中的行為與在 React 中的行為非常相似。在 Vue 中，您必須顯式聲明組件需要的每個屬性，因此在這裡我將說我們的組件將獲取一個屬性 data：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

我非常喜歡 Vue 的一點是您必須非常明確；組件將使用的所有屬性、數據和組件都已明確聲明。這使得代碼更容易使用，而且我相信隨著項目越來越大越來越複雜，也更容易維護。

在新模板中，我們擁有與之前完全相同的 HTML，儘管我們可以引用 data 而不是 githubData[currentUsername]：

mkdir src
touch webpack.config.js src/index.html src/index.js

為了使用此組件，我們需要更新 GithubOutput 組件。首先，我們導入並註冊 GithubUserData：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

在聲明組件時，您可以使用任何名稱，因此在我放置 github-user-data 的位置，您可以放置任何您想要的名稱。建議您堅持使用包含破折號的組件。 Vue 沒有強制執行此操作，但 W3C 關於自定義元素的規範指出，它們必須包含破折號以防止與將來版本的 HTML 中添加的元素發生命名衝突。

聲明組件後，我們可以在模板中使用它：

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

這里至關重要的一點是我如何將 data 屬性傳遞給組件：

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

此屬性開頭的冒號至關重要；它告訴 Vue 我們傳遞的屬性是動態的，並且每次數據更改時都應更新組件。 Vue 將評估 githubData[currentUsername] 的值，並確保 GithubUserData 組件隨著數據更改而保持最新。

如果您覺得 :data 有點簡短且神奇，您還可以使用更長的 v-bind 語法：

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

兩者是等效的，因此請使用您喜歡的任何一種。

結論

這樣，我們的 GitHub 應用程序就處於相當不錯的狀態！您可以在 GitHub 上找到所有代碼，甚至可以查看在線運行的應用程序。

當我開始使用 Vue 時，我對它寄予厚望，因為我聽說過很多好話，我很高興地說它確實達到了我的預期。使用 Vue 的感覺就像採用 React 的最佳部分並將它們與 Angular 的最佳部分合併一樣。一些指令（如v-if、v-else、v-model 等等）非常易於上手（並且比在React 的JSX 語法中進行條件判斷更容易立即理解），但Vue 的組件系統感覺與React 的非常相似。

您應該將系統分解成小的組件，總的來說，我發現這是一個非常無縫的體驗。我還不能對 Vue 團隊的文檔給予足夠的讚揚：它絕對很棒。指南非常出色，API 參考也很全面，並且易於導航，可以找到您想要的確切內容。

如果您喜歡這篇文章並想了解更多信息，最好的起點絕對是官方的 Vue.js 網站。

關於 Vue.js 2.0 的常見問題

Vue.js 1.0 和 Vue.js 2.0 的主要區別是什麼？

Vue.js 2.0 比其前身有了幾項改進。最重要的變化是引入了虛擬 DOM，它通過減少對實際 DOM 的直接操作來提高性能。 Vue.js 2.0 還引入了簡化的基於組件的開發語法，使構建複雜的用戶界面更容易。此外，Vue.js 2.0 支持服務器端渲染，這可以提高應用程序的性能並使其更易於 SEO 優化。

如何在 Vue.js 2.0 中使用觀察者？

Vue.js 2.0 中的觀察者允許您在數據屬性更改時執行自定義邏輯。要使用觀察者，您需要定義一個與要觀察的數據屬性同名的函數，然後將其添加到 Vue 實例中的“watch”對像中。每當數據屬性更改時，都會調用此方法，並將其新值和舊值作為參數。

Vue.js 中的急切加載是什麼，我該如何使用它？

急切加載是 Vue.js 中的一個概念，它允許您在需要之前從服務器加載數據，從而提高應用程序的性能。要在 Vue.js 中使用急切加載，您可以使用“created”生命週期鉤子在創建組件時從服務器獲取數據。然後，此數據將在組件渲染後立即可用。

如何在 Vue.js 2.0 中使用計算屬性？

Vue.js 2.0 中的計算屬性允許您定義基於您的數據計算的可重用屬性。要使用計算屬性，您需要定義一個返回計算值的方法，然後將其添加到 Vue 實例中的“computed”對像中。每當它所依賴的任何數據屬性更改時，都會調用此方法，並且其返回值將被緩存，直到依賴項再次更改。

如何在 Vue.js 2.0 中處理事件？

Vue.js 2.0 提供了一個強大的事件處理系統，允許您偵聽 DOM 事件並在事件發生時運行自定義邏輯。要處理事件，您需要在模板中使用“v-on”指令，後跟要偵聽的事件的名稱以及事件發生時要運行的方法。此方法將使用事件對像作為其參數調用。

如何將 Vue.js 2.0 與 Laravel 一起使用？

Vue.js 2.0 可以輕鬆地與 Laravel（一個流行的 PHP 框架）集成。 Laravel 自帶 Vue.js 支持，因此您可以立即開始構建 Vue.js 組件。要在 Laravel 項目中使用 Vue.js，您需要在 HTML 中包含 Vue.js 腳本，然後在單獨的 JavaScript 文件中定義 Vue 組件。

如何將 Vue.js 2.0 與 Webpack 一起使用？

Webpack 是一個模塊捆綁器，可用於將 Vue.js 組件捆綁到單個 JavaScript 文件中。要將 Vue.js 與 Webpack 一起使用，您需要安裝“vue-loader”包，它允許 Webpack 理解 Vue 組件。然後，您可以在 JavaScript 文件中導入 Vue 組件，並像平時一樣使用它們。

如何將 Vue.js 2.0 與 TypeScript 一起使用？

Vue.js 2.0 支持 TypeScript，TypeScript 是 JavaScript 的靜態類型超集。要將 Vue.js 與 TypeScript 一起使用，您需要安裝“vue-class-component”包，它允許您使用 TypeScript 類定義 Vue 組件。然後，您可以將 Vue 組件定義為 TypeScript 類，並使用 TypeScript 的靜態類型功能在編譯時捕獲錯誤。

如何將 Vue.js 2.0 與 Vuex 一起使用？

Vuex 是 Vue.js 的狀態管理庫，它允許您在一個集中式存儲中管理應用程序的狀態。要將 Vuex 與 Vue.js 一起使用，您需要安裝“vuex”包，然後在 Vuex 存儲中定義您的狀態、變異、操作和獲取器。然後，您可以使用“this.$store”屬性從 Vue 組件訪問您的狀態和調度操作。

如何將 Vue.js 2.0 與 Vue Router 一起使用？

Vue Router 是 Vue.js 的路由庫，它允許您為應用程序定義路由。要將 Vue Router 與 Vue.js 一起使用，您需要安裝“vue-router”包，然後在 Vue Router 實例中定義您的路由。然後，您可以使用“router-link”組件在路由之間導航，並使用“router-view”組件顯示當前路由的組件。

以上是使用vue.js 2.0框架啟動並運行的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。