1.创建Vue实例？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> <script src="vue.js"></script> </head> <body> <div id = 'app'> <h5>site:{{site}}}</h5> <h5>url:{{url}}</h5> <h5>{{details()}}</h5> </div> <script> var app = new Vue({ el:'#app', data:{ site:'菜鸟教程', url:"www.runoob.com", alexa:'10000' }, methods:{ details:function(){ return this.site + '- dream,wake up !' } } }) </script> </body> </html>
每个Vue程序首先使用以下函数创建一个Vue的实例：
var vm = new Vue({details options})
尽管 与MVVM没有关联，但vue的设计模式受其启发，所以我们经常会用vm作为（ViewMode）的缩写，来引用我们的vue实例。
Vue中的数据与方法？
创建vue实例时，它会将data中找到的所有属性添加到vue的反应系统中，当这些属性的值发生变化时，视图将反应、更新，以匹配新值。
//我们的数据对象
var data = { a：1 }
//将对象添加到Vue实例
var vm = new Vue（{
data：data
}）
//获取实例上的属性
//返回原始数据中的
属性vm.a == data.a // => true
//在实例上设置属性
//也会影响原始数据
vm.a = 2
data.a // => 2
// ...反之亦然
data.a = 3
vm.a // => 3
当数据修改时，视图会重新呈现，
如果你知道你以后需要一个属性，但它开始是空的或不存在的，你需要设置一些初始值。例如：
data：{
newTodoText：''，
visitCount：0，
hideCompletedTodos：false，
todos：[]，
error：null
}
模板语法：
插补：
（1）文本：最基本的数据绑定形式是使用“mustache”语法，双花括号的文本差值。
< span >消息：{{msg}} </ span >
mustache将替换msg相应数据对象上的属性值。每当数据对象上的msg的属性值发生变化时，它也会更新。
您还可以使用v-once指令执行不会更新数据更改的一次性插值，但请记住，这也会影响同一节点上的任何其他绑定：
< span v-once >这永远不会改变：{{msg}} </ span >
（2）原始HTML
双花括号将数据对象中的“<a href = 'http://www.baidu.com'>点我</a>”属性解释为纯文本，而不是HTML，要输入真实的HTML，需要使用指令“v-html”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> <script src="vue.js"></script> </head> <body> <div id = 'app'> <h5 v-html = 'url'></h5> </div> <script> var app = new Vue({ el:'#app', data: { url: "<a href = 'http://www.cnblogs.com/zsdbk'>message</a>", } }) </script> </body> </html>
注：在网页上动态呈现HTML可能非常危险，因为它很容易导致xss漏洞，所以请对信任的内容进行插值操作。
（3）属性：
Mustaches不能再HTML中使用，但是可以用v-bind指令。
< button v-bind：disabled = “isButtonDisabled” >按钮</ button >
如果数据对象中isButtonDisabled的属性值是null,undefiend,false,那么disabled 属性不会再当前button标签中生效。
（4）使用JavaScript表达式；
vue.js 支持JavaScript中的所有数据绑定功能
例如：
{{ 号 + 1 }}
三元运算：
{{ 好？'是':‘不’}}
{{ message.split(''),reverse(''),join('') }}
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}
指令(directives)：
是带有v-前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
<p v-if="seen">现在你看到我了</p>
如果‘seen’的值为真，则在视图中显示所插入的文本内容，否则则不显示此标签。
（1）参数：
v-bind指令可以接收一个参数，并且响应式的更新html特性。
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
v-on指令用于监听DOM事件。
<a v-on:click="doSomething">...</a>
在这里参数是监听的事件名。
（2）修饰符：
修饰符（modifiers）是以半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。
例如，
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
用于阻止form表单的submit默认事件。(阻止 submit .prevent)
缩写：
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>