上一节我们介绍了什么是vue以及vue的安装点我跳转,这一节我们来看看如何使用vue。这里主要是让大家对vue有一个简单的了解,不需要太过扣细节。后面会针对细节进行讲解。

vue 本身是一个构造函数(类),最终需要通过new一个实例,并向传入对应的配置参数。 配置参数有很多,但这一节我们主要关注几个比较常用和基础的配置参数:

el:el可以传入一个选择器或者一个dom元素,他最主要的作用是做一个容器绑定的作用,vue最终会将template编译后的dom替换该目标元素。我们一直说vue是数据驱动视图变化,那么驱动的目标是谁呢?就是我们绑定的这个元素。如果你还有点懵,别着急,接着向下看。

data:data是最主要的数据域,这里面的数据最终都会被转化成响应式数据,当这些响应式数据发生变化的时候会使得视图进行更新(若视图中有绑定值)的操作。这里需要注意的是,并不是所有的响应式数据发生变化都会使得视图产生更新,主要取决于视图中是否有绑定响应式数据,这个部分后面会详细说。

methods:methods是实例中的方法逻辑,这些方法最终都会被绑定到实例上,可以被实例中任意地方调用,不过要注意this指向,也可以像示例中作为事件回调被调用。

template:template是html模板字符串,也是最终渲染到容器中的html代码。有些同学可能会发现,config中好像没有template这个参数。是的,当配置中没有template模板的时候,vue会将el绑定的dom元素的html作为template模板来使用。

举个简单的例子: el好比是某个地皮,template则是毛坯房图纸,当template不存在的时候,我们就会将原本地皮上的房子结构作为图纸进行构建,而data和methods就像是房子的装饰品,在搭建时候就将装饰品都放在对应的地方。最终渲染出来后就是一个成品房。

在配置中存在template的时候,vue会将template中的模板渲染到目标容器 比如:

可以看到,原本的div id=app>

…/div>

dom结构已经被template中的替换了,所以对于el绑定的dom元素来说,内部的结构并不是必须的,我们只是需要有一个渲染的目标而已,其最终渲染到目标容器的还是template中的html模板字符串。也就是我们可以这样:

你需要知道,不管是template还是el绑定的元素,都不是最终渲染到页面上的结果,而是会通过编译器结合配置和模板生成新的dom结构并渲染到页面上。

看到这里,你对vue的了解和使用是不是又加深了一点呢?至于配置中的其他属性,会在下一节中来详细描述。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注