第二节 实例化Vue对象

摘要:上节我们简单介绍了Vue.js是什么以及如何引入CDN,本节将要介绍使用CDN后如何来实例化对应的Vue对象。

首先新建一个index.html文件,以CDN方式引入Vue.js,如下图:

现在我们就可以使用Vue了,在这里我们新建一个app.js来实例化Vue对象,然后在index.html中引入app.js。

主要步骤如下:

1、创建实例

如上图,通过new Vue()就已经创建好了一个Vue实例,而且参数是一个对象。

2、获取根容器

el代表element,指需要获取的元素,一定是html中的根容器元素。这是什么意思呢?在Vue中其实是对DOM进行操作,不会在html中写大量结构,html中只有一个根容器,通过添加一些方法、属性往根容器里面填充内容。根容器也就是图中箭头所指的div,显然el操作的内容就是“#vue-app”。

3、设置数据

data用于数据的存储,可以设置对应的数据,data的值也是一个对象,类型可以是字符串、number、对象、数组。比如name为“米修在线”,job为“web前端开发”等。

4、渲染显示html代码:

保存运行后的效果图

可见,我们想要显示data中的name是通过{{}}实现的,花括号在这里是模板语法。如果data类型是字符串,花括号可以直接获取到相关数据的值,而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中,通过DOM操作再把需要的值插入到真实DOM中。

那么如果当前app.js中的内容放在根容器之外,会有怎样的效果呢?

测试可以发现,并不能拿到我们想要的内容。所以内容仅限于根容器,置于范围之外是没有效果的。

到这里,应该对实例化Vue对象有所了解了吧!下节内容我们将会介绍更多的数据类型和对应的方法。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180628G0DY1500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券