学习VUE时的笔记(1)
1
computed和methods相比的话具有缓存属性，所以对性能优化更好一点，computed方法中值需要return，
闭包可以解决var没有块级作用域的问题，就是在var的for循环中添加一个函数，因为函数是es5中唯一具有块级作用域的，
2
v-on:click='事件' @语法糖 其中事件内可以传参 没有参数后可以不加小括号；但是方法本身会有一个event参数，这个方法会在方法中默认传递，
如果我们需要传递参数同时又需要event参数时,此时不能在事件后面又加参数又加event，需要写$event，
v-on的修饰符，
@stop停止冒泡； @keyup键盘弹起，后面可以跟enter等；@keydown键盘按下;@prevent阻止默认行为，比如跳转或者提交等，@once只触发一次
v-bind ：语法糖
3
v-if；v-elseif；v-else！控制显示与隐藏，后面跟一个布尔值，或者一个可以控制布尔值的变量
v-show跟v-if有相同的效果，控制元素显示与隐藏，
两者的区别在于vi-if指令会删除和创建新元素，v-show的操作方法是display:none，所以当显示与隐藏频率非常高的时候使用v-show，如果频率比较低通常使用v-if，
4v-for循环
v-for='（item，index）in items ：key='index'
使用v-for时最好添加上key属性；diss算法可以正确找到插入的位置,key属性必须是唯一性的，不然没有意义
数组响应式的方法
通过索引来修改数组是不会造成响应式的，所以需要借助可以操作数组的方法，
1：push() 末位添加; 2：pop() 从最后一位删除一个元素;3：shift()删除第一个元素; 4：unshift()首位添加;
5：splice(start表示从哪个开始；删除几个元素,0表示不删除元素，如果有后面有参数就代表替换的元素，第二个参数就表示要替换多少个参数的个数；如果要追加参数第二个参数直接写0就可以，后面再跟上要插入的元素)；6：sort()排序；7：reverse()反转
8：Vue.set(要修改的对象，索引值，'修改后的值') 这个是vue内部提供的修改数组的方法
另一种循环
for (const key in object) {
}
for (const iterator of object) {
iterator 就是对象中的每一项
}
map
(es6)map遍历数组，返回一个新数组 不改变原数组的值
如果需要新数组的值需要申明一个变量去接收
arr.map((item[,index,arr])=>{
})
reduce
(es6)reduce遍历进行某种计算。然后返回其值，并继续计算 不改变原数组，返回计算的最终结果,从第二项开始计算 prev为计算结果 cur为当前项
arr.reduce((prev[,cur,index,arr])=>{
}[,初始值])
v-model
双向绑定，
与radio结合使用，需要配合value来获取用户点击的值
与checkbox使用，单选框配合布尔值使用，多选框配合数组使用，必须要有value来获取用户点击的值，
与select
修饰符：lazy-->一旦数据改变就会自动率先你，修饰符可以让数据再失去焦点或者回车时才更行，
numbe-->把用户的输入框改变为只可以输入数字，data中收集到的数据也是number
trim-->去除内容两边的空格
组件化，
方便复用，创建组件，注册组件 Vue.component（组件），使用组件，在组件中template标签内<组件></组件>
全局组件和局部组件，全局组件注册在 Vue.component中，全局都可以使用，局部组件注册在每一个组件中的components中
data
data必须是一个函数，这样才可以保证每一个数据都是独立的，不可以是对象，而且必须得return一个对象
父子组件通信
父传子：props
可以是数组或者是对象，也可以是申明传递值的格式，必须用驼峰命名
子传父$emit Event
子组件在methods中使用，this.$emit('自定义事件名'，参数)
父组件通过v-on可以监听到自定义事件，并且可以接受到参数
ref
现在组件内用ref申明，ref="x x x"
通过$refs来获取
插槽slot
插槽的基本使用 vue3使用v-slot
插槽内部可以设置默认值，如果有传达的就会覆盖原本的默认插槽内容
如果有多个值传入，就会全部替换，一个插槽可以对应N个值
具名插槽
定义时
使用时
两个名字必须一样才可以替换内容
作用域插槽
父组件替换插槽的标签，但是内容是由子组件提供的
导入与导出
导出 1：export {xxxxxxx}；2：export let xxx=xxxx; 3：export default 一个页面只能有一个
import导入
webpack
package.json项目所有依赖，
plugincha'j
箭头函数
箭头函数的this指向，向外层作用域一层一层找，直到有this定义，
vue-router
后端路由，后端处理URL和页面之间的映射关系，服务器直接生产渲染好对应的页面，返回给客户端进行展示
前端渲染，SPA页面，单页面应用，整个网页只有一个页面，改变url但是页面不整体刷新
push和replace
push是新增添加，可以后退，replace是替换，无法回退
路由设置页面，
path：'/地址'
component：引入的组件名
children：[{}]如果有子路由的话可以下载里面
redirect：重定向路由，'/重定向路径' ；一般是首页
router-link实现路由的跳转，
在methods中使用方法跳转路由，this.router.replace('/跳转地址')
router-view 这个属于占位符，决定要显示的组件显示的位置
路由懒加载，const xxx=( ) => import ('../../ ' .vue) 格式 将不同的路由打包成不同的js代码块，只有在客户访问的时候才加载对应的组件，这样不会因为js代码块太多导致一次性请求太大导致用户的等待时间以及电脑出现空白界面！
动态路由。路由传参，
params参数
1：在路由配置中paht:'/路径地址 :绑定的参数'
2：
3：通过$route.params.传递的参数，获取动态传递的参数
query参数
1：在路由配置中paht:'/路径地址' 正常填写
2：<router-link :to='{path:跳转的路径，query:{参数名:'参数值''，参数名:'参数值''}}' >
3：通过$route.query.传递的参数，获取传递的参数
全局路由守卫
// 挂载全局前置路由守卫
router.beforeEach((to, from, next) => { 去哪里，从哪来，放行
如果需要修改标题可以通过document.title=to.meta.title, 但是需要在路由配置中添加meta配置项
if (to.path === '/login') return next() 中间判断
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next() 放行，next()中可以传入false可以中断当前导航，也可以传入('/地址')或者({path:'/'})强制转入另一个界面，比如登录注册页面
})
// 挂载全局后置路由守卫
router.afterEach((to, from) => {
})
独享路由守卫
在每个路由配置内部的，
beforeEnter: (to, from, next) => {
}
keep-alive
vue内置的组件，可以使被包含的组件保持状态，或者避免被重新渲染
用keep-alive包裹router-link
\
