动静结合 · Vue 模板

在《前端小课》第一、二阶段讲的 HTML 都是静态，可以通过 JavaScript 操作 DOM，达到动态修改页面的内容或样式。操作 DOM是 jQuery 擅长做的事情。现在使用 Vue 可以通过修改数据来「自动」修改页面的样式或内容，这使得开发者只需关注数据的变化即可，无需操作 DOM。那么 Vue 是如何把数据与模板绑定起来的呢？

Vue 使用的是「增强版」的 HTML 模板，为什么说它是增强版的呢？因为在原先的 HTML 模板中，加入了 Vue 特制的「指令」，这些指令目的很明确，就是能够让 Vue 实例中的数据与模板进行绑定，以达到通过数据来控制页面的内容、样式和布局。关于 Vue 实例，在 一个页面 Vue 实例只能有一个吗？这节内容中有详细的说明。

在我看来，学习 Vue 需要先从「咋样写 Vue 模板」开始，模板的学习主要有几个方面：

1、通过 {{ xxx }} 把模板中要显示的内容与 Vue 实例中的 data 进行绑定，以达到自动更新；

2、内容显示指令的使用场景，以及各个指令使用区别，比如 v-if 、v-for、v-show、v-model、v-text、v-html、v-model、v-once；

3、修改 css 样式和布局指令，v-bind、v-bind:class、v-bind:style；

4、事件处理指令，v-on:xxx；

5、数据的不同处理方式，计算属性、过滤器；

我们看几个例子

例 1：本例通过 if 指令来控制页面中该显示哪句话，if 中的表达式依赖于 type 这个值，第 7 行代码添加了一个按钮用来修改这个值，并绑定了事件监听函数 nextAction：

有了模板以后，还需要一个 Vue 实例与模板进行关联。Vue 实例 vm 中有一个 data 属性用来返回与模板要绑定的数据，本例中定义了一个 type，默认值为 0。当点击按钮「下一步」的时候，会修改 type 的值，这时候页面会循环显示：我想学习前端、Vue虚拟实验室等你、前端小课等你、关注公众号：素燕，这四句话。

例 2：修改样式

通过修改标签的选择器和 style 可以修改 HTML 元素的样式。比如例子中通过 isBlue、isSmall 来控制 div 是否包含 blue、small 选择器。动态修改 style 样式。

模板需要创建一个 Vue 实例：

Vue 虽然可以通过数据源来动态修改页面数据、CSS 样式和布局，但是开发者的需求是无穷的，为了给开发者提供更好的开发体验，Vue 还有很多特性，比如计算属性、侦听器、过滤器，并加入了组件的生命周期。 那么 Vue 都支持哪些指令呢？

记得「Vue 虚拟实验室」有小伙伴分享了这些指令，我来做个汇总，每一条指令都是为了满足不同的需求：

1、v-text

2、v-if、v-else-if、v-else

3、v-bind

4、v-show

5、v-for

6、v-on

7、v-model

8、v-html

9、v-once

总之 HTML 模板为 Vue 提供了「渲染页面」的初始”材料“，不同的指令为 Vue 渲染页面指定了渲染策略，并告诉 Vue 该如何把 HTML 元素与数据进行绑定，最终达到「响应式」的目的。

大家加油。目前 Vue 虚拟实验室 空出来 1 个名额，想加入的小伙伴联系我，优先考虑正在学习或使用 Vue 的同学。

---

推荐阅读：

关于 Vue 中计算与侦听属性的一些思考

创建第一个 Vue 项目

一个页面 Vue 实例只能有一个吗？