起步

我们以 Vue 数据绑定的快速导览开始。如果你对高级概述更感兴趣，可查看这篇博文。

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。

Hello World

<div id="app">
 {{ message }}
</div>

new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 }
})

双向绑定

<div id="app">
 <p>{{ message }}</p>
 <input v-model="message">
</div>

new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 }
})

渲染列表

<div id="app">
 <ul>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
 </ul>
</div>

new Vue({
 el: '#app',
 data: {
 todos: [
 { text: 'Learn JavaScript' },
 { text: 'Learn Vue.js' },
 { text: 'Build Something Awesome' }
 ]
 }
})

处理用户输入

<div id="app">
 <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 },
 methods: {
 reverseMessage: function () {
 this.message = this.message.split('').reverse().join('')
 }
 }
})

综合

<div id="app">
 <input v-model="newTodo" v-on:keyup.enter="addTodo">
 <ul>
 <li v-for="todo in todos">
 <span>{{ todo.text }}</span>
 <button v-on:click="removeTodo($index)">X</button>
 </li>
 </ul>
</div>

new Vue({
 el: '#app',
 data: {
 newTodo: '',
 todos: [
 { text: 'Add some todos' }
 ]
 },
 methods: {
 addTodo: function () {
 var text = this.newTodo.trim()
 if (text) {
 this.todos.push({ text: text })
 this.newTodo = ''
 }
 },
 removeTodo: function (index) {
 this.todos.splice(index, 1)
 }
 }
})

希望上例能让你对 Vue.js 的工作原理有一个基础概念。我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。