前端笔记

1 Vue2相关语法

1.1 父子组件传参

B站Up主讲解挺清楚的，这里记录下。
https://www.bilibili.com/video/BV1Ut4y1N7tS/?spm_id_from=333.788&vd_source=cf6bd8c13e463b1f65d6ad155f8b711d

1、父组件向子组件传递参数，通过子组件的props属性，属性内容为传递参数

2、子组件向父组件传参；子组件创建一个函数，由函数传参（相当于定义一个带参数的函数）；而父组件来实现子组件的定义函数，并且自动获得函数的传递参数

1.2 Vuex学习

2.2 VUE中根据文件后缀名显示对应的图标

使用方法

提供代码

Vue中的使用方法

        <el-table-column
          prop="name"
          label="文件名"
          width="280"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
             <span v-if="scope.row.type=='文件夹'">
               <img src="../Components/images/folder.png" width="18px" height="15px">
               {{ scope.row.name }}
             </span>
            <span v-if="scope.row.type=='文件'">
              <img :src="require('../Components/images/'+  matchType()(scope.row.name)  +'.png')" width="18px" height="15px"/>
              {{ scope.row.name }}
             </span>
          </template>
        </el-table-column>

matchType.js文件的全部内容

// 根据文件名后缀区分 文件类型
/*
 * @param: fileName - 文件名称
 * @param: 数据返回 1) 无后缀匹配 - false
 * @param: 数据返回 2) 匹配图片 - image
 * @param: 数据返回 3) 匹配 txt - txt
 * @param: 数据返回 4) 匹配 excel - excel
 * @param: 数据返回 5) 匹配 word - word
 * @param: 数据返回 6) 匹配 pdf - pdf
 * @param: 数据返回 7) 匹配 ppt - ppt
 * @param: 数据返回 8) 匹配 视频 - video
 * @param: 数据返回 9) 匹配 音频 - radio
 * @param: 数据返回 10) 其他匹配项 - other
 */
function matchType(fileName) {
  console.log("fileName = ",fileName)
  // 后缀获取
  var suffix = '';
  // 获取类型结果
  var result = '';
  try {
    var flieArr = fileName.split('.');
    suffix = flieArr[flieArr.length - 1];
  } catch (err) {
    suffix = '';
  }
  // fileName无后缀返回 false
  if (!suffix) {
    result = false;
    return result;
  }
  // 图片格式
  var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
  // 进行图片匹配
  result = imglist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'image';
    return result;
  };
  // 匹配txt
  var txtlist = ['txt'];
  result = txtlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'txt';
    return result;
  };
  // 匹配 excel
  var excelist = ['xls', 'xlsx'];
  result = excelist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'excel';
    return result;
  };
  // 匹配 word
  var wordlist = ['doc', 'docx'];
  result = wordlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'word';
    return result;
  };
  // 匹配 pdf
  var pdflist = ['pdf'];
  result = pdflist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'pdf';
    return result;
  };
  // 匹配 ppt
  var pptlist = ['ppt'];
  result = pptlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'ppt';
    return result;
  };
  // 匹配 视频
  var videolist = ['mp4', 'm2v', 'mkv'];
  result = videolist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'video';
    return result;
  };
  // 匹配 音频
  var radiolist = ['mp3', 'wav', 'wmv'];
  result = radiolist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'radio';
    return result;
  }

  // 匹配 压缩包
  var packagelist = ['zip', 'rar', 'tar'];
  result = packagelist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'zip';
    return result;
  }

  // 匹配 CSV
  var CSVlist = ['csv'];
  result = CSVlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'csv';
    return result;
  }

  // 匹配 SQL
  var SQLlist = ['db'];
  result = SQLlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'sql';
    return result;
  }

  // 其他 文件类型
  result = 'other';
  return result;
}

//关键
export {
  matchType
}

效果展示

图标、矢量图资源

网址：https://www.cnblogs.com/youmingkuang/p/11926849.html

3 Vue程序Debug调试

官网Vue调试添加配置：https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html