复习知识点整理

Blizzar_front-end

已于 2024-04-16 16:27:42 修改

阅读量726

点赞数 2

分类专栏： Vue2 文章标签：前端

于 2024-04-03 18:19:04 首次发布

本文链接：https://blog.csdn.net/m0_51195865/article/details/137354270

版权

Vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue流程

模板在渲染的时候，如果使用了ajax请求，ajax是异步请求，则模板第一次渲染完成之后，如果ajax请求的返回值更新了响应式数据，那么模板会在渲染一次
第一次渲染的时候，ajax返回值还未更新响应式数据，那么在第一次渲染的时候调用返回值中的变量名（响应式数据的初始值定义为返回值），会报错，可以使用v-if=“Object.keys(响应式数据).length” 则不知直接用v-if=“空对象”
只有 NaN 0 ’ ’ undefined null转成布尔值为flase，其余转成布尔值都为true
未返回值时候响应式数据是空对象的时候不渲染，待ajax返回值时在显示

零碎语法

1.导入某个文件夹的index文件，index可以省略（这里导入的是router和store文件下的index.js文件）
在这里插入图片描述
2.直接在对象后面加？（？.属性或方法是ES6语法）

找的到前面的对象就调用后面的方法，否则不调用

2.路由懒加载

this

1.在vue文件中使用router\store对象时

this：普通函数的this指向vue实例对象(在没有明确指向的时候this指向window)
router和store挂载在vue上之后
在模板中使用 router或store的方法为 $router.xxx或$store.xxx
在方法中调用方式为：this.$router.xx或this.$store.xxx

2.在js文件中使用router\store对象时
使用什么需要导入时候，挂载在vue全局对象上的对象在vue文件中可以使用，在js文件中不能使用

网络通信

axios功能拆分写法

在这里插入图片描述
还可以配置拦截器

import axios from 'axios'

// 下面是克隆一份新的axios
const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net',
  timeout: 5000
})
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 在发送请求之前做些什么
  // config === https://www.axios-http.cn/docs/req_config === 请求的配置对象
  const token = localStorage.getItem('mobile-token')
  config.headers.Authorization = `Bearer ${token}`
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

export default request

css预处理（Sass\Stylus\Less\Scss）

在这里插入图片描述

参考

token

将token存储到vuex中比存储到本地更快，但是只要页面一刷新token就失效，想要永久存储还是需要在本地存储中存储一份token
//举例(只在页面刷新的时候用到了本地存储，添加请求头用的token是从vuex中取，不用在从本地存储中取

export default {
  namespaced: true,
  state: {
    token: localStorage.getItem('mj-pc-token')

  },
  mutations: {
    updateToken (state, newToken) {
      state.token = newToken
      localStorage.setItem('mj-pc-token', newToken)
    }
  },
  actions: {

  }
}

项目打包

参考

cookie持久化（类似localstroage，只是换了一种方案）

在这里插入图片描述
document.cookie 会获取所有cookie的字符串
不方便获取自己需要的
这里js-cookie插件(封装了各种方法)

// 专门用来操作cookie的方法包
// 内部封装了繁琐的操作方法 参数处理 暴露三个函数 get,set,remove
import Cookies from 'js-cookie'
import { TOKEN_KEY } from '@/constants/KEY'  //TOKEN_KEY为存cookie的键，把所有的常量都封装到一个单独的文件中，目的是方便维护
// 获取token的方法
export function getToken() {
  return Cookies.get(TOKEN_KEY)
}

// 设置方法
export function setToken(token) {
  return Cookies.set(TOKEN_KEY, token)
}

// 删除方法
export function removeToken() {
  return Cookies.remove(TOKEN_KEY)
}