vue项目记录

尚品汇项目总结(记录脑子抽风时遇到的问题)

初始化css文件中有一个@import "./iconfont.css";因为没有这个文件所以会一直报错删除ok

路由

1. 路由使用箭头函数映射组件 component: () => import('@/page/Login'),
2. 在路径占位符后加个?可一设置params参数可以传递也可以不传递path: '/search/:commodity?',
3. 如果写了占位符但是没有传参或者传递的值为空字符串或者没设置非必须会导致路径为题路由路径缺失
4. 
5. 传递空字符串可用undefined解决
   1. 但是浏览器会给一个警告
   2. 
   3. 提示需要给参数设置非必须
6. 配置路由时也可以配置props来接收参数
   1. props为true时 在组件内可以直接props声明接收
   2. props为箭头函数时箭头函数参数为路由对象
   3. props为对象
7. 路由重复跳转会导致页面报错因为路由回调形式为promise形式 返回值是个promise对象 promise必须要传递一个成功或失败的回调所以会报错
8. 

暴露方式问题

1. 如果使用分别暴露需要使用解构赋值的方式引入

   1. export const router = new VueRouter({
        //   base: '/',
        //   mode: 'history',
        routes,
      });
      

   2. import { router } from '@/router';
      

css

cursor: pointer; 使鼠标指针变为小手

white-space CSS 属性是用来设置如何处理元素中的

flex布局

1. flex-wrap :
   1. flex-wrap: nowrap; 不允许换行
   2. flex-wrap: wrap; 允许换行
   3. flex-wrap: wrap-reverse; 换行反转顺序
2. flex-direction
   1. 定义主轴方向，正反方向
3. align-content 垂直方向的空间分配
4. justify-content 水平方向的空间分配
5. align-items 控制十字轴上的空间分配

c

鼠标移入移出绑定样式

1. 绑定移入事件添加背景颜色
2. 绑定移出事件移除背景颜色
   1. 当鼠标移动到全被分类时不移除样式
      1. 
   2. 利用事件委派实现
      1. 将子元素绑定的事件移动到父元素上利用事件冒泡实现功能
3. 动态样式绑定写法
   1. 对象写法
      1. <div v-bind:class="{ active: isActive }"></div>
   2. 数组写法
      1. <div v-bind:class="[activeClass, errorClass]"></div>
   3. 在组件上使用时并不会覆盖已经定义的class样式

防抖和节流

1. 使用npm包 loadsh实现

   1. lodash.throttle | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)

2. 使用js实现

   1. export let antiShake = (fn, time = 200) => {
        let timer = null;
        return function (...args) {
          if (timer) clearTimeout(timer);
          setTimeout(() => {
            fn.apply(this, args);
          }, time);
        };
      };
      

   2. export let throttle = (fn, time = 200) => {
        let flag = true;
        return function (...args) {
          if (!flag) return;
          setTimeout(() => {
            fn.apply(this, args);
            flag = true;
          }, time);
        };
      };
      

   3. 使用这些函数时不能传递箭头函数会导致this指向问题

如果需要给表单中的按钮绑定事件一定要禁止默认行为不然会产生路径问题导致路由无法跳转

1. 解决办法就是阻止默认行为 使用vue的事件修饰符 prevent