使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单，先看看几个例子：
例一：Helloworld
html代码：
let arr = [1,2,3]
<div id="app">
{{ message }}
</div>
js代码：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
例二：双向绑定
说明：html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。
html代码：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js代码：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
例三：渲染列表
说明：v-for表示遍历集合数据，下面的代码遍历集合todos并输出每项。
html代码：
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
js代码：
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
例四：事件绑定
说明：v-on是vue.js特性，表示绑定事件方法。
html代码：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
js代码：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
看完上面的4个例子，感觉vue.js挺容易入门，确实是这样，不得不说vue.js深受开发人员喜爱，简单易学。前面的例子只是展示了如何使用vue.js，但它到底包含了哪些功能？vue.js提供了两大核心功能：响应的数据绑定、视图组件化。接下来我们看看vue.js是怎么定义这两大功能的。
