Vue的模板语法

Vue的模板语法

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

测试准备

为了方便测试，先将vue-base项目中templates下的文件全部删除，同时在App.vue中清除相关的引用。
App.vue

1
2
3
4
5
6

template中写HTML的内容，script中写js的内容。

文本插值

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

示例：

修改App.vue中的内容如下：

<template>
  <p>{{ msg }}p>
template>

<script>
//文本插值语法
export default {
  data() {
    return {
      msg: "Hello, louis",
    };
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在VScode中，让代码格式化的快捷键是shift + alt + f

在输出中可以发现，它会带有一些输出格式，这是因为在main.js中引入的。只要将import './assets/main.css’删除，相关样式就会消除。

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
1
2
3
4
5
6

使用JavaScript表达式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

不在return后面的无效

无效

<!-- 这是一个语句而非表达式 -->
{{ var a = 10 }}  

<!-- 不支持条件控制 -->
{{ if(flag) { return message} }}  
1
2
3
4
5

原始HTML

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

双大括号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

v-html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

属性绑定

准备

在templates下创建一个HelloWorld.vue文件

1
2
3
4
5
6
7

在App.vue文件中引入HelloWorld.vue

1
2
3
4
5
6
7

Attribute绑定

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

修改HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13

测试

简写：去掉v-bind直接使用：

测试属性绑定
1

布尔值属性绑定

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

1
2
3
4
5
6
7
8
9
10
11
12
13

动态绑定多值

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16