前端_Vue_2.创建一个Vue应用、模板语法_vue2 createapp

---

一、创建一个Vue应用

1.1. 应用实例

每个Vue应用都是通过createApp函数创建一个新的 应用实例 ：

import { createApp } from 'vue'
const app = createApp({
	/* 根组件选项 */
})

// 这段代码一般是放在后台的js代码中。
// 创建app后，挂载到前端HTML的DOM元素上
1
2
3
4
5
6
7

就和其他的组件or框架一样，createApp就像Vue的开端，它返回的对象是Vue的应用实例，也是Vue的核心。

1.2. 根组件

传入createApp的对象实际上是一个组件，每个应用（app）都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件（就是前文说的.vue文件），我们可以直接从文件中导入根组件。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件 这句话应该是说 import app from app.vue
import App from './App.vue'

const app = createApp(App)

1
2
3
4
5
6

虽然本文的许多示例只需要一个组件，但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。例如，一个代办事项（Todos）应用的组件树可能是这样的：

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics
1
2
3
4
5
6
7
8

1.3. 挂载应用

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串：

<div id="app"></div>
1

app.mount('#app');
1

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount()方法应该始终在整个应用配置和资源注册完成后被调用。同时注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

1.3.1. DOM中的根组件模板

当在未采用构建流程的情况下使用Vue时，我们可以在挂载容器中直接书写根组件模板：

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
1
2
3

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11

当根组件没有设置 template 选项时，Vue将自动使用容器的 innerHTML 作为模板（上面的容器是id为app的div）。

innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容包括HTML标签，但不包括自身)
上例中，就是下图红框部分，

1.4. 应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级选项，例如定义一个应用级的错误处理器，它将捕获所有由子组件上抛而未被处理的错误：

app.config.errorHandler = (err) => {
	/* 处理错误 */
}
1
2
3

应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

app.component('TodoDeleteButton', TodoDeleteButton)
1

这使得 TodoDeleteButton 在应用的任何地方都是可用的。

确保在挂载应用实例之前完成所有应用配置！

1.5. 多个应用实例

应用实例并不只限于一个。createApp API允许你在同一个页面中创建多个共存的Vue应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

const app1 = createApp({
	/* ... */
});
app1.mount('#container-1')

const app2 = createApp({
	/* ... */
})
app2.mount('#container-2')
1
2
3
4
5
6
7
8
9

如果你正在使用Vue来增强服务器端渲染HTML，并且只想要Vue去控制一个大型页面中特殊的一小部分，应避免将一个单独的Vue应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。

这点其实就是尽量将页面元素拆分的思想，组件化、模块化。
前期只要将页面划分好区域，然后挂载上Vue应用即可。

---

二、模板语法

Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。

在底层机制中，Vue会将模板翻译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。

2.1. 文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法（即双大括号）：

<span>Message:{{ msg }}</span>
1

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

2.2. 原始HTML

双大括号会将数据解释为纯文本，而不是HTML。若想插入HTML，你需要使用 v-html 指令：

<p>Using text interpolation:{{ rawHtmll }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
1
2

这里我们遇到了一个新的概念。这里看到的 v-html attribute被称为一个 指令 。指令由 v- 作为前缀，表明它们是一些由Vue提供的特殊的attribute，你可能已经猜到了，它们将为渲染DOM应用特殊的响应式行为。这里我们所做的事情简单来说就是：在当前组件实例上，将此元素的innerHTML与rawHtml属性保持同步。

span 的内容将会被替换为 rawHtml 属性的值，插值为纯HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为Vue不是一个基于字符串的模板引擎。在使用Vue时，应当使用组件作为UI重用和组合的基本单元。

2.3. Attribute绑定

双大括号不能在HTML attributes中使用。想要响应式地绑定一个attribute，应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>
1

v-bind 指令指示Vue将元素的 id attribute与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined ， 那么该attribute 将会从渲染的元素上移除。

2.3.1. 简写

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>
1

开头为 : 的attribute可能和一般的HTML attribute看起来不太一样，但它的确是合法的attribute名称字符，并且所有支持Vue的浏览器都能正确解析它。此外，他们不会出现在最终渲染的DOM中。简写语法是可选的，但相信你在了解了它更多的用处后，你应该会更喜欢它。

接下来，我们都将在示例中使用简写语法，因为这是实际开发中更常见的用法。

2.3.2. 布尔型 Attribute

布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上。disabled就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>
1

当 isButtonDisabled 为真值或一个空字符串（即<button disabled=“”>）时，元素会包含这个disabled attribute。而当其为其他假值时 attribute 将被忽略。

2.3.3. 动态绑定多个值

如果你有像这样的一个包含多个attribute的JavaScript对象：

data(){
	return {
		objectOfAttrs:{
			id:'container',
			class:'wrapper'
		}
	}
}
1
2
3
4
5
6
7
8

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>
1

2.4. 使用JavaScript表达式

至此，我们仅在模板中绑定了一些简单的属性名。但是Vue实际上在所有的数据绑定中都支持完整的JavaScript表达式：

{{ number +1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="'list-${id}'"></div>
1
2
3
4

这些表达式都会被作为JavaScript，以组件为作用域解析执行。
在Vue模板内，JavaScript表达式可以被使用在如下场景上：

• 在文本插值中（双大括号）
• 在任何Vue指令（以 v- 开头的特殊attribute）attribute的值中

2.4.1. 仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在 return 后面。

因此，下面的例子都是无效的：

<!--这是一个语句，而非表达式-->
{{ var a = 1 }}
<!--条件控制也不支持，请使用三元表达式-->
{{ if(ok) { return message } }}
1
2
3
4

2.4.2. 调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

<span :little="toTitleDate(date)">
	{{ formatDate(date) }}
</span>
1
2
3

2.4.3. 受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的Vue表达式使用。

2.5. 指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue提供了许多内置指令，包括上面介绍的 v-bind 和 v-html。

指令attribute的期望值为一个JavaScript表达式（除了少数几个例外，即之后要讨论到的 v-for、v-on和v-slot）。一个指令的任务是在其表达式的值变化时响应式地更新DOM。以v-if为例：

<p v-if="seen">Now you see me</p>
1

这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p>元素。

2.5.1. 参数 Arguments

某些指令会需要一个 “参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：

<a v-bind:href="url">...</a>
<!--简写-->
<a :href="url">...</a>
1
2
3

这里的 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute上。在简写中，参数前的一切（例如 v-bind:）都会被缩略为一个 : 字符。

另一个例子是 v-on 指令，它将监听DOM事件：

<a v-on:click="doSomething">...</a>
<!--简写-->
<a @click="doSomething">...</a>
1
2
3

这里的参数是要监听的事件名称: click。 v-on 有一个相应的缩写，即 @ 字符。

2.5.2. 动态参数

同样在指令参数上也可以使用一个JavaScript表达式，需要包含在一对方括号内：

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url">...</a>
<!--简写-->
<a :[attributeName]="url">...</a>
1
2
3
4
5
6
7

这里的 attributeName 会作为一个JavaScript表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性attributeName，其值为"href"，那么这个绑定就等价于v-bind:href。

相似地，你还可以将一个函数绑定到动态的时间名称上：

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">

1
2
3
4
5

在此示例中，当 eventName的值是 "focus"时，v-on:[eventName]就等价于v-on:focus。

2.5.2.1. 动态参数值的限制

动态参数中表达式的值应当是一个字符串，或者是 null。特殊值null意为显式移除该绑定。其他非字符串的值会触发警告。

2.5.2.2. 动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在HTML attribute名称中都是不合法的。例如下面的示例：

<a :['foo' + bar]="value">...</a>
1

如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式，也是Vue最基础的概念之一。

当使用DOM内嵌模板（直接写在HTML文件里的模板）时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：

<a :[someAttr]="value">...</a>
1

上面的例子将会在DOM内嵌模板中被转换为:[someattr]。如果你的组件拥有"someAttr"属性而非"someattr"，这段代码将不会工作。单文件组件内的模板不受此限制。

2.5.3. 修饰符 Modifiers

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

<form @sumbit.prevent="onSubmit">...</form>
1

完整的指令语法：