这个元素；

data属性指向Model，data:message表示我们的Model是message对象。Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{message}}会被数据对象的message属性替换，所以页面上会输出"HelloWorld!"。

首先我们先解释一下什么是双向绑定，Vue框架很核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到Vue对象，另外反方向数据也是绑定的。MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。将message绑定到文本框，当更改文本框的值时，{{message}}中的内容也会被更新。反之，如果改变message的值，文本框的值也会被更新。反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。

下面的栗子是在表单控件元素（input等）上创建双向数据绑定（数据源）；跟Angular中ng-model用法一样。

上面用到的v-model是Vue.js常用的一个指令，那什么是指令呢？

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性。

Vue.js提供了一些常用的内置指令，接下来就给大家介绍几个Vue中的常用指令：

1、v-if指令

2、v-else指令

3、v-show指令

4、v-for指令

5、v-on指令

6、v-bind指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素,这个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。

123456789

Hello,Vue.js!

10Yes11No12=12">Age:{{age}}13