3. 项目 [vuejs-01]：基础知识

为解释 [vuejs-00] 中执行的代码，我们将将其简化为 [vuejs-01]。我们将 [vuejs-00] 文件夹复制到 [vuejs-01] 中：

[vuejs-01] 项目主要包含四个文件：

[main.js] [2] 是该项目的入口点；
[App.vue, HelloWorld.vue] 和 [3-4] 是 [Vue.js] 的组件，可选地包含以下内容：
- [<template>...</template>]：HTML 的代码；
- [<script>...</script>]：与代码 HTML 关联的 JavaScript 代码；
- [<style>...</style>]：与代码 HTML 关联的样式 CSS；
[public/index.html] [5]：由命令 [npm run serve] 显示的文档 HTML；

项目运行时显示的文件 [public/index.html] 如下：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- 生成的文件将被自动注入 -->
  </body>
</html>

因此，该文件 HTML 静态显示为空。此处不存在 HTML 代码。显示是动态的：项目中的代码 jS 将生成 HTML，该代码将完全替换第 14 行中的 [<div id=’app’>] 标签。由项目中的代码 jS 生成的代码 HTML，已插入第 14 行取代标签 [<div>]，该代码源自组件 [vue.js] 组件中的 [template] 标签，这些文件的后缀为 [.vue]。

代码 HTML 由以下脚本 [vuejs-01/main.js] 动态插入到第 14 行：


// 导入
import Vue from 'vue'
import App from './App.vue'

// 配置
Vue.config.productionTip = false

// 项目实例化 [App]
new Vue({
  render: h => h(App),
}).$mount('#应用程序')

注释

第 2 行：对象 [Vue] 由框架 [vue.js] 提供；
第 3 行：对象 [App] 由文件 [vuejs-01/App.vue] 提供；
第 6 行：对象 [Vue] 的配置；
第 9-11 行：这些行：
- 生成应用程序的 HTML 代码。第 10 行，由文件 [App.vue] 生成；
- 将第10行生成的代码HTML加载到文件[public/index.html]的[<div id=’app’></div>]部分中；

任何 [Vue.js] 项目均可保留 [index.html] 文件原样。

初始项目 [vuejs-00] 中的文件 [App.vue] 在项目 [vuejs-01] 中简化如下：


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

注释

一个 [.vue] 片段最多包含三个部分：
- [<template>...</template>]：来自代码 HTML；
- [<script>...</script>]：与代码 HTML 关联的 JavaScript 代码；
- [<style>...</style>]：与代码 HTML 关联的样式 CSS；

此处没有 [style] 部分。

第1-6行：片段（页面、组件、视图等）的代码HTML；
第2-5行：[template]部分只能包含一个元素。通常会放置一个[div]部分，该部分包含片段中所有的HTML内容。也可以放置一个<template>标签；
第3行：一张图片；

第 4 行：一个名为 [HelloWorld] 的组件。[Vue.js] 的原理是利用 [.vue] 文件中定义的片段（如此处的 [App.vue]）来构建网页。该组件由文件 [HelloWorld.vue] 定义，该文件在关联脚本 jS 的第 9 行中定义；
第 4 行：组件可接受参数。此处的参数即 [msg] 属性；
第8-17行：片段（或组件）的脚本jS；
第 9 行：要在组件 [App] 中使用组件 [HelloWorld]，必须将其定义导入到 [script] 部分；
第 11-16 行：脚本定义了一个对象并将其导出，以便在外部使用；
第 12 行：[name] 属性定义了导出组件的名称；
第13-15行：[components]属性列出了[App]组件所使用的组件。这些组件将与其一同导出；

第9行，[HelloWorld]组件的名称不必与定义它的文件名称相同。可以将其导入为[X]，并导出为[Bonjour]组件：

第 14 行：组件 [X] 被导出为 [Bonjour]。随后在第 4 行中，它便以该名称被调用；

第一种情况最为常见，因此我们将按此方式定义组件；


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

第 14 行是代码 [HelloWorld : HelloWorld] 的简写：组件 [HelloWorld]（右侧，第 9 行导入）以名称 [HelloWorld]（左侧）导出。

我们将组件 [HelloWorld.vue] 简化如下：


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

注释

组件 [HelloWorld] 与主组件 [App] 具有相同的文件结构；
第 3 行：此处对 JavaScript 表达式进行求值，即表达式 [msg]；
第10-12行：定义了组件的属性，更准确地说，是其参数。当组件[App]实例化组件[HelloWorld]时，使用了以下语法：


<HelloWorld msg="Notre première application Vue.js" />

组件 [HelloWorld] 是通过为参数（属性）[msg] 赋值来实例化的。如果追踪组件 [HelloWorld] 中的 [template]，则其形式变为：


<div>
    <h1>Notre première application Vue.js</h1>
</div>

第7-14行：组件的属性以对象形式定义并被导出；
- 第 9 行：组件以名称 [HelloWorld] 导出；
- 第10-12行：其参数由属性[props]定义；

最终，如果将两个使用的 [App, HelloWorld] 组件的模板合并，显示的 [index.html] 文件将如下所示：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

我们通过修改文件 [package.json] 中的命令 [serve] [1] 来启动应用程序：

此时显示的页面为 [2]。

现在让我们查看该页面的代码：

在 [1] 中，改为 [clic droit]；
变为 [2]，即该页面的源代码。我们可以看到，这是初始文件 [index.html] 的代码，但这并不是实际显示的内容。最初加载的确实是页面 [index.html]。随后，JavaScript 代码动态修改了该页面，但这些修改并未显示出来；

当页面由 JavaScript 动态生成时，[2] 选项将失去作用。此时需进入浏览器工具（Firefox 中的 F12）查看当前显示页面的源代码：

在 [1] 中，即显示文档的 DOM（文档对象模型）检查器；
[2]，即该 DOM 的实际内容；
[3-4]，我们将使用这些工具来显示框架 [Vue.js] 所使用的 JavaScript 对象；
[4] 是一款用于调试 [Vue.js] 应用程序的扩展程序（此处为 Firefox）：
- 适用于 Firefox：[https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/]；
- 适用于 Chrome：[https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd]；

让我们来看看 [Vue] [4] 标签页：

视图 [1-4] 展示了文档的结构 [Vue.js]：文档根节点 [2] (index.html) 包含组件 [App] (3)，而该组件又包含组件 [HelloWorld] (4)。点击 [4] 将显示组件 [HelloWorld] 和 [5] 的属性。

在 [4]（右侧）中，可以看到指标 [$vm0]。这是可以在 JavaScript [6] 控制台中用于指定对象 [HelloWorld] 的变量名称。让我们来操作一下：

在 [2] 中，我们让表达式 [$vm0] 被求值，从而显示其结构。通常我们无需直接使用该结构；

最后，让我们展示 [hot reload] 的功能，该功能由用于执行项目的命令 [serve] 调用：

在 [App.vue] 中，修改 [HelloWorld] 显示的消息：

在 [1] 中，修改显示的消息；
在 [2-3] 中，页面会自动更新，无需我们进行任何操作；

接下来我们将创建多个 [vuejs-xx] 项目，以说明 [Vue.js] 的要点。所谓“要点”，是指“我们将用于税务计算服务器客户端 [vue.js] 的内容”。若某些“重要”内容未在客户端中使用，则将不予赘述。因此，本文并非对 [vue.js] 的全面介绍。