3、自己创建一个Vue实例

阅读() @2018-10-29 18:16:11

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

通过创建vue实例可以解决这个问题。

首先确保本html文件中正确引入了vue.js文件,然后分4步走:

一、创建语法

创建一个vue实例的语法如下:

<script type="text/javascript">
      var app = new Vue({

      });
</script>

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

二、设置数据

我们利用上面的对象参数,来创建这个Vue实例app的,比如,设置app里面的数据:

var app = new Vue({
    el : '#app',
    data : {
        name : '赵一鸣',
        work : 'WEB前端开发'
    }
});

写法也很简单,参数对象不再是一个空对象,它包含一个属性:data,而data的值也是一个对象,这个对象就是我们给实例app设置的数据了。比如:name为“赵一鸣”,work为“WEB前端开发”等等。

三、挂载元素

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

视图view部分:

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

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

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

四、渲染

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

<div id="app">
    <ul>
        <li>姓名:<b>{{name}}</b></li>
        <li>工作:<b>{{work}}</b></li>
    </ul>
</div>

我们只需要用一个双大括号:{{  }} 即可,你可以留意到,{{ name }}  和 {{ work }} 就是我们给实例vm设置的数据name和work,我们用{{  }}可以直接读取到它们的值。

本节完!

微信二维码