vue-vue.js个人视频学习笔记（二）

P94 安装CLI错误和ESLint规范(通过脚手架构建项目并回顾项目结构)

• ESLint的校验效果

  • 定义方法名字的时候留一个空格再写（），例如function add (num1,num2){}
  • 不能随便用分号例如调用上面的方法 console.log(add(1+2))，之后不能加分号，不然报错

  

• 手动关掉ESLint

  

P95 RuntimeOnly 和 RuntimeComplicer 区别

runtime-compiler 和 run runtime-only

P96 介绍vueCli3创建项目和目录结构

• 创建：vue create +项目名字

• 选择默认套餐还是手动选择套餐（空格选择）

  -

• 选择配置文件设置

  -

• 版本控制

  =

• 脚手架跑起来(npm run serve)

  =

  =

• mian.js解析

  =

P97 vue-cli3配置文件的查看和修改

P98 箭头函数的使用 和 this指向（有点像lambda语法）

-

=

=

==-

=

P99 什么是路由和映射关系

路由转发（路由表）根据表的映射，找出要转发的电脑，由路由转发

P100 前端渲染和后端渲染，前端路由和后端路由

• 后端渲染(服务器渲染，服务器压力巨大) 和后端路由

  前端请求之后，服务器解析然后返回数据，然后直接在服务器生成前端界面，然后呈递给前端

  

  

  

• 前端渲染

  后端只负责处理数据和返回查找的数据，不生成画面，前端根据后端呈递的数据渲染

• 前端路由

  • 浏览器请求，然后服务器下载所有的资源下来

  • 接着根绝不同的请求，前端路由再分别从所有资源中抽取出相对应的资源进行渲染

    =

    

P101 URL的hash 和HTML的history

• location.hash = ‘’;(不刷新界面，只是直接在原链接后拼接url而且网页不刷新)

• history.pushState()，数据压入参考入栈，返回的时候就是出栈（类似浏览器点击返回，返回上一节界面）

• history.replace()，是属于链接替换的，与pushState的区别是不能返回上一页

  =

• history.go(-1) == history.back()，返回上一页

  

P102 vue-route的安装和配置方式

src/router/index.js 的路由配置信息

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

路由的mian.js 挂载

P103 路由映射配置的呈现

• src/components 创建组件

• src/router 注入组件和编辑映射

  

• 通过 route-link 和 route-view 显示

  

  

• 效果

  

  touter-view是个占位，home和about都在占位处渲染

P104 路由的默认设置和修改history模式

P105 router-link 其他属性补充

P106 通过代码跳转路由

P107 vue-router动态路由的使用

其实就是动态给请求的链接拼接参数

-

获取拼接的参数

另一种写法

P108 vue-router 打包文件的解析（路由懒加载）

在运行 npm run build 的时候，会把项目打包，然后dist生成static存储生成的css，js文件

P109 vue-router 懒加载的使用

P110 vue-router的嵌套使用

• 在原路径内再有分支路径

• 效果

-

• 设置默认路径，例如打开home之后默认打开 home/message

P111 vue-router 参数传递

• 第一种方式

• 第二种方式

  

P112 参数传递2

P113 vue-router 和 route 的由来

个人理解：router是调用封装的工具，比如里面有内置的push等方法，而route是表示显示当前活跃的路由的信息

-

P114 vue-router全局导航守卫

• 导航守卫的作用

  监听你是从哪里到哪里的

P115 vue-router全局导航守卫补充

P116 keep-alive的作用

当切换到另一个界面的时候，需要重新渲染，keep-alive是避免重复的界面多次重新渲染，类似缓存

这样没打开一个需要重新渲染，为了避免频繁写入写出，引入了 keep-alive

P117 vue keep-alive 属性介绍