vue | 创建vue 实例

好久没写了，距离上一篇vue的分享是有一段时间了。今天继续科普，重点还是讲一下vue实例。如何创建，其实很简单，按照例子写就成。

通过关键语句 new Vue( )我们就可以创建一个Vue实例：vm了。

我们可以理解vue其实是一个超级大集合的插件，最本质也就是说是一个构造函数，里面有很多方法和逻辑处理。每一个组件都是一个vue实例，实例化vue我们就需要new这个构造函数。

我们注意到了我们给Vue( )传了一个参数选项，是一个空对象，我们接着往下看。

第2步设置data数据

没错，vue实例是有很多参数的，这第一个与数据有关的就是data了，每个vue实例都会代理其data对象里所有的属性。

写法也很简单，参数对象不再是一个空对象，它包含一个属性：data，而data的值也是一个对象，这个对象就是我们给实例vm设置的数据了。比如：name为张三，age为21等等。

这些被代理的属性是响应的，如果你把它绑定到了页面上，如果值改变那页面对应的也会更新。第三步介绍。

第3步挂载元素

创建了一个实例vm，设置了vm的data属性后，我们就要把这些数据绑定到页面视图上，这就需要挂载元素了。看看？

视图view部分：

视图（html部分）上我们有一个id为”app”的div元素。

我们看到参数中我们不但有属性“data”，还多了个属性：“el”，el参数提供一个在页面上已经存在的DOM元素，作为我们实例vm的挂载目标。表示我们的实例vm和id为app的DOM节点就关联起来了。

第4步挂载元素

实例vm创建好了，数据data有了，DOM节点也关联起来了，最后一步，就是把vm的数据绑定到指定的视图上了，也就是数据渲染。

对，就是你看到的这么简单，我们只需要用一个双大括号：{{ }}即可，你可以留意到，{{ name }}和{{ age}}就是我们给实例vm设置的数据name和age，我们用{{ }}可以直接读取到它们的值。

我们访问页面，就会看到vm的数据data就会被成功地渲染出来：

（ 数据渲染成功 ）

就这样，我们就成功地创建了一个vue实例，并把它的数据渲染在视图上了，超简单。

本节小结

创建并使用一个Vue实例并不难，仅需4步走：

当然，实例vm除了用于属性el、data之外，还有很多很实用的属性和方法，同样很简单，后面会继续讲解，今天先讲到这里。