Vue.js系列（一）介绍

Vue.js

首先，学习Vue.js的第一步，便是了解Vue.js是什么？

这里引用Vue.js官网的一句话：“Vue是一套用于构建用户界面的渐进式框架”。

渐进式框架

那么，什么是渐进式框架呢？

这里引用“Vue作者尤雨溪：Vue 2.0，渐进式前端解决方案”这篇文章里作者尤雨溪的说法：“我在做Vue的过程中也在不停地思考它的定位，现在，我觉得它与其他框架的区别就是渐进式的想法，也就是“Progressive”——这个词在英文中定义是渐进，一步一步，不是说你必须一竿子把所有的东西都用上”。

这里，我们来看一张图：

声明式渲染和组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。而所谓的渐进式框架就是指，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。

使用

那么，如何使用Vue呢？

最简单的办法就是直接通过

2.生产版本 删除了警告

生产版本可以带来比开发环境下更快的速度体验，可以在最终发布的站点中使用，但在开发过程中，建议使用开发版本。

实例

我们可以通过向Vue函数传入一个选项对象创建一个Vue实例：

var app = new Vue({
  // 选项
})

接下来我们编写一个简单的例子：

    
        
        
         
    
    
        

            
{{message}}
        
        
    

显示效果如下：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，在这个例子中，我们创建了一个Vue应用"app"，将数据和DOM建立起了关联，现在，

的内容是响应式的了，我们在浏览器的控制台修改app.message的值，可以看到

的内容相应的更新，如下图所示：

在这个例子中我们可以看到，Vue实例通过传入的选项对象的el属性的值绑定DOM元素，并向Vue的响应式系统中加入data对象的所有属性，当这些属性的值发生改变时，视图会进行重渲染，即所谓的“响应”。

以上，便是此次对Vue.js的简单介绍，水平有限，如有错误，还请批评指正。