第三节：创建一个Vue实例，超简单

我们之前说过，Vue是数据驱动视图的，只要model（模型层）的数据改变了，Vue就会帮我们改变视图上显示的内容，不用我们自己去动手写代码更新。那么，它是怎么做到的，我们的代码要怎么写才能做到这一点。答案是：Vue实例。先确保你的项目安装好Vue.js，安装教程：(去看第二节、简易安装和快速入门Vue.js)安装好之后，我们来看看怎么创建和使用Vue实例，我们把它分成 4 步走。第1步创建

elroy

4242人浏览 · 2018-03-21 09:26:55

elroy · 2018-03-21 09:26:55 发布

我们之前说过，Vue是数据驱动视图的，只要model（模型层）的数据改变了，Vue就会帮我们改变视图上显示的内容，不用我们自己去动手写代码更新。那么，它是怎么做到的，我们的代码要怎么写才能做到这一点。

答案是：Vue实例。

先确保你的项目安装好Vue.js，安装教程：(去看第二节、简易安装和快速入门Vue.js )

安装好之后，我们来看看怎么创建和使用Vue实例，我们把它分成 4 步走。

第1步创建语法

创建一个Vue实例的语法很简单，如下：

<script>
let vm = new Vue({});
</script>

复制代码

通过关键语句 new Vue( )我们就可以创建一个Vue实例：vm了。我们注意到了我们给Vue( )传了一个参数选项，是一个空对象，我们接着往下看。

第2步设置数据

没错，我们就是利用上面的对象参数，来创建这个Vue实例wm的，比如，设置vm里面的数据。

let vm = new Vue({
//实例vm的数据
data:{
name: "张三",
age : 21
}
});

复制代码

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

第3步挂载元素

创建了一个实例vm，设置了vm的数据后，我们怎么把数据展示在视图上呢这就要通过我们的挂载元素了。我们看看怎么用：

视图view部分：

<div id="app"></div>

复制代码

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

let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
name: "张三",
age : 21
}
});

复制代码

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

第4步渲染

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

<div id="app">
我是{{ name }}，
今年{{ age }}岁
</div>

复制代码

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

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

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

5 本节小结

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^