, data:{ message:数组堆叠} })

第二种（选用script原素）HTML5国际标准以后的读法

new Vue({ el:”#app”, template:#tem, data:{ message:HTML5国际标准以后的读法，存有很大弊病（可另行google）后HTML5正式发布的template原素填补了此形式的优点}})

第四种（选用template原素）HTML5国际标准后的读法【第四种的升级版】

new Vue({ el:”#app”, template:#tem, data:{ message:HTML5中的template标签,注意：// template是HTML5中的标签，//不是自定义标签，//也不是Vue中的模块]}})

在页面中选用

属性

HTML 属性中的值应选用 v-bind 指令。

对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

按钮

以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在图形出来的原素中。

以下示例判断 use 的值，如果为 true 选用 class1类的样式，否则不选用该类：

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

表达式会在当前活动示例的统计数据作用域下作为 JavaScript 被解析。有个限制是，每个存取都只能包含单个表达式，所以下面的例子都不会生效:

{{ var a =1 }}{{ if (ok){ return message }}}

指令

指令是带有 v-前缀的特殊属性。

指令用于在表达式的值发生改变时，将某些行为应用领域到 DOM 上。

这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 原素。

另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以存取数组的统计数据来图形两个项目列表：

示例

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来积极响应地更新 HTML 属性：

在这里 href 是参数，告知 v-bind 指令将该原素的 href 属性与表达式 url 的值存取。

另两个例子是 v-on 指令，它用于监听 DOM 事件：

………

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号. 指明的特殊后缀，用于指出两个指令应该以特殊形式存取。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

用户输入

在 input 输入框中我们可以选用 v-model 指令来实现双向统计数据存取：

双向统计数据存取

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-on 缩写

试例：

1、统计数据控制 input 原素是否禁止编辑

v-bind:disabled =”myDisabled”，统计数据存取 disabled 属性

2、只取第一次的统计数据

选用 v-once 修饰后，message 只取 data 中 message 的第一次赋值，这里显示 hello，而不是 hello world

3、统计数据控制原素是否显示

4、统计数据与 title 属性存取

选用 v-bind:title=”title”将 data 中的 title 变量与 template 中的 title 属性存取

5、为原素添加事件

选用 v-on:click=”myClick”，将 methods 中的 myClick 方法存取为点击事件。

6、动态属性

[attribute]=”title”，属性也与统计数据关联

7、动态事件