尚品汇 ---day2

跨域问题:

当协议,域名,端口号中有一个不同的时候.

一般通过代理解决问题.

// 代理跨域问题, 在配置文件中 vue.config.js中
  devServer:{
    proxy:{
      '/api':{
        target:'请求数据的URL',
      }
    }
  }

vuex: 官方一个插件, 状态管理库,集中式管理项目中组件共用的数据.

// state:仓库存储数据的地方
const state = {};
// mutations: 修改state的唯一手段
const mutations = {};
// action: 处理action,可以书写自己的业务逻辑,也可以处理异步
const actions = {};
// getters: 理解为计算属性, 用户简化仓库数据,让组件获取仓库的数据更加方便
const getter = {};

过渡动画: 组件|元素务必要有v-if / v-show指令才可以进行过渡动画.

或者给标签设置名字 name = "", 这样也可以设置过渡.

---

mock: 用来拦截ajax请求, 生成随机数据返回

下载mock模块 npm install mockjs

import Mock from 'mockjs' 先引入模块

我们使用json数据时候,有时候会报错,通过下载插件(Prettier - Code formatter)

再者鼠标右键出现使用...格式化文档,然后格式化,不能出现空格,避免出错.

把mock数据需要的图片放置在public文件夹中,这样public文件夹在打包的时候,会把相应的资源原封不动打包到dist文件夹中.

 ---

Swiper:  pc端轮播图:  js中插件

1. 引包(相应JS|CSS)

2. 页面中结构无比要有

3. new swiper实例(轮播图添加动态效果)

---

处理轮播图中的异步问题:

watch + nextTick : 数据监听, 监听已有的数据变化

$nextTick : 在下次DOM更新 循环结束之后 执行延迟回调, 在 修改数据之后 立即使用这个方法,获取更新后的DOM.

$nextTick: 可以保证页面中的解构一定是有的, 经常和很多插件一起使用(都需要DOM存在了)