Vue.js 是一个轻量级的 JavaScript 库，它可以帮助开发者快速构建用户界面。它的核心思想是：数据驱动和组件化。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 的入门很容易，你只需要几分钟就能上手。你可以在 HTML 页面中引入 Vue.js 库，然后使用 JavaScript 代码来创建 Vue 实例，并将数据和方法绑定到 DOM 元素上。
// 创建 Vue 实例
var vm = new Vue({
el: '#app', // DOM 元素，即 view
data: { // 数据对象
message: 'Hello World!'
},
methods: { // 方法对象
sayHello: function() {
this.message = 'Hello!';
}
}
});
Vue.js 还有一些强大的特性，如模板语法、虚拟 DOM、事件处理、路由、状态管理、服务端渲染、代码分割、代码优化、ESLint 等。这些特性使得 Vue.js 成为一个强大而易于使用的前端开发工具。
我们以 Vue 数据绑定的快速导览开始。如果你对高级概述更感兴趣，可查看这篇博文。
尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。
<div id="app">
{{ message }}
</div>new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
}){% raw %}
<div id="app" class="demo">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
{% endraw %}<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
}){% raw %}
<div id="app2" class="demo">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app2',
data: {
message: 'Hello Vue.js!'
}
})
</script>
{% endraw %}<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' }
]
}
}){% raw %}
<div id="app3" class="demo">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app3',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
{% endraw %}<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('')
}
}
}){% raw %}
<div id="app4" class="demo">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app4',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
{% endraw %}<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)
}
}
}){% raw %}
<div id="app5" class="demo">
<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>
<script>
new Vue({
el: '#app5',
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)
}
}
})
</script>
{% endraw %}希望上例能让你对 Vue.js 的工作原理有一个基础概念。我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。
Vue 实例构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例：var vm = new Vue({// 选项})一个 Vue 实例...