vue2相关

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增加视图