Vue实例
项目启动过程
看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)?
你首先打开了index.html,里面只有一个写了一个id='root'的div,还有你引入了打包之后的代码,然后Vue自己肯定运行了一下(可以认为是Vue初始化)。
接着,应该是执行了entry.js(因为打包是webpack打包的,你配置的入口文件就这一个)。
entry.js干了什么,是的,创建了一个Vue实例对象,然后这个对象管理的区域根据el属性知道,应该是index.html中id='root'的那个div,因此余下的事情就只有明白这个Vue实例对象是如何管理这片区域的就可以了,这就是接下来的内容了。
什么是Vue实例对象?
根据官方文档的说明:每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。
你可以简单的理解,他就是一个普普通通的对象罢了,只不过这个对象被赋予了一些特殊的功能,让我们来了解一下他吧!
【我们接下来都是在entry.js里面创建的那个Vue对象上面进行实验的】
因此,接下来要说的就是一些常用的配置(不是全部,比较特殊的以后应该会说,毕竟开始就全部,我怕彼此心都太累了)。
Vue实例对象基本配置
【1】el:选择器| DOM结点
在我们的项目中,我们配置的是:
el:'#root'
这是一个字符串,有点类似CSS选择器,它会使用查找到的结点作为管理区域(当然还有别的CSS选择器也可以)。
除此之外,你还可以直接传递一个结点,比如现在我们修改一下代码:
这样也是可以了,你可以试试。
【2】render:(createElement:()=>VNode)=>VNode
上面的是ES6的箭头函数写法,举个栗子:
上面ES6的写法等同于下面ES5的写法:
简单的说就是:(x,y)=>x+y就表示一个有二个参数x和y,返回x+y的函数,因此上面的函数用ES5的写法就是:
备注:VNode是Vue编译生成的虚拟节点,想一下Jquery节点,还有Node节点,是不是味道很像。
因此,我把项目中的render稍微改一下:
是不是很清晰了,说白了,就是一个最后返回值是VNode的函数。
因此看见节点这二个字,应该可以理解页面为什么显示的是App里面的模板了吧,如何路由调整为什么配置的是.vue文件大概也有点感觉了吧。
【3】router:VueRouter
这个比较容易理解,就是知道使用的路由配置是什么,由于项目中是:
看着很奇怪,我们稍微修改一下:
基本的就到这里,就三个,别的属性因为还关联很多东西,会一点点来说明。
Vue对象生命周期
官方的图我就不放了,感觉意义不大,推荐入门了以后可以去看看,因此后面的文章可能会说。
下面我们来先在entry.js里面修改一下代码,看看运行结果,下面是代码:
运行一下看看控制台。
因此,就是说,Vue对象从创建前到最后死亡,在各个阶段状态改变的时候,都提供了一个钩子方法,你可以注册一下,如果你希望在特定状态改变的时候干点什么的话。
到这里,基本上Vue对象实例应该比较清楚了吧?看看我们的代码,应该只有那几个.vue的文件里面的东西没有说清楚了(本文就是把前面写过的代码都说清楚,后面就可以一个新知识点接着一个的来丰富项目,因为都没有疑惑了,学习起来应该不会痛苦了吧!)。
Vue组件实例
说明
Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种,比如你还可以通过Vue.component()的方法来创建,不过这些都以后吧,我们这里就只说明.vue文件这一种(不喜欢一下子说太多,而且仔细想想,不就是API吗)。
【下面都是在PageTwo.vue里面进行修改,菜单名称修改为:Vue组件实例】
.vue文件的基本模板如下(下面都会是ES5的写法,本人还是不太喜欢ES6或者TS,原谅我,反正本质一样):
三个地方,分工明确:模板 + 控制 + 样式
接下来我们说明配置中常用的选项(很多具体的就留到后面一点点品位,好吧,留的有点多):
常用配置 【1】data
先看看PageTwo.vue现在的代码: