Vue简介
Vue是什么？
Vue (发音 /vju:/, 类似于view) 是构建用户界面的先进框架。它不像其他全能的框架，Vue是从头开始逐渐设计起来的。核心库只专注于视图层，它非常容易上手并且可以与其他库或现有的项目进行整合。在另一方面，当与相关工具和支持库结合使用时，Vue也能完美的驱动复杂的单页面应用。
如果你是一名有经验的前端工程师并且想知道Vue和其他库/框架的区别，查看 Comparison with Other Frameworks
入门
尝试Vue.js的最简单的方法用 JSFiddle Hello World example 。随意在另一个选项卡里打开它，接下来我们通过一些基础案例。如果你喜欢从一个包管理器下载/安装，查看 安装 页面。
声明式渲染
Vue.js的核心系统使我们能用声明的方式使简单的模块语法渲染数据到DOM中
HTML:
<div id="app">
{{message}}
</div>
JS:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})
运行结果：
Hello Vue
我们已经构建了第一个Vue应用！看起来非常像仅渲染了一个字符串模块，但是Vue在底层做了很多事。DOM会自动响应数据的变化，我们怎么知道？打开你浏览器javascript控制台并设置 app.message 不同的值。在上述相关的更新中，你应该会看到渲染过例子。
除了文本插值，我们也能绑定元素属性，比如这样：
HTML
<div id="app-2">
<span v-bind:id="id"><span>
</div>
JS
var app2 = new Vue({
el: '#app2',
data: {
id: 'inspect-me'
}
})
运行结果
inspect me
在这里我们遇到新的东西。你看到的 v-bind 属性是一个指令。指令前缀用 v- 表示它们是由Vue提供的特殊属性，正如你可能猜想到的，它们应用特殊反应行为渲染DOM。这基本来说：“在Vue实例中，绑定元素 id 变量到 id 属性”。
用浏览器开发工具查看元素，你会看到id的值是 inspect-me 。是的，如果在控制台里修改 app2.id ,它也会被更新。
<div id="app-2">
<span id="inspect-me">Inspect me</span>
</div>
条件和循环
切换元素的显示/隐藏非常简单，如下：
HTML:
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
JS:
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
运行结果：
Now you see me
在控制台继续输入app3.seen = false . 你会看到此信息被隐藏。
这个案例演示,我们不仅可以绑定数据到文本和属性，也可以到DOM结构里。除此之外，Vue也提供一些强有力的过度效果系统，当元素通过Vue被插入/更新/被移除时，这个系统能自动运用过渡效果。
还有不少其他指令，每个指令都有它自己独特的功能。比如，v-for 指令通过一组数组，能被用于显示数据项的列表。
HTML：
<div>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
JS:
var app4 = new Vue({
el: '#app-4',
todos:[
{ text: 'Learn Javascript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
})
运行结果：
1. Learn Javascript
2. Learn Vue
3. Build Something awesome
在控制台里输入 app4.todos.push({ text: 'New item' }) 。你会看到一个新的选项添加到这个列表中了。
处理用户输入
为了让用户与应用互动，在我们Vue实例中，我们用 v-on 指令附加事件监听器来调用方法。
HTML：
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
JS：
var app5 = new Vue({
el: '#app-5',
data: {
message:'Hello Vue.js!'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
运行结果：
Hello Vue.js
点击按钮后结果
!sj.euV olleH
注意：在方法里，我们没有碰DOM,我们仅更新了应用程序的状态。所有的DOM操作是通过Vue处理的，并且你写的代码是专注于底层逻辑。
Vue也提供 v-model 指令使表单输入和应用程序状态之间轻易的实现双向绑定。
HTML:
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
JS:
var app6 = new Vue({
el:'#app-6',
data:{
message: 'Hello Vue!'
}
})
运行结果：
Hello Vue!
如果你改变输入框里的值，显示的文本也会跟着变动。
使用组件组成
在Vue里，组件系统是另外一个重要的概念，因为它是使我们能够建立小型的，独立的，而且可重用的组件组成的大型应用程序的抽象。如果我们仔细想想，几乎任何类型的应用程序接口能被抽象成一棵组件树：
image
在Vue里，一个组件实质上是一个预先定义过的选项的Vue实例。注册组件是非常容易的。
JS:
// 定义一个组件为todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
现在你可以用其他组件的模板来组合它。
HTML:
<ul>
<!--
创建一个todo-item组件实例输出数据中的dotos数组
-->
<todo-item v-for="todo in todos"></todo-item>
</ul>
但是这为每个todo渲染相同的文本，这个不是我们要的效果。我们应该能够从父作用域传递数据到子组件里。让我们修改组件定义，让其接受一个 prop :
Vue.component('todo-item', {
/* todo-item组件接受一个“prop”,
它像一个自定义属性。这个属性叫todo
*/
props:['todo'],
template:'<li>{{ todo.text }}</li>'
})
现在我们用 v-bind 传递todo数据到每个重复组件里。
HTML:
<div id="app7">
<ol>
<todo-item v-for="todo in todos" v-bind:todo="todo">
</ol>
</div>
JS:
var app7 = new Vue({
el: '#app-7',
data: {
todos: [
'Learn JavaScript',
'Learn Vue',
'Build something awesome'
]
}
})
运行结果：
1. Learn Javascript
2. Learn Vue
3. Build Something awesome
网友评论