使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单，先看看几个例子：

    例一：Helloworld

    html代码：

let arr = [1,2,3]

 

     
          {
   { message }}
     

    js代码：

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

    例二：双向绑定

    说明：html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。

    html代码：

     
    
      
{
   { message }}
    
      
     

    js代码：

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

    例三：渲染列表

    说明：v-for表示遍历集合数据，下面的代码遍历集合todos并输出每项。

    html代码：

     
    
      
        
       
        {
   { todo.text }}        
    
      
     

    js代码：

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

    例四：事件绑定

    说明：v-on是vue.js特性，表示绑定事件方法。

    html代码：

     
    
      
{
   { message }}
    
      Reverse Message
     

    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是怎么定义这两大功能的。