1.生命周期函数
概念:每一个Vue实例创建、运行、销毁的过程,就是生命周期;在实例的生命周期 中,总是伴随着各种事件,这些事件就是生命周期函数;
生命周期:实例的生命周期,就是一个阶段,从创建到运行,再到销毁的阶段;
生命周期函数:在实例的生命周期中,在特定阶段执行的一些特定的事件,这些事 件,叫做 生命周期函数;
生命周期钩子:就是生命周期事件的别名而已;
生命周期钩子 = 生命周期函数 = 生命周期事件
2.主要的生命周期函数分类
创建期间的生命周期函数:(特点:每个实例一辈子只执行一次)
数据观测data observer vm监听数据层(model)数据 的变化 event/watcher vm层监听view层数据的变化
beforeCreate:创建之前,只是单纯的初始化好了实例的所有生命周期函数,但是 data 和 methods 尚未初始化
Created:第一个重要的函数,此时,data 和 methods 已经创建好了,可以被访问了,我们会经常在created中,调用methods中的方法,发起ajax请求数据,并把获取到的数据挂载到data上存储
beforeMount:挂载模板结构之前,此时,内存中已经有了编译好的模板字符串了,但是尚未把模板字符串渲染到浏览器中,
Mounted:第二个重要的函数,此时,页面首次被渲染出来,如果项目中,需要初始化某些js插件,那么这些插件,需要在mounted中进行初始化,否则容易引起一些初始化失效的问题,页面完成了挂载,如果要操作DOM元素,最好在这个阶段)
运行期间的生命周期函数:运行期间的这些操作,本质上,就是为了保证Model层中的数据和View层中的渲染的数据,保持一致(特点:按需被调用 至少0次,最多N次)
beforeUpdate:数据是最新的,页面是旧的
updated:页面和数据都是最新的,页面也是重新渲染好的页面,这时,如果Model层数据变化,vm监听到,view层也会更新变化,反之也是
销毁期间的生命周期函数:(特点:每个实例一辈子只执行一次)
beforeDestroy:销毁之前,实例还没有被真正的销毁,实例还正常可用,实例上的所有数据和事件监听都可以正常可用
destroyed:实例被销毁了,销毁之后,实例已经不工作了
•
3.路由
一个路径对应一个组件,切换路径,切换组件
1.引入vue-router.js文件
2.准备路由需要的文件
3.通过VueRouter创建路由对象,在这个对象中区配置路由规则
4.通过routers创建路由规则,它是一个数组,数组中放的是对象,每个对象对应一条规则,并且每个对象里面都包含有name(表示路由该规则的名称),path(表示路径)component(路径对应的组件)
5.在vue实例中注入路由,这样整个应用成语都会拥有路由
6.通过router-view挖坑,路径匹配到的组件都会渲染在这里
7.vue路由中通过router-link去跳转,它有一个to属性,to属性的值,必须和path中的路径对应,router-link会被渲染成为a标签,to属性会被渲染成a标签的href属性,但它的值前面会带一个#,变为锚点
8.完整代码
4.路由参数
1.设置路由参数:路由加参数的方法,创建一个变量来接收参数, 方法 :参数名
2.获取路由参数:
1.在html中获取路由参数,通过$route.params.参数名
2.在js中获取路由参数this.$router.params.参数名
3.监听路由参数变化
