Vuejs_0">什么是Vue.js?
Vue（读/vjuː/）是一个用于构建用户界面的渐进式框架，不同于其它的大框架，Vue是被设计为自底向上适应的，核心库集中在视图层，容易使用以及和其它的库或已经存在的项目集成。另一方面，当和 modern tooling 和 supporting libraries 结合的时候，Vue完全能够为单网页应用提供支持。
如果你是一个有经验的前端开发人员，想要知道Vue和其他库的对比，移步 Comparison with Other Frameworks。
开始
官方假定你已经掌握了中级的HTML，CSS和JavaScript知识，如果你是新手，先看这个框架可能并不是一个好主意，你可以看完基础知识再回来，其他框架的经验会有帮助，但不是必须的。
最容易的方式是使用JSFiddle Hello World example尝试使用Vue.js。
声明式渲染
Vue允许我们在DOM通过模板语法声明的方式直接渲染数据
<div id="app">
{{message}}
</div>
var app = new Vue({
el: '#app'
date:{
message: 'Hello Vue'
}
})
Hello Vue
DOM元素虽然实时响应了数据，但他们之间并没有连接，也就是说你可以访问DOM元素改变message的值，值会实时改变。
元素属性绑定
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data:{
messge:'You loaded this page on' + new Date().toLocalString()
}
})
Hover your mouse over me for a few seconds to see my dynamically bound title!
v-bind:
v-表示由Vue提供，它会使用指定的交互行为去渲染DOM，这里的意思是使用message属性的最新值给到title
条件和循环
v-if根据条件渲染元素
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
Now you seen me
v-for指令可以把一个数组数据显示为一个列表条目
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
1.Learn JavaScript <br>
2.Learn Vue<br>
3.Build something awesome
处理用户输入
使用v-on指令去实现事件监听，在Vue实例里面调用methods
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">
REverse Message
</button>
</div>
var app5 = new Vue({
el: '#app-5'，
data：{
message：'Hello Vue.js!'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
点击Reverse Message 按钮
Note：在这个方法里面会更新app的所有状态，无需触发DOM，所有DOM通过Vue管理，我们只需要集中写代码的逻辑。
v-model使我们输入框的值和app 状态间双向绑定
<div id="app-6">
<p>
{{ message }}
</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
Vue" />
组件组成
组件系统是Vue的另一个重要原则，它是一个抽奖概念，可以让我们把一些小的、自包含的、可复用的组件组成大的应用。
// Define a new component called todo-item
Vue.component('todo-item',{
template: '<li>This is a todo</li>'
})
new Vue({
el:'#app-8'
})
现在可以在另一个组件模板里使用它
<ol id="app-8">
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
上面这个文本是写死的，我们希望数据能够在父级作用域传递数据给子控件，我们修改我们的组件，给到一个prop
Vue.component('todo-item',{
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo']
template: '<li>{{ todo.text }}</li>'
})
现在我们使用v-bind传递组件给todo属性。
<div id="app-7">
<ol>
<!-- 现在我们提供给todo-item一个todo对象，它的内容是动态的。我们也需要提供给每一个组件一个“key”，稍后解释 -->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item',{
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
1.Vegetables<br>
2.Cheese<br>
3.Whatever else humans are supposed to eat
这一次，我们把component分成两个小单元，子控件通过props解耦了，我们在不影响父控件的基础上把他变得更为复杂。
为了更大的应用场景，我们通常需要把整个应用内的组件分离，后面会讨论，我们先虚拟一个例子：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-conent></app-conent>
</app-view>
</div>
关于自定义元素
你可能注意到了Vue的组件和自定义元素非常相似，它们是 Web Components Spec的一部分，因为Vue的组件语法是在spec之后的大致模仿。Vue组件实现了Slot API和is的特有属性。然而，它们是不同的：
