首页 百科知识 创建一个实例,超简单

创建一个实例,超简单

时间:2023-09-16 百科知识 版权反馈
【摘要】:通过关键语句new Vue( )我们就可以创建一个Vue实例:vm了。比如:name为张三,age为21等等。创建了一个实例vm,设置了vm的数据后,我们怎么把数据展示在视图上呢这就要通过我们的挂载元素了。实例vm创建好了,数据data有了,DOM节点也关联起来了,最后一步,就是把vm的数据绑定到指定的视图上了,也就是数据渲染。当然,实例vm除了用于属性el、data之外,还有很多很实用的属性和方法,同样很简单,后面会继续讲解,今天先讲到这里。


创建一个Vue实例的语法很简单,如下:


 

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

 

 

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



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



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

 


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

视图view部分:


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

 

 

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

 


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

 


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


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



( 数据渲染成功 )

 

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


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


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

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈