最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Vue第三节:创建一个Vue实例,超简单

Vuejs rockyxia 3258浏览

写在前面

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

答案是:Vue实例

先确保你的项目安装好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之外,还有很多很实用的属性和方法,同样很简单,后面会继续讲解,今天先讲到这里。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue第三节:创建一个Vue实例,超简单
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)