使用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和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。