vue学习笔记--一些知识点的总结

v-for

• 循环普通数组 v-for="(item, i) in list"
• 循环对象数组 v-for="(user, i) in list" user：对象，i：索引
• 循环对象 v-for="(val, key, i) in user" val：值，key：键，i：索引
• 迭代数字 v-for="count in 10"

图片的引入

好文链接

插槽

• 一种在子组件中挖坑的技术，父组件调用子组件模块时填坑
• 父组件中的使用：v-slot:插槽名=“插槽中的参数对象”
• PS:父组件中包裹插槽时必须要用<templete v-slot:default>组件模块</templete>,除非只有一个默认插槽，这时在父组件中可以直接写组件模块，不需要templete包裹

路由

• 一种可以不跳转页面而变换路径的技术，在父组件中挖坑<router-view></router-view>
• 子组件需要使用路径中带的值时：
  • JS中：this.$route.
  • {{}}中：{{$route....}}
• 编程式导航（会在history中添加记录，以便返回）
  1. this.$router.push('/blog');
  2. this.$router.replace({name:'User',params:{username:'zhongxi',password:'123'}});
  3. this.$router.go(-1);
  • PS：path和params不能同时出现，有path时会自动忽略params
• 在配置路由器时，经常会遇到一个路径里会使用很多个模块，这时在配置该条路由时

components:{
				default:()=>import('@/components/Home.vue'),
				a:()=>import('@/components/profile.vue'),
				b:()=>import('@/components/posts.vue')
			}

此时在模块中：

<template>
	<div id="app">
		<Header></Header>
		<div class="main">
			<router-view></router-view>
		</div>
		<router-view name="a"></router-view>
		<router-view name="b"></router-view>
		<Footer></Footer>
	</div>
</template>

• 配置路由route的path时注意：带/的是根路径

计算属性

• 计算属性不能传递参数，（所以在循环中不能用计算属性，侦听器）需要传递参数的话建议用method。不要被计算属性绑架了，有时可以在js表达式里直接计算，尤其是你发现计算属性就一句。
• 在计算属性里定义的方法：方法名即为被观察的属性名，该属性依赖于方法内涉及的data数据，只有在data数据更改时，被观察的属性才会更新。计算属性不需要在data中提前声明！！！
• 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

监听属性

• 被监听的属性需要在data中声明，在该属性发生变化时触发监听，执行方法。
• 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

生命周期函数

• created:在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
• created 和mounted只会执行一次，即创建和挂载实例。

返回值 vs 回调参数
二者的使用方法不同，返回值直接可以作为自定义内部方法的形参，而回调参数则需要数据绑定。

路由守卫 beforeEach

模板内{{}}不需要写this.!!!