VueJS模板渲染

在上一课里，我们学习了VueJS的基本用法，尤其是如何把变量里保存的文字显示在页面模板里。

在这一课，我们会学习更多用变量来控制页面模板显示的例子。

学习目标

理解模板渲染的基本概念：了解 Vue.js 的模板系统如何将模板和数据结合生成 HTML。
掌握插值：理解如何使用双大括号进行文本插值，以及如何使用 v-html 指令进行 HTML 插值。
掌握指令：理解 Vue.js 提供的各种指令，如 v-if、v-else、v-show、v-for、v-on、v-bind、v-model 等，并能在实际项目中使用。
理解计算属性和侦听器：了解计算属性和侦听器的作用，以及它们与普通方法和属性的区别。
掌握 Class 与 Style 绑定：学会如何动态地绑定 HTML 元素的 class 和 style。
理解条件渲染和列表渲染：了解 Vue.js 提供的条件渲染和列表渲染指令，并能在实际项目中使用。
理解过滤器：了解如何定义和使用过滤器来进行文本格式化。
理解插槽：了解如何使用插槽进行内容分发，包括默认插槽和具名插槽。
理解组件：了解如何在模板中使用组件，以及如何通过 props 和自定义事件进行组件间的通信。

1. 理解模板渲染的基本概念

Vue.js 使用基于 HTML 的模板语法，允许声明式地将已经渲染的 DOM 绑定至底层 Vue 实例的数据。在 Vue.js 中，模板是一个包含 Vue.js 指令和特殊语法的 HTML 结构。Vue.js 编译模板并创建一个渲染函数，当数据发生变化时，Vue.js 会重新执行渲染函数，生成新的 HTML 结构，并更新到页面上。

2. 掌握插值

插值是 Vue.js 模板中最基本的形式，使用双大括号 {{}} 包裹表达式，Vue.js 会将它替换为实际的数据值。例如：

<p>{{ message }}</p>

在这个例子中，message 是 Vue 实例的一个数据属性，Vue.js 会将 {{ message }} 替换为 message 的值。

除了文本插值，Vue.js 还提供了 v-html 指令进行 HTML 插值：

<p v-html="htmlContent"></p>

在这个例子中，htmlContent 是包含 HTML 标签的字符串，Vue.js 会将这些 HTML 标签解析并渲染到页面上。

3. 掌握指令

Vue.js 提供了一些特殊的特性，称为指令，用于对元素和组件进行操作。所有的 Vue.js 指令都以 v- 开头。以下是一些常用的 Vue.js 指令：

v-if、v-else 和 v-else-if：用于条件渲染。
v-show：用于根据条件切换元素的显示/隐藏。
v-for：用于渲染列表。
v-on：用于监听 DOM 事件。
v-bind：用于绑定元素特性。
v-model：用于在表单元素上创建双向数据绑定。

4. 理解计算属性和侦听器

计算属性和侦听器是 Vue.js 提供的两种对数据变化进行响应的方式。计算属性是基于它们的依赖进行缓存的，只有在它的依赖值改变时才会重新求值。侦听器则是当需要在数据变化时执行异步或开销较大的操作时，最有用的地方。

5. 掌握 Class 与 Style 绑定

Vue.js 提供了 v-bind:class 和 v-bind:style 指令用于动态地绑定 HTML 元素的 class 和 style。这使得我们可以根据数据动态地改变元素的样式。

6. 理解条件渲染和列表渲染

Vue.js 提供了 v-if、v-else、v-else-if 和 v-show 指令进行条件渲染，以及 v-for 指令进行列表渲染。理解这些指令的用法和区别，可以帮助我们更好地控制页面的显示。

7. 理解过滤器

Vue.js 允许你自定义过滤器，用于文本格式化。过滤器可以用在两个地方：双大括号插值和 v-bind 表达式。

8. 理解插槽

Vue.js 提供了一种分发内容的机制，称为插槽。通过插槽，我们可以在组件模板中嵌入任意内容。

9. 理解组件

在 Vue.js 中，组件是一种自定义元素，可以在模板中使用。理解如何在模板中使用组件，以及如何通过 props 和自定义事件进行组件间的通信，是学习 Vue.js 的重要部分。

直接渲染函数运算结果

在methods里创建的函数，运算结果可以直接显示在模板里面：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  请输入一个数字：<input v-model="x"><br>
  这个数字是：{{ x }}<br>
  函数f(x)的计算结果是：{{ f(x) }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      x: 100
    },
    methods: {        
      f() {
        return x*100;
      }
    }
  })
</script>

这段代码运行的结果是：

【图片：浏览器里的运行结果】

页面出错了！经过检查发现错误是：在f()里面使用x这个变量的时候，没有加上this.。

【学习方法】写程序不能害怕犯错！

修改以后的代码是：

再次运行代码，现在页面的显示对了：

【图片：浏览器里的运行结果】

【知识点】VueJS里什么时候需要用this.，什么时候不需要用？

如何渲染对象

VueJS的模板里也可以显示对象。我们用学生信息来做个例子：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  学生姓名：{{ student.name }}<br>
  学号：{{ student.id }}<br>
  年龄：{{ student.age }}<br>
  性别：{{ student.gender }}<br>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      student: {
        name: '张小花',
        id: 'S01',
        age: '8',
        gender: '女'
      }
    }
  })
</script>

这段代码运行的结果是：

【图片：浏览器里的运行结果】

显示对象的方法：通过对象的属性就可以直接显示。

能不能直接把对象放在模板里呢？

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  学生：{{ student }}<br>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      student: {
        name: '张小花',
        id: 'S01',
        age: '8',
        gender: '女'
      }
    }
  })
</script>

这段代码运行的结果是：

【图片：浏览器里的运行结果】

你会看到学生信息没有显示出来！

通过以上的学习，我们可以知道：

在VueJS模板{{}}里面可以显示对象的属性
{{}}里面不能直接放对象，否则根本显示不出来。

练习：在VueJS的参考手册里，找一个实例，研究一下怎样修改对象的属性。

如何渲染数组

在VueJS里，我们可以用v-for来显示数组。

我们用菜鸟教程里的v-for来做例子：

https://www.runoob.com/try/try.php?filename=vue2-v-for

这个例子循环显示了一个数组中的所有变量的属性。

结论：

v-for是用来显示数组的
- 通过读文档，你能总结出来使用v-for的一般格式吗？

如何渲染和隐藏内容

VueJS不仅可以通过变量控制页面上显示的文字，还可以用变量显示或隐藏一段内容。

这个功能，是通过v-if来实现的。我们来看这个菜鸟教程上的例子：

https://www.runoob.com/vue2/vue-if.html

从这个例子中我们可以学到：

v-if是用来显示和隐藏内容的。
v-if使用的变量，如果等于true就会显示内容，等于false就会隐藏内容

想要了解怎么写v-if里的变量，可以看这个文档：

https://www.runoob.com/js/js-comparisons.html

如何动态改变内容的长相

页面上的文字、图片等内容，都有各自的长相。有时候，我们不需要改变文字、图片的内容，但需要改变文字、图片的长相，比如文字的大小、颜色，或者图片的长、宽。

VueJS通过v-bind来改变内容的长相。

在菜鸟教程里，没有简单明了的例子。我们看以下这个例子：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  <img src="https://www.runoob.com/images/pulpit.jpg" v-bind:width="w" v-bind:height="h">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      w: 304,
      h: 228
    }
  })
</script>

修改一下data中的w和h，你会看到图片的大小发生了变化。

透过这个例子，我们可以学到：

v-bind不改变页面上文字或图片的内容，但是它改变页面上文字或图片的长相

【学习方法】不要被文档限制住：教程里讲v-bind，上来就用对象做例子，我们要敢于换成简单的例子。

本课小结

重点概念
- 用VueJS可以很方便的通过变量来控制如何显示内容
学习方法
- 程序员必备技能：debug
- 如何读写得不太好的文档：不要被文档限制住

在上一课里，我们学习了VueJS的基本用法，尤其是如何把变量里保存的文字显示在页面模板里。

在这一课， 我们会学习更多用变量来控制页面模板显示的例子。

## 学习目标

1. **理解模板渲染的基本概念**：了解 Vue.js 的模板系统如何将模板和数据结合生成 HTML。
2. **掌握插值**：理解如何使用双大括号进行文本插值，以及如何使用 v-html 指令进行 HTML 插值。
3. **掌握指令**：理解 Vue.js 提供的各种指令，如 v-if、v-else、v-show、v-for、v-on、v-bind、v-model 等，并能在实际项目中使用。
4. **理解计算属性和侦听器**：了解计算属性和侦听器的作用，以及它们与普通方法和属性的区别。
5. **掌握 Class 与 Style 绑定**：学会如何动态地绑定 HTML 元素的 class 和 style。
6. **理解条件渲染和列表渲染**：了解 Vue.js 提供的条件渲染和列表渲染指令，并能在实际项目中使用。
7. **理解过滤器**：了解如何定义和使用过滤器来进行文本格式化。
8. **理解插槽**：了解如何使用插槽进行内容分发，包括默认插槽和具名插槽。
9. **理解组件**：了解如何在模板中使用组件，以及如何通过 props 和自定义事件进行组件间的通信。

## 1. 理解模板渲染的基本概念

Vue.js 使用基于 HTML 的模板语法，允许声明式地将已经渲染的 DOM 绑定至底层 Vue 实例的数据。在 Vue.js 中，模板是一个包含 Vue.js 指令和特殊语法的 HTML 结构。Vue.js 编译模板并创建一个渲染函数，当数据发生变化时，Vue.js 会重新执行渲染函数，生成新的 HTML 结构，并更新到页面上。

## 2. 掌握插值

插值是 Vue.js 模板中最基本的形式，使用双大括号 `{{}}` 包裹表达式，Vue.js 会将它替换为实际的数据值。例如：

```
<p>{{ message }}</p>

```

在这个例子中，`message` 是 Vue 实例的一个数据属性，Vue.js 会将 `{{ message }}` 替换为 `message` 的值。

除了文本插值，Vue.js 还提供了 `v-html` 指令进行 HTML 插值：

```
<p v-html="htmlContent"></p>

```

在这个例子中，`htmlContent` 是包含 HTML 标签的字符串，Vue.js 会将这些 HTML 标签解析并渲染到页面上。

## 3. 掌握指令

Vue.js 提供了一些特殊的特性，称为指令，用于对元素和组件进行操作。所有的 Vue.js 指令都以 `v-` 开头。以下是一些常用的 Vue.js 指令：

- `v-if`、`v-else` 和 `v-else-if`：用于条件渲染。
- `v-show`：用于根据条件切换元素的显示/隐藏。
- `v-for`：用于渲染列表。
- `v-on`：用于监听 DOM 事件。
- `v-bind`：用于绑定元素特性。
- `v-model`：用于在表单元素上创建双向数据绑定。

## 4. 理解计算属性和侦听器

计算属性和侦听器是 Vue.js 提供的两种对数据变化进行响应的方式。计算属性是基于它们的依赖进行缓存的，只有在它的依赖值改变时才会重新求值。侦听器则是当需要在数据变化时执行异步或开销较大的操作时，最有用的地方。

## 5. 掌握 Class 与 Style 绑定

Vue.js 提供了 `v-bind:class` 和 `v-bind:style` 指令用于动态地绑定 HTML 元素的 class 和 style。这使得我们可以根据数据动态地改变元素的样式。

## 6. 理解条件渲染和列表渲染

Vue.js 提供了 `v-if`、`v-else`、`v-else-if` 和 `v-show` 指令进行条件渲染，以及 `v-for` 指令进行列表渲染。理解这些指令的用法和区别，可以帮助我们更好地控制页面的显示。

## 7. 理解过滤器

Vue.js 允许你自定义过滤器，用于文本格式化。过滤器可以用在两个地方：双大括号插值和 `v-bind` 表达式。

## 8. 理解插槽

Vue.js 提供了一种分发内容的机制，称为插槽。通过插槽，我们可以在组件模板中嵌入任意内容。

## 9. 理解组件

在 Vue.js 中，组件是一种自定义元素，可以在模板中使用。理解如何在模板中使用组件，以及如何通过 props 和自定义事件进行组件间的通信，是学习 Vue.js 的重要部分。

## 直接渲染函数运算结果

在`methods`里创建的函数，运算结果可以直接显示在模板里面：

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  请输入一个数字：<input v-model="x"><br>
  这个数字是：{{ x }}<br>
  函数f(x)的计算结果是：{{ f(x) }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      x: 100
    },
    methods: {        
      f() {
        return x*100;
      }
    }
  })
</script>
```

这段代码运行的结果是：

【图片：浏览器里的运行结果】

页面出错了！经过检查发现错误是：在`f()`里面使用`x`这个变量的时候，没有加上`this.`。

```txt
【学习方法】写程序不能害怕犯错！
```

修改以后的代码是：

```html

```

再次运行代码，现在页面的显示对了：

【图片：浏览器里的运行结果】

```txt
【知识点】VueJS里什么时候需要用this.，什么时候不需要用？
```

## 如何渲染对象

VueJS的模板里也可以显示对象。我们用学生信息来做个例子：

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  学生姓名：{{ student.name }}<br>
  学号：{{ student.id }}<br>
  年龄：{{ student.age }}<br>
  性别：{{ student.gender }}<br>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      student: {
        name: '张小花',
        id: 'S01',
        age: '8',
        gender: '女'
      }
    }
  })
</script>
```

这段代码运行的结果是：

【图片：浏览器里的运行结果】

显示对象的方法：通过对象的属性就可以直接显示。

能不能直接把对象放在模板里呢？

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  学生：{{ student }}<br>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      student: {
        name: '张小花',
        id: 'S01',
        age: '8',
        gender: '女'
      }
    }
  })
</script>
```

这段代码运行的结果是：

【图片：浏览器里的运行结果】

你会看到学生信息没有显示出来！

通过以上的学习，我们可以知道：

- 在VueJS模板`{{}}`里面可以显示对象的属性
- `{{}}`里面不能直接放对象，否则根本显示不出来。

练习：在VueJS的参考手册里，找一个实例，研究一下怎样修改对象的属性。

## 如何渲染数组

在VueJS里，我们可以用`v-for`来显示数组。

我们用菜鸟教程里的`v-for`来做例子：

https://www.runoob.com/try/try.php?filename=vue2-v-for

这个例子循环显示了一个数组中的所有变量的属性。

结论：

- `v-for`是用来显示数组的
  - 通过读文档，你能总结出来使用`v-for`的一般格式吗？

## 如何渲染和隐藏内容

VueJS不仅可以通过变量控制页面上显示的文字，还可以用变量显示或隐藏一段内容。

这个功能，是通过`v-if`来实现的。我们来看这个菜鸟教程上的例子：

https://www.runoob.com/vue2/vue-if.html

从这个例子中我们可以学到：

- `v-if`是用来显示和隐藏内容的。
- `v-if`使用的变量，如果等于`true`就会显示内容，等于`false`就会隐藏内容

想要了解怎么写`v-if`里的变量，可以看这个文档：

https://www.runoob.com/js/js-comparisons.html

## 如何动态改变内容的长相

页面上的文字、图片等内容，都有各自的长相。有时候，我们不需要改变文字、图片的内容，但需要改变文字、图片的长相，比如文字的大小、颜色，或者图片的长、宽。

VueJS通过`v-bind`来改变内容的长相。

在菜鸟教程里，没有简单明了的例子。我们看以下这个例子：

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  <img src="https://www.runoob.com/images/pulpit.jpg" v-bind:width="w" v-bind:height="h">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      w: 304,
      h: 228
    }
  })
</script>
```

修改一下`data`中的`w`和`h`，你会看到图片的大小发生了变化。

透过这个例子，我们可以学到：

- v-bind不改变页面上文字或图片的内容，但是它改变页面上文字或图片的长相

```html
【学习方法】不要被文档限制住：教程里讲v-bind，上来就用对象做例子，我们要敢于换成简单的例子。
```

## 本课小结

- 重点概念
  - 用VueJS可以很方便的通过变量来控制如何显示内容
- 学习方法
  - 程序员必备技能：debug
  - 如何读写得不太好的文档：不要被文档限制住