vue2

零碎js相关

同步异步

  • fetch(url，options)//返回Promise
  • 同步
  • const 结果=await Promise
  • await关键字必须在一个标i记了async的function内来使用
  • 异步
  • Promise.then(结果=>{…})

导入导出

  • js src导入比较早的不支持导入导出，可以不同源策略
  • js type=“module” ，可以导入导出，必须同源策略

导包方式

  • require
  • import方式
  • 需要在package.json中配置type：module属性
  • require表示的是运行时加载。而import表示的是编译时加载（效率更高），由于是编译时
    加载，所以import命令会提升到整个模块的头部。

异常处理

环境准备

  1. 安装脚手架
  2. 创建项目
  3. 安装 devtools
  4. 修改端口
  5. 添加代理(也可以后端解决跨域)
  • 为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理
  • 代理性能比较不好

项目结构

assets - 静态资源

components - 可重用组件

router - 路由

store - 数据共享

views - 存放视图组件

  • 文件以 .vue 结尾，每个组件由三部分组成
  • template 模板部分，由它生成 html 代码
  • script 代码部分，控制模板的数据来源和行为
  • style 样式部分，一般不咋关心

api - 跟后台交互，发送 fetch、xhr 请求，接收响应

plugins - 插件

基础

文本插值

  • 插值表达式{{}}

属性绑定

  • 简写方式：可以省略 v-bind 只保留冒号

事件绑定

  • 简写方式：可以把 v-on: 替换为 @
  • 在 methods 方法中的 this 代表的是 data 函数返回的数据对象

双向绑定

  • javascript 数据可以同步到表单标签
  • 反过来用户在表单标签输入的新值也会同步到 javascript 这边
  • 双向绑定只适用于表单这种带【输入】功能的标签，其它标签的数据绑定，单向就足够了
  • 复选框这种标签，双向绑定的 javascript 数据类型一般用数组

计算属性

  • 普通方法调用必须加 ()，没有缓存功能
  • 计算属性使用时就把它当属性来用，不加 ()，有缓存功能
  • 一次计算后，会将结果缓存，下次再计算时，只要数据没有变化，不会重新计算，直接返回缓存结果

axios

底层是用了 XMLHttpRequest（xhr）方式发送请求和接收响应，xhr 相对于之前讲过的 fetch api 来说，功能更强大，但由于是比较老的 api，不支持 Promise，axios 对 xhr 进行了封装，使之支持 Promise，并提供了对请求、响应的统一拦截功能

安装、导入

方法

  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.options(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

说明

  • config - 选项对象、例如查询参数、请求头…
  • data - 请求体数据、最常见的是 json 格式数据
  • get、head 请求无法携带请求体，这应当是浏览器的限制所致（xhr、fetch api 均有限制）
  • options、delete 请求可以通过 config 中的 data 携带请求体

axios 对象的常见的 config 项

  • baseURL
  • 将自动加在 url 前面
  • 生产环境希望 xhr 请求不走代理，可以用 baseURL 统一修改
  • headers
  • 请求头，类型为简单对象
  • params
  • 跟在 URL 后的请求参数，类型为简单对象或 URLSearchParams
  • data
  • 请求体，类型有简单对象、FormData、URLSearchParams、File 等
  • withCredentials
  • 跨域时是否携带 Cookie 等凭证，默认为 false
  • 希望跨域请求携带 cookie，需要配置 withCredentials: true，服务器也要配置 allowCredentials = true，否则浏览器获取跨域返回的 cookie 时会报错
  • responseType
  • 响应类型，默认为 json

响应格式

  • data
  • 响应体数据
  • status
  • 状态码
  • 200 表示响应成功，400 请求数据不正确 age=abc，401 身份验证没通过，403 没有权限，404 资源不存在，405 不支持请求方式 post，500 服务器内部错误
  • headers
  • 响应头

拦截器

  • 请求拦截器
  • 响应拦截器

条件渲染与条件渲染

  • v-if 和 v-for 不能用于同一个标签
  • v-for 需要配合特殊的标签属性 key 一起使用，并且 key 属性要绑定到一个能起到唯一标识作用的数据上，比如id这种
  • options 的 mounted 属性对应一个函数，此函数会在组件挂载后（准备就绪）被调用，可以在它内部发起请求

重用组件

  • 按钮组件
  • 定义一个MyButton.vue
  • 使用组件
  • 引用的地方导入import MyButton，然后徐使用标签

el(进阶)

安装、引入ElementUI

表格组件

分页组件

  • 三种情况都应该触发查询
  • mounted 组件挂载完成后
  • 页号变化时
  • 页大小变化时
  • 查询传参应该根据后台需求，灵活采用不同方式
  • 返回响应的格式也许会很复杂，需要掌握【根据返回的响应结构，获取数据】的能力

分页搜索

级联选择

布局

  • 通常主页要做布局
  • 路由跳转
  • 标签式
  • 编程式@click=“jump(’/c1/p1’)”
  • jump(url) {
    this.$router.push(url);
    }
  • 其中 this.$router 是拿到路由对象
  • push 方法根据 url 进行跳转

导航菜单

  • el-menu 标签上加上 router 属性，表示结合导航菜单与路由对象，此时，就可以利用菜单项的 index 属性来路由跳转

动态菜单

router

vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示

配置路由

  • 一般放在某个具体的js，例如main.js或者index.js等
  • 最重要的就是建立了【路径】与【视图组件】之间的映射关系
  • 动态导入
  • 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
  • 动态导入是将组件的 js 代码放入独立的文件，用到时才加载
  • 起到占位作用，改变路径后，这个路径对应的视图组件就会占据 的位置，替换掉它之前的内容

嵌套路由

  • 组件内再要切换内容，就需要用到嵌套路由（子路由）
  • redirect 可以用来重定向（跳转）到一个新的地址
  • path 的取值为 * 表示匹配不到其它 path 时，就会匹配它

动态路由

  • router.addRoute(param1,param2)
  • 参数1：父路由名称
  • 参数2：路由信息对象
  • 这里要注意组件路径，前面 @/views 是必须在 js 这边完成拼接的，否则 import 函数会失效

重置路由

  • 在用户注销时应当重置路由

页面刷新

  • 页面刷新后，会导致动态添加的路由失效，解决方法是将路由数据存入 sessionStorage

vuex

其实主要解决的是不同组件之间的数据共享问题

  • 利用浏览器的storage比如sessionstorage可以解决，但是假如一个组件修改了值后，对面需要重新获取一下才能获取这个新值，不友好，所以引入响应式技术，就是修改后立马能让调用方感知

首先需要定义 state 与 mutations 他们一个用来读取共享数据，一个用来修改共享数据

mutations 方法不能直接调用，只能通过 store.commit(mutation方法名, 参数) 来间接调用

mapState

  • 每次去写 $store.state.name 这样的代码显得非常繁琐，可以用 vuex 帮我们生成计算属性
  • 返回的是一个对象，对象内包含了 name() 和 age() 的这两个方法作为计算属性
  • 此对象配合 … 展开运算符，填充入 computed 即可使用

mapMutations

  • 类似的，调用 mutation 修改共享数据也可以简化
  • mapMutations 返回的对象中包含的方法，就会调用 store.commit() 来执行 mutation 方法
  • 注意参数传递略有不同

actions

  • mutations 方法内不能包括修改不能立刻生效的代码，否则会造成 Vuex 调试工具工作不准确，比如如果在mutations方法中包含了异步操作，会造成开发工具（就是按F12，如果安装了一个vue的插件，就会显示一个开发工具）不准确，必须把这些代码写在 actions 方法中
  • 在actioin中，间接调用 mutations中的方法
  • mapActions 会生成调用 actions 中方法的代码
  • 调用 actions 的代码内部等价于this.$store.dispatch(‘action名称’, 参数)，它返回的是 Promise 对象，可以用同步或异步方式接收结果

读取数据，走 state, getters,修改数据，走 mutations, actions

实战项目分析

根据开源项目vue-element-admin进行源码分析，改造

改造点

  • 登陆国际化
  • 登录的session存储，localstorage?sessionstorage?cookie?
  • 第三方登录token的获取，涉及新老页面传值问题
  • 登录后permission获取

增加demo的crud

  • 增加路由
  • 增加api从后端获取数据
  • view增加视图