成人欧美日韩一区二区三区,粉嫩av国产一区二区三区,丰满熟妇hd

Vue 2 擁有出色的性能指標(biāo)，相對(duì)較小的負(fù)載（捆綁的 Vue 運(yùn)行時(shí)版本在縮小和 gzip 壓縮后重約 30KB），以及對(duì)配套庫（如 vue-router 和 Vuex，Vue 的狀態(tài)管理庫）的更新。僅在一篇文章中涵蓋所有內(nèi)容實(shí)在太多了，但請(qǐng)關(guān)注后續(xù)文章，我們將更仔細(xì)地研究與核心框架完美結(jié)合的各種庫。

關(guān)鍵要點(diǎn)

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

其他庫的靈感

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

一個(gè)這樣的例子是，與 React 和當(dāng)今 JavaScript 領(lǐng)域幾乎所有框架一樣，Vue 使用虛擬 DOM 的概念來保持渲染效率。Vue 使用 snabbdom 的一個(gè)分支，這是更流行的虛擬 DOM 庫之一。Vue 網(wǎng)站包含關(guān)于其虛擬 DOM 渲染的文檔，但作為用戶，您只需要知道 Vue 非常擅長(zhǎng)保持渲染速度（實(shí)際上，在許多情況下，它的性能優(yōu)于 React），這意味著您可以放心，您正在構(gòu)建一個(gè)可靠的平臺(tái)。

組件，組件，組件

與當(dāng)今的其他框架一樣，Vue 的核心構(gòu)建塊是組件。您的應(yīng)用程序應(yīng)該是一系列組件，這些組件相互構(gòu)建以生成最終的應(yīng)用程序。Vue.js 更進(jìn)一步，建議（盡管沒有強(qiáng)制）您在一個(gè) .vue 文件中定義組件，然后構(gòu)建工具（我們很快就會(huì)介紹）可以解析這些文件。鑒于本文的目的是全面探索 Vue 及其使用感受，我將為此應(yīng)用程序使用此約定。

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>

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

設(shè)置項(xiàng)目

雖然優(yōu)秀的 Vue CLI 可以輕松設(shè)置完整的項(xiàng)目，但在開始使用新庫時(shí)，我喜歡從頭開始，以便更多地了解這些工具。

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

讓我們初始化一個(gè)項(xiàng)目并安裝依賴項(xiàng)：

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

然后創(chuàng)建初始文件夾和文件：

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

項(xiàng)目結(jié)構(gòu)應(yīng)如下所示：

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

現(xiàn)在讓我們?cè)O(shè)置 webpack 配置。這歸結(jié)為以下幾點(diǎn)：

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

//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 文件添加一些內(nèi)容，然后我們就可以開始了！

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

我們創(chuàng)建了一個(gè) ID 為 app 的空 div，因?yàn)檫@是我們將放置 Vue 應(yīng)用程序的元素。我總是更喜歡使用 div，而不是 body 元素，因?yàn)檫@讓我可以控制頁面的其余部分。

編寫我們的第一個(gè) Vue.js 應(yīng)用程序

我們將忠于以往的每個(gè)編程教程，編寫一個(gè) Vue 應(yīng)用程序，在深入研究更復(fù)雜的內(nèi)容之前，先將“Hello, World！”放到屏幕上。

每個(gè) Vue 應(yīng)用程序都是通過導(dǎo)入庫然后實(shí)例化一個(gè)新的 Vue 實(shí)例來創(chuàng)建的：

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

我們?yōu)?Vue 提供一個(gè)要渲染到頁面上的元素，這樣我們就創(chuàng)建了一個(gè) Vue 應(yīng)用程序！我們傳遞一個(gè)選擇器，用于選擇我們希望 Vue 用我們的應(yīng)用程序替換的元素。這意味著當(dāng) Vue 運(yùn)行時(shí)，它將獲取我們創(chuàng)建的 div#app 并將其替換為我們的應(yīng)用程序。

我們使用變量名 vm 的原因是因?yàn)樗怼耙晥D模型”。雖然與“模型視圖視圖模型”（MVVM）模式?jīng)]有嚴(yán)格關(guān)聯(lián)，但 Vue 部分受到它的啟發(fā)，并且使用變量名 vm 來表示 Vue 應(yīng)用程序的約定一直沿用至今。當(dāng)然，您可以隨意命名變量！

到目前為止，我們的應(yīng)用程序什么也沒做，所以讓我們創(chuàng)建我們的第一個(gè)組件 App.vue，它實(shí)際上會(huì)將某些內(nèi)容渲染到頁面上。

Vue 沒有規(guī)定應(yīng)用程序的結(jié)構(gòu)，所以這取決于您。我最終為每個(gè)組件創(chuàng)建了一個(gè)文件夾，在本例中為 App（我喜歡大寫字母，表示一個(gè)組件），其中包含三個(gè)文件：

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

文件結(jié)構(gòu)現(xiàn)在應(yīng)該如下所示：

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

App/index.vue 定義了模板，然后導(dǎo)入其他文件。這符合 Vue 文檔中“關(guān)于關(guān)注點(diǎn)分離”部分中推薦的結(jié)構(gòu)。

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

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

目前，我們的模板只是

Hello, World!

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

//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"
    })
  ]
}

這樣做會(huì)創(chuàng)建一個(gè)組件，我們將為其命名為 App，主要用于調(diào)試目的，我稍后會(huì)介紹，然后定義該組件擁有并負(fù)責(zé)的數(shù)據(jù)。目前，我們沒有任何數(shù)據(jù)，因此我們可以通過返回一個(gè)空對(duì)象來告訴 Vue 這點(diǎn)。稍后，我們將看到一個(gè)使用數(shù)據(jù)的組件示例。

現(xiàn)在我們可以回到 src/index.js 并告訴 Vue 實(shí)例渲染我們的 App 組件：

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

首先，我們導(dǎo)入組件，相信 webpack 和 vue-loader 會(huì)負(fù)責(zé)解析它。然后我們聲明組件。這是一個(gè)重要的步驟：默認(rèn)情況下，Vue 組件不是全局可用的。每個(gè)組件都必須有一個(gè)它們將要使用的所有組件的列表，以及它將被映射到的標(biāo)簽。在本例中，因?yàn)槲覀兿襁@樣注冊(cè)我們的組件：

import Vue from 'vue'

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

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

最后，我們定義 render 函數(shù)。此函數(shù)使用一個(gè)助手（通常稱為 h）調(diào)用，該助手能夠創(chuàng)建元素。它與 React 使用的 React.createElement 函數(shù)不太相似。在本例中，我們?yōu)槠涮峁┳址?'app'，因?yàn)槲覀円秩镜慕M件注冊(cè)為具有標(biāo)簽 app。

大多數(shù)情況下（以及在本教程的其余部分），我們不會(huì)在其他組件上使用 render 函數(shù)，因?yàn)槲覀儗⒍x HTML 模板。但是，如果您想了解更多信息，則值得閱讀 Vue.js 關(guān)于 render 函數(shù)的指南。

完成之后，最后一步是在 package.json 中創(chuàng)建一個(gè) 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>

現(xiàn)在，運(yùn)行 npm run start。您的默認(rèn)瀏覽器應(yīng)該在 http://www.miracleart.cn/link/03b0db8c971432a5e8d163897176a7cc 打開，您應(yīng)該在屏幕上看到“Hello, World！”。

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

太好了！我們正在使用 Vue.js 運(yùn)行。

Vue Devtools

在我們深入研究一個(gè)稍微復(fù)雜一點(diǎn)的 Vue 應(yīng)用程序之前，現(xiàn)在是時(shí)候提到您絕對(duì)應(yīng)該安裝 Vue devtools 了。這些位于 Chrome 開發(fā)者工具中，為您提供了一種查看應(yīng)用程序以及所有傳遞的屬性、每個(gè)組件擁有的狀態(tài)等等的好方法。

Getting up and Running with the Vue.js 2.0 Framework

構(gòu)建應(yīng)用程序

作為一個(gè)示例應(yīng)用程序，我們將使用 GitHub API 來構(gòu)建一個(gè)應(yīng)用程序，讓我們輸入用戶名并查看該用戶的某些 GitHub 統(tǒng)計(jì)信息。我在這里選擇 GitHub API 是因?yàn)樗鼘?duì)大多數(shù)人都很熟悉，無需身份驗(yàn)證即可使用，并且為我們提供了大量信息。

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

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

初始設(shè)置

在 src 目錄中為 GithubOutput 和 GithubInput 組件創(chuàng)建文件夾：

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

向每個(gè)文件夾添加必要的文件：

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

src 文件夾的結(jié)構(gòu)現(xiàn)在應(yīng)該如下所示：

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

Vue.js 中的表單

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

github input

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

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

創(chuàng)建此組件時(shí)，我們所做的不同之處在于創(chuàng)建與組件關(guān)聯(lián)的數(shù)據(jù)片段。這與 React 的狀態(tài)概念非常相似：

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

這表示此組件擁有一段它擁有并負(fù)責(zé)的數(shù)據(jù)，即 username。我們很快將根據(jù)用戶的輸入更新它。

最后，為了將此組件放到屏幕上，我需要使用 App 組件注冊(cè)它，因?yàn)?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 組件的一個(gè)限制（Angular 和 React 中也是如此）是每個(gè)組件必須有一個(gè)根節(jié)點(diǎn)，因此當(dāng)組件必須渲染多個(gè)元素時(shí)，務(wù)必記住將它們?nèi)堪b在某些東西中，最常見的是 div。

跟蹤表單輸入

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

跟蹤輸入的當(dāng)前值
傳達(dá)該值已更改，以便其他組件可以知道并因此更新其狀態(tài)。

我們可以通過創(chuàng)建一個(gè)包含輸入元素的表單來完成第一個(gè)版本。我們可以使用 Vue 的內(nèi)置指令來跟蹤表單值。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"
    })
  ]
}

您會(huì)注意到有兩個(gè)重要的屬性：v-on 和 v-model。

v-on 是我們?cè)?Vue 中綁定到 DOM 事件并調(diào)用函數(shù)的方式。例如，

Click me!

每當(dāng)單擊段落時(shí)，都會(huì)調(diào)用組件的 foo 方法。如果您想更詳細(xì)地了解事件處理，我強(qiáng)烈推薦 Vue 關(guān)于事件處理的文檔。v-model 在表單輸入和數(shù)據(jù)之間創(chuàng)建雙向數(shù)據(jù)綁定。在幕后，v-model 實(shí)際上是在偵聽表單輸入上的更改事件并更新 Vue 組件中的數(shù)據(jù)以匹配。

考慮到我們上面的模板，以下是我們?nèi)绾问褂?v-on 和 v-model 來處理表單中的數(shù)據(jù)：

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

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

<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 上的數(shù)據(jù)，因此 this.username 將提供文本框的最新值。如果它不為空，我們希望讓其他組件知道數(shù)據(jù)已更改。為此，我們將使用消息總線。這些是組件可以發(fā)出事件并用于偵聽其他事件的對(duì)象。當(dāng)您的應(yīng)用程序變得更大時(shí)，您可能需要考慮更結(jié)構(gòu)化的方法，例如 Vuex。目前，消息總線可以完成這項(xiàng)工作。

好消息是我們可以使用空的 Vue 實(shí)例作為消息總線。為此，我們將創(chuàng)建 src/bus.js，它只是創(chuàng)建一個(gè) Vue 實(shí)例并導(dǎo)出它：

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 組件中，我們可以導(dǎo)入該模塊并通過在用戶名更改時(shí)發(fā)出事件來使用它：

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

這樣，我們的表單就完成了，我們可以開始對(duì)生成的數(shù)據(jù)做一些事情了。

顯示來自 GitHub 的結(jié)果

GithubOutput 組件與我們的其他兩個(gè)組件具有相同的結(jié)構(gòu)。在 GithubOutput/script.js 中，我們還導(dǎo)入 bus 模塊，因?yàn)槲覀冃枰鼇碇烙脩裘螘r(shí)更改。此組件將負(fù)責(zé)的數(shù)據(jù)將是一個(gè)對(duì)象，該對(duì)象將 GitHub 用戶名映射到我們從 GitHub API 獲取的數(shù)據(jù)。這意味著我們不必每次都向 API 發(fā)出請(qǐng)求；如果我們之前已經(jīng)獲取了數(shù)據(jù)，我們可以簡(jiǎn)單地重復(fù)使用它。我們還將存儲(chǔ)我們收到的最后一個(gè)用戶名，以便我們知道在屏幕上顯示什么數(shù)據(jù)：

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

創(chuàng)建組件時(shí)，我們要偵聽在消息總線上發(fā)出的任何 new-username 事件。值得慶幸的是，Vue 支持許多生命周期鉤子，包括 created。因?yàn)槲覀兪秦?fù)責(zé)任的開發(fā)人員，所以我們還將在組件銷毀時(shí)使用 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 方法，該方法將被調(diào)用并設(shè)置 currentUsername 屬性：

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

請(qǐng)注意，我們不必將 onUsernameChange 方法顯式綁定到當(dāng)前范圍。當(dāng)您在 Vue 組件上定義方法時(shí)，Vue 會(huì)自動(dòng)對(duì)其調(diào)用 myMethod.bind(this)，因此它們始終綁定到組件。這就是為什么您需要在 methods 對(duì)象上定義組件的方法的原因之一，這樣 Vue 就可以完全了解它們并相應(yīng)地設(shè)置它們。

條件渲染

如果我們沒有用戶名——在組件首次創(chuàng)建時(shí)我們不會(huì)有——我們想向用戶顯示一條消息。Vue 有許多條件渲染技術(shù)，但最簡(jiǎn)單的是 v-if 指令，它接受一個(gè)條件，并且只有在條件存在時(shí)才會(huì)渲染元素。它還可以與 v-else 配合使用：

import Vue from 'vue'

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

同樣，這對(duì)于任何 Angular 開發(fā)人員來說都非常熟悉。我們?cè)谶@里使用雙等號(hào)而不是三等號(hào)，因?yàn)槲覀兿Ｍ麠l件不僅在 currentUsername 為 null 時(shí)為真，而且在 currentUsername 為 undefined 時(shí)也為真，并且 null == undefined 為真。

從 GitHub 獲取數(shù)據(jù)

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

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

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

為了發(fā)出 HTTP 請(qǐng)求，我們將為組件提供另一個(gè)方法 fetchGithubData，該方法向 GitHub API 發(fā)出請(qǐng)求并存儲(chǔ)結(jié)果。它還將首先檢查我們是否已經(jīng)擁有此用戶的數(shù)據(jù)，如果沒有，則不會(huì)發(fā)出請(qǐng)求：

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

然后我們只需要在用戶名更改時(shí)觸發(fā)此方法：

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 跟蹤您正在使用的數(shù)據(jù)的方式，因此它知道何時(shí)更新視圖。有一份很棒的反應(yīng)式指南詳細(xì)解釋了它，但本質(zhì)上，Vue 無法神奇地知道您何時(shí)從對(duì)象中添加或刪除了屬性，因此如果我們這樣做：

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

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

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

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

現(xiàn)在我們的代碼如下所示：

//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 組件注冊(cè) 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',
})

盡管我們尚未編寫將獲取的數(shù)據(jù)顯示在屏幕上的視圖代碼，但您應(yīng)該能夠使用您的用戶名填寫表單，然后檢查 Vue devtools 以查看從 GitHub 請(qǐng)求的數(shù)據(jù)。這顯示了這些 devtools 的實(shí)用性和強(qiáng)大之處；您可以檢查任何組件的本地狀態(tài)，并準(zhǔn)確查看發(fā)生了什么。

在視圖中顯示一些統(tǒng)計(jì)信息

我們現(xiàn)在可以更新模板以顯示一些數(shù)據(jù)。讓我們將此代碼包裝在另一個(gè) v-if 指令中，以便只有在請(qǐng)求完成后我們才會(huì)渲染數(shù)據(jù)：

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

這樣，我們現(xiàn)在可以將 GitHub 詳情渲染到屏幕上，我們的應(yīng)用程序就完成了！

重構(gòu)

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

讓我們創(chuàng)建一個(gè) GithubUserData 組件，其結(jié)構(gòu)與我們的其他組件相同：

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

此組件只有一個(gè)很小的區(qū)別：它將獲取一個(gè)屬性 data，這將是用戶的數(shù)據(jù)。屬性（或“props”）是組件將由其父組件傳遞的數(shù)據(jù)位，它們?cè)?Vue 中的行為與在 React 中的行為非常相似。在 Vue 中，您必須顯式聲明組件需要的每個(gè)屬性，因此在這里我將說我們的組件將獲取一個(gè)屬性 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 的一點(diǎn)是您必須非常明確；組件將使用的所有屬性、數(shù)據(jù)和組件都已明確聲明。這使得代碼更容易使用，而且我相信隨著項(xiàng)目越來越大越來越復(fù)雜，也更容易維護(hù)。

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

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

為了使用此組件，我們需要更新 GithubOutput 組件。首先，我們導(dǎo)入并注冊(cè) GithubUserData：

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

在聲明組件時(shí)，您可以使用任何名稱，因此在我放置 github-user-data 的位置，您可以放置任何您想要的名稱。建議您堅(jiān)持使用包含破折號(hào)的組件。Vue 沒有強(qiáng)制執(zhí)行此操作，但 W3C 關(guān)于自定義元素的規(guī)范指出，它們必須包含破折號(hào)以防止與將來版本的 HTML 中添加的元素發(fā)生命名沖突。

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

//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"
    })
  ]
}

這里至關(guān)重要的一點(diǎn)是我如何將 data 屬性傳遞給組件：

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

此屬性開頭的冒號(hào)至關(guān)重要；它告訴 Vue 我們傳遞的屬性是動(dòng)態(tài)的，并且每次數(shù)據(jù)更改時(shí)都應(yīng)更新組件。Vue 將評(píng)估 githubData[currentUsername] 的值，并確保 GithubUserData 組件隨著數(shù)據(jù)更改而保持最新。

如果您覺得 :data 有點(diǎn)簡(jiǎn)短且神奇，您還可以使用更長(zhǎng)的 v-bind 語法：

import Vue from 'vue'

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

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

結(jié)論

這樣，我們的 GitHub 應(yīng)用程序就處于相當(dāng)不錯(cuò)的狀態(tài)！您可以在 GitHub 上找到所有代碼，甚至可以查看在線運(yùn)行的應(yīng)用程序。

當(dāng)我開始使用 Vue 時(shí)，我對(duì)它寄予厚望，因?yàn)槲衣犝f過很多好話，我很高興地說它確實(shí)達(dá)到了我的預(yù)期。使用 Vue 的感覺就像采用 React 的最佳部分并將它們與 Angular 的最佳部分合并一樣。一些指令（如 v-if、v-else、v-model 等等）非常易于上手（并且比在 React 的 JSX 語法中進(jìn)行條件判斷更容易立即理解），但 Vue 的組件系統(tǒng)感覺與 React 的非常相似。

您應(yīng)該將系統(tǒng)分解成小的組件，總的來說，我發(fā)現(xiàn)這是一個(gè)非常無縫的體驗(yàn)。我還不能對(duì) Vue 團(tuán)隊(duì)的文檔給予足夠的贊揚(yáng)：它絕對(duì)很棒。指南非常出色，API 參考也很全面，并且易于導(dǎo)航，可以找到您想要的確切內(nèi)容。

如果您喜歡這篇文章并想了解更多信息，最好的起點(diǎn)絕對(duì)是官方的 Vue.js 網(wǎng)站。

關(guān)于 Vue.js 2.0 的常見問題

Vue.js 1.0 和 Vue.js 2.0 的主要區(qū)別是什么？

Vue.js 2.0 比其前身有了幾項(xiàng)改進(jìn)。最重要的變化是引入了虛擬 DOM，它通過減少對(duì)實(shí)際 DOM 的直接操作來提高性能。Vue.js 2.0 還引入了簡(jiǎn)化的基于組件的開發(fā)語法，使構(gòu)建復(fù)雜的用戶界面更容易。此外，Vue.js 2.0 支持服務(wù)器端渲染，這可以提高應(yīng)用程序的性能并使其更易于 SEO 優(yōu)化。

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

Vue.js 2.0 中的觀察者允許您在數(shù)據(jù)屬性更改時(shí)執(zhí)行自定義邏輯。要使用觀察者，您需要定義一個(gè)與要觀察的數(shù)據(jù)屬性同名的函數(shù)，然后將其添加到 Vue 實(shí)例中的“watch”對(duì)象中。每當(dāng)數(shù)據(jù)屬性更改時(shí)，都會(huì)調(diào)用此方法，并將其新值和舊值作為參數(shù)。

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

急切加載是 Vue.js 中的一個(gè)概念，它允許您在需要之前從服務(wù)器加載數(shù)據(jù)，從而提高應(yīng)用程序的性能。要在 Vue.js 中使用急切加載，您可以使用“created”生命周期鉤子在創(chuàng)建組件時(shí)從服務(wù)器獲取數(shù)據(jù)。然后，此數(shù)據(jù)將在組件渲染后立即可用。

如何在 Vue.js 2.0 中使用計(jì)算屬性？

Vue.js 2.0 中的計(jì)算屬性允許您定義基于您的數(shù)據(jù)計(jì)算的可重用屬性。要使用計(jì)算屬性，您需要定義一個(gè)返回計(jì)算值的方法，然后將其添加到 Vue 實(shí)例中的“computed”對(duì)象中。每當(dāng)它所依賴的任何數(shù)據(jù)屬性更改時(shí)，都會(huì)調(diào)用此方法，并且其返回值將被緩存，直到依賴項(xiàng)再次更改。

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

Vue.js 2.0 提供了一個(gè)強(qiáng)大的事件處理系統(tǒng)，允許您偵聽 DOM 事件并在事件發(fā)生時(shí)運(yùn)行自定義邏輯。要處理事件，您需要在模板中使用“v-on”指令，后跟要偵聽的事件的名稱以及事件發(fā)生時(shí)要運(yùn)行的方法。此方法將使用事件對(duì)象作為其參數(shù)調(diào)用。

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

Vue.js 2.0 可以輕松地與 Laravel（一個(gè)流行的 PHP 框架）集成。Laravel 自帶 Vue.js 支持，因此您可以立即開始構(gòu)建 Vue.js 組件。要在 Laravel 項(xiàng)目中使用 Vue.js，您需要在 HTML 中包含 Vue.js 腳本，然后在單獨(dú)的 JavaScript 文件中定義 Vue 組件。

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

Webpack 是一個(gè)模塊捆綁器，可用于將 Vue.js 組件捆綁到單個(gè) JavaScript 文件中。要將 Vue.js 與 Webpack 一起使用，您需要安裝“vue-loader”包，它允許 Webpack 理解 Vue 組件。然后，您可以在 JavaScript 文件中導(dǎo)入 Vue 組件，并像平時(shí)一樣使用它們。

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

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

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

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

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

Vue Router 是 Vue.js 的路由庫，它允許您為應(yīng)用程序定義路由。要將 Vue Router 與 Vue.js 一起使用，您需要安裝“vue-router”包，然后在 Vue Router 實(shí)例中定義您的路由。然后，您可以使用“router-link”組件在路由之間導(dǎo)航，并使用“router-view”組件顯示當(dāng)前路由的組件。

以上是使用vue.js 2.0框架啟動(dòng)并運(yùn)行的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本站聲明

本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn