视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。
==箭头函数==：一种定义函数的方式
//1.定义函数的方式：function
const aaa = function () {
}
//2.对象字面量中定义函数
const obj = {
bbb: function () {
},
bbb() {
}
}
//3.ES6中的箭头函数
//const ccc = (参数列表)=> {
//}
const ccc = () => {
}
-
参数问题
//放入两个参数 const sum = (num1,num2) => { return num1+num2 } //放入一个参数,小括号省略 const power = num => { return num * num }
//代码块中有多行代码 const test = () => { console.log('Hello') console.log('World') } //代码块中只有一行代码，有没有返回值都行 const nul = (num1,num2) => { return num1 +num2 } const nul = (num1,num2) => num1 +num2
箭头函数的this
箭头函数的this是如何查找的？
向外层作用域中一层层查找this，直到有this的定义
Vuex认识路由
前端渲染，后端渲染
后端路由阶段
1.后端渲染
jsp：java server page
2.后端路由
后端处理URL和页面直接的映射关系
前后端分离阶段
后端只负责提供数据，不负责任何阶段的内容
前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页
移动端和网页端的后端不需要进行任何处理，使用同一套api
SPA页面
<font color=#909534>SPA：单页面富应用</font>
整个网页只有一个html页面
每次交互都不用请求新的url。改变url，页面不进行整体的刷新
SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
前端路由的规则
href ->hyper reference
控制台location.hash = 'bdd'，可以改变url而不刷新。
history.pushState(data,title,?url)
history.pushState({},'','home'),可以改变url而不刷新。
↑不断push 入栈。history.back()=history.go(-1)出栈返回
go里面的数字表示指针移动多少个值
history.forward()=history.go(1)
history.replaceState({},'','home')，替换，不能返回
vue-router基础
下载：npm install vue-router --save
import router from './router'
如果是个目录（文件夹）会自动找该文件夹里的index文件
1.创建路由组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//2.创建vueRouter对象
const routes =[
{
//协议头：//host/
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
//没有路径时,重定向到home（默认打开首页）
{
path: '',
redirect: '/home'
}
]
const router = new VueRouter({
//配置路由器和组件直接的映射关系
routes,
//默认情况使用hash改变url，也可改成history
//mode: 'history'
// linkActiveClass: 'active'
})
//3.将router对象传入到Vue实例
export default router
配置组件和路径的映射关系
import Home from '../components/Home'
import About from '../components/About'
const routes =[
{
//协议头：//host/
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
//没有路径时,重定向到home（默认打开首页）
{
path: '',
redirect: '/home'
}
]
3.使用路由
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
<router-link to="/about">关于</router-link>——入口的显示
to：指定跳转的路径
tag：默认渲染成一个<a>标签，="button"时渲染成buttton
replace：默认是可以返回的，加上这个标签（后面不用跟等于），以后就不能返回了
active-class：选择谁，谁的样式就改变为知道class
也可以在router里统一修改：linkActiveClass: 'active'
<router-view>——组件的显示,占位
使用button代替link，用代码实现跳转
<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>
<router-view></router-view>
export default {
name: 'App',
data(){
return{
$router: ''
}
},
methods: {
homeClick(){
//通过代码的方式修改路由vue-router
//this.$router.push('/home')
this.$router.replace('/home')
console.log('homeClick')
},
aboutClick(){
//通过代码的方式修改路由vue-router
this.$router.push('/about')
console.log('aboutClick')
}
}
}
route：(不是router)当前谁处于活跃就是谁
动态路由：
组件User：(两种写法)
<h2>{{$route.params.userId}}</h2>
<h2>{{userId}}</h2>
computed: {
userId(){
return this.$route.params.userId
}
}
父组件App
<router-link v-bind:to='"/user/"+userId' active-class="active">用户</router-link>
data(){
return{
userId:'zhangsan'
}
路由文件index
{
path: '/user/:userId',
component: User
}
路由懒加载
一个路由打包一个js文件，用到哪个加载哪个
方法一：结合Vue的异步组件和Webpack的代码分析
方法二：AMD写法
==方法三==：在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () =>import('../components/Home')
const About = () =>import('../components/About')
const User = () =>import('../components/User')
路由嵌套
子路由：用children
path: '/home',
component: Home,
children: [
{
path: '',
//不加斜杠就默认从上一个路径后面接下去
redirect:'news'
},
{
path: 'news',
component:HomeNews
},
{
path: 'message',
component:HomeMessage
}]
传递参数
<font color=#909534>Profile -> 档案</font>
加了冒号：即v-bind，就把to=""里面的东西当成语法解析，否则还是字符串。
to="字符串"等价于:to="'字符串'"
URL: 协议://主机:端口/路径?查询
scheme://localhost(:port)/path?query#fragment
传递参数的方式
params的类型:
配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc
query的类型:
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc
<router-link :to="{path:'/profile',query:{name:'YY',age:18,height:1.88}}" >档案</router-link>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
所有组件都继承着Vue的原型。父类中的方法，子类继承了
导航守卫
跳转函数实现在指定组件页显示指定title
routes配置都加上
<font color=#909534>meta——元数据（；描述数据的数据）</font>
meta:{
title:'档案'
},
//前置守卫
router.beforeEach((to,from,next) =>{
//从from跳转到to
document.title =to.matched[0].meta.title
//下一步，默认原本就有，重写的话也得加上
next()
})
matched[0]——如果一个父组件有多个子组件，title的元素不会在父组件里，会在子组件里，所以找第一个子组件（一般）的title元素
//后置守卫，不需要主动调用next函数
router.afterEach((to,from) =>{
console.log('-----')
})
先调用前置守卫。后调用后置守卫
全局守卫
-
路由独享守卫
beforeEnter: (to,from,next) =>{} 组件内的守卫
keep-alive遇见vue-router
标签在切换时，被反复创建和销毁（用[生命周期函数](# 生命周期函数)来验证）。可以用keep-alive使其保持活性
<keep-alive exclude="Profile,User">
<router-view></router-view>
</keep-alive>
keep-alive的状态下才能使用 activated/deactived和beforeRouteLeave这两个函数
首页中使用path属性记录离开时的路径，在beforeRouteLeave中记录
//这两个函数，只有该组件被保持了状态，使用了keep-alive时，才是有效的
activated() {
this.$router.push(this.path);
},
beforeRouteLeave(to,form,next){
console.log(this.$route.path);
this.path = this.$route.path;
next()
}
keep-alive属性：
- include - 字符串或正则表达，只有匹配的组件会被缓存
- exclude - 字符串或正则表达式（不要随便加空格），任何匹配的组件都不会被缓存
TabBar练习
在组件里的<style>里引用样式
<style>
@import "./assets/css/base.css";
</style>
如果在js里就不用加@了。因为在style里，就要加@。但是子组件。。。。
样式：
.tab-bar{
display: flex;
}
.tab-bar-item{
flex: 1;
text-align: center;
}
class="tab-bar"放在大div里，class="tab-bar-item"放在选项div。
flex布局（display）
position: fixed;布局位置，left和right都等于0是为了让tab-bar完全盖住页面
box-shadow：水平方向x 垂直方向y 模糊度 阴影的距离 颜色
<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210711144532777.png" alt="image-20210711144532777" style="zoom: 50%;" />
其中颜色：rgba(红,绿,蓝,透明度)。透明度用小数，0不用鞋，直接写.8
flex: 1表示项目等分
text-align: center;在自己的领域居中
一般来说，tab-bar高度为49px。
webpack.base配置
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'views': resolve('src/views'),
}
使用时
src="~assets/img/tabbar/home.svg"
import TabBar from '@/components/tabbar/TabBar'
总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战
