Vue 知识点

1.Vue指令

v-bind 动态绑定属性的  简写成 :

     v-on 绑定事件 简写成 @

     v-cloak 防止插值闪烁

  v-if 通过动态的 删除或者添加元素 来实现元素的显示和隐藏

     v-show

  都是控制元素的显示和隐藏的，v-if通过动态的 删除或者添加元素 来实现元素的显示和隐藏

        v-show是通过 css的display：none来隐藏元素

        v-html -- 会解析标签 （富文本）

        v-text  -- 不会解析标签

        v-pre  -- 跳过插值解析

        v-once -- 只渲染一次

        v-model--双向的数据绑定，form表单

        v-for -- 循环遍历

2.Vue methods/computed/watch 

computed 

计算属性，只依赖于所依赖 的值，只会存在他所依赖 的值发生改变的时候，才会改变

 不能直接修改计算属性的值，如果要修改，需要将计算属性写成对象形式

methods 

methods 只有调用的时候才会 触发 

watch 

一般依赖于自己监听的数据，监听的数据一旦发生改变就会触发

immediate:true , //立即监听----进入页面就会触发 
deep：true //深度监听

watch: {
	        要监听的值(新值，旧值){
						
		            }
    }

watch: {
					要监听的值： {
						hanlder(newVal,oldval){
							
						},
						immediate: true  // 立即监听
						deep: true  // 深度监听
					}
				}

watch 可以监听什么？ 

1.data中的数据
2.计算属性中的值
3.监听路由

 3.过滤器

  过滤器：对常用文本的格式化操作；一般常用于时间、金额等

  分为 全局的过滤器和局部的过滤器

 局部的过滤器

                在页面内 和data同一层级：

                filters: {

                    过滤器1(){

                       

                    },

                    过滤器2(){

                       

                    },

                    ....

                }

全局过滤器

 Vue.filter(过滤器的id，()=>{})

过滤器的使用

 {{要格式化的文本 | 过滤器的名称}}

使用过滤器注意事项

1. 过滤器需要return返回值

2. 过滤器内没有this指向

3. 过滤器接受参数，接受的第一个参数就是管道符前面的文本

4. 过滤器可以接受多个参数 {{要过滤的文本 | 过滤器的名称（第二个参数、第三个参数.....）}}

5. 不会改变原始值，只会返回新值

6.过滤器可以串联使用,并且上一个过滤器的返回值是下一个过滤器的参数

4.Vue $set方法 

如果说引用数据类型没定定义该属性，属性改变的时候视图不更新

数据更新而视图不更新的如何解决？（注意只有在vue2会出现）

方法一：

$set方法

语法： this.$set(目标对象/数组，属性/下标，新值)

方法二： 

JSON.parse(JSON.stringify())

5.Vuex

vuex: vuex是vue的状态管理工具，存放公共的数据；比如说用户登录的信息

vuex 的缺点 

缺点：

 1. 适合中大型的项目

 2. 刷新的适合数据会丢失

刷新数据丢失解决方案 

方案一: 

我们为了保证刷新数据不丢失，需要使用固化插件（vuex-persistedstate）

使用方法：

npm install --save vuex-persistedstate

方案二：

如果不让使用固化工具，实现持久化存储：

只需要在调用mutations方法的时候保存一下就可以了

使用  localStorage 来存储数据

vuex有5个核心概念           

            state -- 存放数据的

            getters -- 计算属性

            mutations -- 唯一一个修改state内数据的方法（同步的）

            actions -- 异步操作state内数据的方法

            modules -- 模块化

执行机制

state: 获取数据： this.$store.state.属性名

getters:

计算属性名(state){

            return

 }

 获取计算属性的数据： this.$store.getters.属性名

 mutations:

方法名(state,参数){

                       

 }

调用mutaions内的方法： this.$store.commit('方法名'，)

6.vuex辅助函数

vuex的辅助函数 4个

1.mapState

2.mapGetters

3.mapMutations

4.mapActions

	  
  computed:{
      ...mapState(['num']),
	  ...mapGetters(['comNum'])
	  ...mapGetters({lyc: 'comNum'})
}
  methods：{
     ...mapMutations(['addNum']),
	 ...mapActions(['reduceNum']),
}

 7.vuex的高阶用法--命名空间

开启命名空间 namespaced: true

modules: {
	  goods: {
		  namespaced: true,
		  state: {
			  goodsNum: 0
		  },
		  getters:{
			  comNum(state){
				  return '$' + state.goodsNum
			  }
		  },
		  mutations: {
			  addNum(state,data){
				  state.goodsNum+=data
			  },
		  },
		  actions: {
			  reduceNum({commit}){
				  commit('addNum',-1)
			  }
		  },
		  modules: {
			  
		  }
	  }
  },

在页面使用： 

	<p>goods--getters--数据 {{this.$store.getters['goods/comNum']}}</p>

 8.vue 生命周期

vue 页面 生命周期  创建 到 销毁的一个过程

总共有11个生命周期函数

8个常用的钩子函数 

1. 创建前后： beforeCreate -- created

2. 挂载前后： beforeMount   -- mounted

3. 更新前后： beforeUpdate -- updated

4. 销毁前后： beforeDestroy -- destroyed

其他3个钩子函数 

配合keep-alive使用的：

activated： 组件激活时调用

 deactivated： 组件停用的时候调用

捕捉子组件错误时调用： errorCaptured

钩子函数的使用场景

创建前后：实例的创建; 从 创建后（created）开始可以获取data内的数据

挂载前后：dom的挂载， 从 挂载后(mounted开始可以获取dom元素)

声明周期函数通常所做的事情：

        beforeCreate： 修改页面的title     页面加载的进度条

        created： 发送网络请求  

        mounted:发送网络请求

        beforeUpdate -- updated 什么更新？视图的更新

        beforeDestroy -- destroyed

        清除定时任务： setTimeout  setInterval

        移除监听： .removeEventLinster()    this.$bus.$off()

 在 created内获取dom元素

        如果非要在 created内获取dom元素：     

      this.$nextTick().then(res=>{

               

            })

            this.$nextTick(()=>{

               

            })

       

        errorCaptured捕捉子组件的错误的，有三个参数：

            1. 错误的信息

            2. 错误的组件

            3. 错误的位置

            可以返回值： 如果返回true,错误向外暴露，如果返回false 错误隐藏

 9.Vue页面生命周期

页面与组件之间生命周期执行关系 

页面---beforeCreate
页面---created
页面---beforeMount
子组件---beforeCreate
子组件---created
子组件---beforeMount
子组件---mounted
页面---mounted

 只有子组件的dom元素开始渲染的时候才会加载子组件的生命周期

 页面与页面间跳转生命周期的执行

beforeCreate---新页面
created---新页面
beforeMount---新页面
beforeDestroy---老页面
destroyed---老页面
mounted---新页面

 vue的内置组件

 component -- 动态组件
 transition -- 动画
transition-group -- 动画
keep-alive -- 缓存
slot -- 插槽

 keep-alive

keep-alive: vue的内置组件，缓存不活动的组件的实例，不会销毁他们；
dom中不会展示不活动的组件 

 属性

exclude- 黑名单，凡是出现在这个里面的组件都不会被缓存

include -白名单 凡是出现在这个里面的组件都会被缓存

max--最大缓存数

actived deactived

actived组件激活时调用
deactived组件停用调用
使用keep-alive包裹的组件 生命周期只执行一次 如果有需要更新的值 就要用到actived deactived

 

10.组件

组件，是对数据和方法的简单封装 代码的重复利用
新建组件：在compenteds文件中右键点击新建xx.vue
在页面中使用：1. 引入 2. 注册 3. 像标签一样使用

组件通讯

1. 父传子： 父组件中，子组件的标签上，定义一个自定义的属性，后面跟上要传的值，
子组件通过props接受

  props有两种形式写法

（1）数组形式
（2）对象形式 （可以限制类型、是否必填、默认值、验证）
        1.可以限制类型  type
        2.是否必填   -- require: true
        3. 默认值 -- default 如果是默认的引用的数据类型，那么需要写成工厂函数
             function(){
                     return {} []
                     }
 (4)验证  validator  返回true证明验证通过 false验证失败

props:{
			b: {
				type: Number,  //限制类型
				required: false,   //是否必填
				default:10,   //默认值
				// validator(val) {
				// 	debugger
				// }
			},
			obj: {
				default:()=>{
					return {a:10}
				}
			},
			mobile: {
				validator(val){    //val 参数 就是父页面传过来的数据
					
					return  /^1[3|4|5|6|7|8|9]\d{9}$/.test(val)
				}
			}
		},

子传父

在子组件中通过 this.$emit(‘自定义的事件名’)父组件中接受事件,子组件的标签上 @自定义的事件名=“” 

 兄弟组件传值

 事件总线 bus

//在min.js
（1） Vue.prototype.$bus = new Vue()

(2)// 发送 this.$bus.$emit('dalaba',this.zujian1)
export default {
		data:function(){
			return {
				zujian1: 10
			}
		},
		methods:{
			clickHandle(){
				this.$bus.$emit('dalaba',this.zujian1)
			}
		}
	}
（3）//接收 this.$bus.$on('事件名'，(res)=>{})
	mounted() {
			this.$bus.$on('dalaba',(res)=>{
				console.log(res)
			})
		},

 11.组件传值

1. 父传子   props  *****
2. 子传父   $emit  *****
3. $bus   *****
4. vuex   *****
5. 本地存储
6. $parent  子组件可以获取父组件的实例是一个对象
7. $children  父组件可以获取子组件的实例是一个 数组
8. $refs  可以获取整个子组件的实例
9.$attrs 可以获取父组件的所有的属性，但是如果该属性在props里面接受了，就获取不到了
10. provide  inject   注入 在页面注入完成后，子组件、孙组件，都可以获取到这个值

$refs  可以获取整个子组件的实例
<mycom1 ref="mycom1" name="1" age="9" a="1" b="2"></mycom1>
 mounted() {
	console.log(this.$refs['mycom1'])
  }

$attrs 可以获取父组件传递到子组件的所有的属性，但是如果该属性在子组件的props里面接受了，就获取不到了
props:['name'],
created(){
			console.log(this.$attrs)
	},

 provide  inject 注入 在页面注入完成后，子组件、孙组件，都可以获取到这个值
 //在父组件 与data同级
 provide:function(){
	return {
		url: 'https://www.baiidu.com'
	}  
  },
  //子组件中 与data同级
  inject:['url'],

12.混入（Mixin) 

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 页面中的可复用功能
混入对象 和 页面对象 基本是相同，都有data、method和一系列生命周期钩子函数

1、在assets里面新建mixin.js文件
const mixins = {
	data: function() {
		return {
			num: 0    //数据
		}
	},
	beforeCreate(){   //混入对象生命周期钩子函数
			console.log('混入内的生命周期函数---beforeCreate')
	},
	created(){
			console.log('混入内的生命周期函数---created')
	},
	beforeMount(){
		console.log('混入内的生命周期函数---beforeMount')
	},
	mounted(){
		console.log('混入内的生命周期函数---mounted')
	}, 
	methods: {
		add() {
			this.num++    //方法
		}
	}

}

export default mixins

 

//2、在页面引入
import mixins from '../assets/mixins.js'
//与data同级
mixins:[mixins],
//页面使用
<h1>{{num}}</h1>

 生命周期执行

页面的函数和混和的函数都执行，混入中的函数会先执行，页面的函数后执行

数据对象进行合并

其中混入的数据和页面的数据发生冲突时以页面数据优先，页面中的数据会覆盖混入对象的数据

 

13.vue 路由

路径 和 组件的一一对应关系
比如说我们在浏览器中输入不同的 url 地址，我们就能访问不同的资源，那么这 url 地址与资源之间的对应关系，就是路由

路由模式

2种

hash 和 history

默认是hash模式

  hash 和 history 的区别

hash模式会带 #号 ，不美观
history 不带#号 history 发起请求需要前端和后端进行配合，不然会报404错误

修改路由模式

//在router文件夹下的index.js
const router = new VueRouter({
	mode:'history',  // 修改路由模式
	routes
})

 路由的跳转

 声明式的导航  

router-link  to="要跳转的页面路径"

编程式的导航

this.$router.push()

 vue的路由传参

 query

既可以使用name也可以使用path，刷新页面参数不会丢失

  接受query参数this.$route.query.属性名 

this.$router.push({
                name:'', 
                path: '',
                query: {}
            })
            
            this.$router.push('/info?canshu1=1&canshu2=2')
            
         
        
 

params

 只能使用name跳转，刷新的时候参数会丢失，不会显示到页面的url上

 接受params参数： this.$route.params.属性名

this.$router.push({
				name:'', 
				params: {}
			})

 动态路由

 刷新的时候数据不会丢失

 接受参数： this.$route.params

	path: '/info/:id'
 {
    path: '/info/:name/:age',
 name: 'info',
 component:()=>import('../views/info.vue')
  }

 路由的守卫 /路由的拦截 /导航的守卫

就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行

一共有三种 

1.全局守卫

2.组件内守卫

3.独享守卫

全局守卫

 有三个参数 ： to -- 到哪里去  from -- 从哪里来  next -- 下一步 重定向

（在 router文件夹下的index.js文件）
  		全局的路由前置守卫：router.beforeEach
 		语法：
  			router.beforeEach((to,from,next)=>{   //写在实例化后
				// to -- 到哪里去
				// from -- 从哪里来
				// next -- 下一步   重定向
			})
		全局的后置钩子函数 router.afterEach()
			语法： 
				router.afterEach((to,from)=>{
					
			})
  		

 

组件内守卫

 一共三个 分别是 ：路由进入之前，路由更新，路由离开之前

  // 路由进入之前
        beforeRouteEnter(to,from,next){
            
        }
        // 路由更新
        beforeRouteUpdate(to,from,next){
            
        }
        
        // 路由离开之前
        beforeRouteLeave(to,from,next){
            
        }

独享守卫

beforeEnter 路由进入之前
{
	  path: '/login/:id',
	  name: 'login',
	  component: ()=>import('../views/login.vue'),
	  beforeEnter(to,from,next){
		  
	  }
	  
  }