click="reverseMessage">ReverseMessage
newVue（{
el:
'#app',
data:
{
message:
'HelloVue.js!
'
},
methods:
{
reverseMessage:
function（）{
this.message=this.message.split（''）.reverse（）.join（''）
}
}
}）
HelloVue.js!
ReverseMessage
综合
keyup.enter="addTodo">
{{todo.text}}
click="removeTodo（$index）">X
newVue（{
el:
'#app',
data:
{
newTodo:
'',
todos:
[
{text:
'Addsometodos'}
]
},
methods:
{
addTodo:
function（）{
vartext=this.newTodo.trim（）
if（text）{
this.todos.push（{text:
text}）
this.newTodo=''
}
},
removeTodo:
function（index）{
this.todos.splice（index,1）
}
}
}）
∙Addsometodos X
希望上例能让你对Vue.js的工作原理有一个基础概念。
我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。
概述
Innovative&powerful.Over100elements,230styles,and18headerstyles.adsviaCarbon
Vue.js（读音/vjuː/,类似于 view）是一个构建数据驱动的web界面的库。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js自身不是一个全能框架——它只聚焦于视图层。
因此它非常容易学习，非常容易与其它库或已有项目整合。
另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。
如果你是有经验的前端开发者，想知道Vue.js与其它库/框架的区别，查看对比其它框架；如果你对使用Vue.js开发大型应用更感兴趣，查看构建大型应用。
响应的数据绑定
Vue.js的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。
在使用jQuery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。
Vue.js拥抱数据驱动的视图概念。
通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。
一旦创建了绑定，DOM将与数据保持同步。
每当修改了数据，DOM便相应地更新。
这样我们应用中的逻辑就几乎都是直接修改数据了，不必与DOM更新搅在一起。
这让我们的代码更容易撰写、理解与维护。
可能是最简单的例子：
--这是我们的View-->
Hello{{name}}!
//这是我们的Model
varexampleData={
name:
'Vue.js'
}
//创建一个Vue实例或"ViewModel"
//它连接View与Model
varexampleVM=newVue（{
el:
'#example-1',
data:
exampleData
}）
结果：
Hello Vue.js!
看起来这跟单单渲染一个模板非常类似，但是Vue.js在背后做了大量工作。
并且DOM会自动响应数据的变化。
我们如何知道？
打开你的浏览器的控制台，修改exampleData.name，你将看到上例相应地更新。
注意我们不需要撰写任何DOM操作代码：
被绑定增强的HTML模板是底层数据状态的声明式的映射，数据不过是普通JavaScript对象。
我们的视图完全由数据驱动。
让我们来看第二个例子：
Hello!
varexampleVM2=newVue（{
el:
'#example-2',
data:
{
greeting:
true
}
}）
Hello!
这里我们遇到新东西。
你看到的 v-if 特性被称为指令。
指令带有前缀 v-，以指示它们是Vue.js提供的特殊特性。
并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。
继续在控制台设置 exampleVM2.greeting 为 false，你会发现“Hello!
”消失了。
第二个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM 结构 到数据。
而且，Vue.js也提供一个强大的过渡效果系统，可以在Vue插入/删除元素时自动应用过渡效果。
也有一些其它指令，每个都有特殊的功能。
例如 v-for 指令用于显示数组元素，v-bind指令用于绑定HTML特性。
我们将在后面详细讨论全部的数据绑定语法。
组件系统
组件系统是Vue.js另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。
如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
实际上，一个典型的用Vue.js构建的大型应用将形成一个组件树。
在后面的教程中我们将详述组件，不过这里有一个假想的例子，看看使用了组件的应用模板是什么样的：
你可能已经注意到Vue.js组件非常类似于自定义元素——它是 Web组件规范的一部分。
实际上Vue.js的组件语法参考了该规范。
例如Vue组件实现了 SlotAPI 与 is 特性。
但是，有几个关键的不同：
1.Web组件规范仍然远未完成，并且没有浏览器实现。
相比之下，Vue.js组件不需要任何补丁，并且在所有支持的浏览器（IE9及更高版本）之下表现一致。
必要时，Vue.js组件也可以放在原生自定义元素之内。
2.Vue.js组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。
组件系统是用Vue.js构建大型应用的基础。
另外，Vue.js生态系统也提供了高级工具与多种支持库，它们和Vue.js一起构成了一个更加“框架”性的系统。
Vue实例
JupiteristhefastestandlightestWordPressthemeever.Unparalleledperformance.adsviaCarbon
构造器
每个Vue.js应用的起步都是通过构造函数 Vue 创建一个 Vue的根实例：
varvm=newVue（{
//选项
}）
一个Vue实例其实正是一个 MVVM模式中所描述的ViewModel-因此在文档中经常会使用vm 这个变量名。
在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
全部的选项可以在API文档中查看。
可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：
varMyComponent=Vue.extend（{
//扩展选项
}）
//所有的`MyComponent`实例都将以预定义的扩展选项被创建
varmyComponentInstance=newMyComponent（）
尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中。
我们将在后面详细说明组件系统。
现在你只需知道所有的Vue.js组件其实都是被扩展的Vue实例。
属性与方法
每个Vue实例都会代理其 data 对象里所有的属性：
vardata={a:
1}
varvm=newVue（{
data:
data
}）
vm.a===data.a//->true
//设置属性也会影响到原始数据
vm.a=2
data.a//->2
//...反之亦然
data.a=3
vm.a//->3
注意只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
我们将在后面详细讨论响应系统。
除了这些数据属性，Vue实例暴露了一些有用的实例属性与方法。
这些属性与方法都有前缀 $，以便与代理的数据属性区分。
例如：
vardata={a:
1}
varvm=newVue（{
el:
'#example',
data:
data
}）
vm.$data===data//->true
vm.$el===document.getElementById（'example'）//->true
//$watch是一个实例方法
vm.$watch（'a',function（newVal,oldVal）{
//这个回调将在`vm.a`改变后调用
}）
参考API文档查看全部的实例属性与方法。
实例生命周期
Vue实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。
在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。
例如 created 钩子在实例创建后调用：
varvm=newVue（{
data:
{
a:
1
},
created:
function（）{
//`this`指向vm实例
console.log（'ais:
'+this.a）
}
}）
//->"ais:
1"
也有一些其它的钩子，在实例生命周期的不同阶段调用，如 compiled、 ready、destroyed。
钩子的 this 指向调用它的Vue实例。
一些用户可能会问Vue.js是否有“控制器”的概念？
答案是，没有。
组件的自定义逻辑可以分割在这些钩子中。
生命周期图示
下图说明了实例的生命周期。
你不需要立马弄明白所有的东西，不过以后它会有帮助。
数据绑定语法
Vue.js的模板是基于DOM实现的。
这意味着所有的Vue.js模板都是可解析的有效的HTML，且通过一些特殊的特性做了增强。
Vue模板因而从根本上不同于基于字符串的模板，请记住这点。
插值
文本
数据绑定最基础的形式是文本插值，使用“Mustache”语法（双大括号）：
Message:
{{msg}}
Mustache标签会被相应数据对象的 msg 属性的值替换。
每当这个属性变化时它也会更新。
你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：
Thiswillneverchange:
{{*msg}}
原始的HTML
双Mustache标签将数据解析为纯文本而不是HTML。
为了输出真的HTML字符串，需要用三Mustache标签：
{{{raw_html}}}
升级会员 