web前端开发框架——Vue的知识总结（3）

一、简介

Vue.js的定位是一个渐进式框架 前端三大mvvm框架之一，Vue上手比较快，只要你会HTML、css、js等一些基础就能轻松做开发。 vue官方文档

二、导入Vue.js库

<script src="vue.js"></script>

三、核心技术

1.vue组件的生命周期

1）定义

一个组件从创建到销毁会经历多个步骤，把这些步骤称为组件的生命周期，组件的每个生命周期都会触发固定的回调函数，我们把回调函数称为生命周期钩子函数。

2）生命周期

创建前后
		created()		创建完毕		做一些初始化
		beforeCreate	创建完毕前
渲染前后
		mounted			第一次渲染完毕	html DOM已经渲染 操作页面中的元素
		beforeMount		渲染完毕前
更新前后
		updated			更新完毕
		beforeUpdate	更新前
销毁前后
		destroyed		销毁完毕
		beforeDestroy	销毁前

2.登录注册路由权限判断

3.导航守卫

1）组件内部守卫

定义：当进入页面或离开页面进行判断
	进入页面
	重定向别的页面
	额外的事情

beforeRouterEnter(to,from,next)			路由进入前
			to							要进入的路由
			from						从哪个路由来得
			next						将要去哪儿		next 必须要被调用
beforeRouterLeave						路由离开前

2）路由配置 全局守卫

router.beforeEach(to,from,next)

3）路由独享守卫

router.beforeEnter

3.组件间通信

1） 父传子

a， 父组件通过属性方式传入
	<swiper  :gallery="galleryPic"/>
	data(){return {galleryPic:[...]}	
b , 子组件通过props 方式接收
	props:["gallery"]

2） 子获取父亲的data数据

this.$parent.showTab

3） bus方式传递（不论父子、兄弟，还是子父）

1. 定义  bus.js
	import Vue from ’vue‘
	export default new Vue();
2. 如果要获取数据
	import bus from "bus.js"
	bus.$on(事件名,data=>{  // data 就是数据名称})

3. 如果要发送数据
	import bus from "bus.js"
	bus.$emit("事件名",数据)

4）子传父

<swiper @swevent="处理函数($event)" / >
<swiper @numchange = “changeHd($event)”/>
methods:{
 changeHd(e){
   // e 就是swiper 传递过来的数据 15
     }
}

this.$emit("numchaneg",15)

5） 路由传递

params
	配置			{path:"/product/:id"}
	获取			{$route.params.id}
query
	push("/login?redirect=/about")			
	获取			$route.query.redirect
6. vuex(最高级)

4）组件的缓存

1） 定义元信息

 .router/index.js
{name:"cart",
meta:{keep:true}}

2) keep-alive进行缓存

:include="'cart'"

<keep-alive>
   <router-view  v-if="$route.meta.keep"/>
</keep-alive>
 <router-view  v-if="!$route.meta.keep"/>