vue笔记-day4

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.监听路由参数变化

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。