【项目实战】Vue.js 模板语法

一、什么是Vue.js 模板语法

Vue.js 模板语法允许你声明式地将数据绑定到 DOM（文档对象模型）。
Vue.js 的核心是一个允许采用简洁的模板语法，来声明式的将数据渲染进 DOM 的系统。
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 使用基于 HTML 的模板语法，允许你使用双大括号 { { }} 来插值表达式，以及一些特殊的 HTML 属性，如 v-bind、v-on、v-if、v-for 等来绑定属性、事件、条件渲染和列表渲染等。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

二、Vue.js 模板语法的基本例子

下面是一些 Vue.js 模板语法的基本例子，注意：Vue.js 的模板语法是基于 HTML 的，但是并不限于 HTML。Vue.js 模板语法被设计用来在 HTML 中表达 JavaScript 逻辑，而不是替代 JavaScript。对于复杂逻辑，你应该使用 JavaScript，而不是模板语法。

2.1 插值表达式

数据绑定最常见的形式就是使用 { {…}}（双大括号）的文本插值：
使用双大括号 { { }} 来绑定数据到 HTML。