学习笔记

• 1.接口请求状态值

  100：临时响应
  
  200：成功
  
  300：重定向
  
  400：访问错误
  
  500：服务器错误；502无响应
  

• 2.css样式
  隐藏滑动条：

  ul::-webkit-scrollbar { display: none;}
  

  控制placeholder：

  :placeholder-shown
  

  table设置tr标签无效：

  border-collapse: collapse;
  

  隐藏input密码框的小眼睛：

  ::-ms-reveal { display: none;}
  

  input光标颜色：

  input{caret-color:red;}
  

• 3.js
  打印本页：

  <el-button type="success" class @click="$print">
  

  判断是否是元素节点：

  node.nodeType==1;(1：元素节点，2：属性节点；3：文本节点)
  

  判断类型：

  Object.prototype.toString.call(参数)
  

  获取自定义属性：

  element.dataset / element.getAttribute
  

  单行文本超出隐藏：

  width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  

  多行文本超出隐藏：

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  

  判断undefined：

  typeof(exp) == 'undefined'
  

  img中src动态拼接：

  require(`../../assets/img/icon-${item.icon}.png`)
  

  字符串转JSON对象 / JSON对象转字符串：

  JSON.parse() / JSON.stringify()
  

  label标签失效：

  for对应id不唯一
  

  检查自身属性中是否具有指定的属性：

  Object.hasOwnProperty()
  

  保留n位小数

  Number(num).toFixed(n)
  

  apply获取数组最大值最小值：

  const arr = [15, 6, 12, 13, 16];
  const max = Math.max.apply(Math, arr); // 16
  const min = Math.min.apply(Math, arr); // 6
  

  数组求和、最大值、最小值

  //求和
  array.reduce((a,b) => a+b);
  //最大值
  array.reduce((a,b) => a>b?a:b);
  //最小值
  array.reduce((a,b) => a<b?a:b);
  

  去除重复值

  const array  = [5,4,7,8,9,2,7,5];
  array.filter((item,idx,arr) => arr.indexOf(item) === idx);
  // or
  const nonUnique = [...new Set(array)];
  // Output: [5, 4, 7, 8, 9, 2]
  
  
  

  判断对象是否具有指定的对象

  Object.hasOwn(sert,'aaa')  //用来代替Object.prototype.hasOwnProperty
  
  
  

  获取对象中的键值对数组

  const obj = {name:"123",age:12};
  console.log(Object.entries(obj))  // [["name","123"],["age","12"]]
  

  对某些字符串实现前后填充，来实现某种格式化效果 padStart padEnd

  //参数一填充的最大长度，参数二填充的字符。默认是空格填充。
  const message = "Hello World"
  const newMessage = message.padStart(15, "*").padEnd(20, "-")
  console.log(newMessage) // ****Hello World-----
  //如果填充的最大长度小于原字符串的长度，那么将会输出原字符串。
  const message = "Hello World"
  console.log(message.padStart(1, 0)) //Hello World
  //如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
  '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
  '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
  
  

  将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组

  //参数，表明需要展开多少层的数组。默认值为1。
  [1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
  [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
  //如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
  [1, [2, [3]]].flat(Infinity) // [1, 2, 3]
  //如果原数组有空位，flat()方法会跳过空位。
  [1, 2, , 4, 5].flat() // [1, 2, 4, 5]
  
  

  通过 Object.entries 将一个对象转换成 entries

  const obj = {
    name: "zh",
    age: 22
  }
  const entries = Object.entries(obj)
  const newObj = Object.fromEntries(entries)
  console.log(newObj) //{ name: 'zh', age: 22 }
  
  

  在es11之前，我们是通过||来运算的。但是它会存在一些问题。当前面一个运算数为0，""等时，依旧会赋值第二个运算数。

  const foo = 0
  const bar1 = foo || "default value"
  const bar2 = foo ?? "defualt value"
  console.log(bar1, bar2) // default value 0
  
  

  将查询字符串转化成一个对象

  const queryString = 'name=zh&age=2'
  const queryParams = new URLSearchParams(queryString)
  console.log(queryParams)  // {'name'=>'zh','age'=>'22'}
  const paramObj = Object.fromEntries(queryParams)
  console.log(paramObj);
  

• 4.jq
  事件委托：

  $("ul").on("click","li.box",function () {})
  

  获取checkbox单选框是否被选中：

  $("input name='reply']:checked").val()
  

• 5.vue2
  强制重新渲染数据：

  this.$forceUpdate()
  

  设置高度无效：

  html,body,#app {height: 100%;}
  

  在子组件中写点击事件：

  @click.native="click()"
  

  vue父组件调用子组件的form的rule验证：

  this.$refs["SelectTime"].$refs.ruleForm.validate(async (valid) => {  })
  

  props父传子：

  props:{ title:{ type:Object,default:()=>{ return '123' } } }
  

  watch深度监听：

  firstName:{handler:function(newVal,oldVal){},deep:true}
  

  获取元素高度：

  this.$refs.slideBox[0].offsetHeight
  

  通过自定义属性实现节流：

      <button v-debounce>确定</button>
  
      import Vue from "vue";
  
      Vue.directive("debounce", {
  
        //节流实现
  
        inserted: function(el, binding) {
  
          el.addEventListener("click", () => {
  
            if (!el.disabled) {
  
              el.disabled = true;
  
              setTimeout(() => {
  
                el.disabled = false;
  
              }, binding.value || 3000);
  
            }
  
          });
  
        }
  
      });
  

• 6.vue3
  获取ref：

  const MyHome = ref<HTMLElement|null>(null)
  

  引用第三方组件库：

  declare global { interface Window {  vrv: any; }} 
  或者 
  declare var vrv: any;=>(shims-vue.d.ts)
  [.eslintrc.js]中globals:{vrv:true};
  

  向ESLint规则中添加全局变量：

  .eslintrc.js中globals
  

  父传子/props获取传值错误：

  list: {type: Array,default:null,},
  

  子组件传值到父组件：

  context.emit("children",'123'); 
  还需要定义
  emits：emits: ["children"],
  

  动态渲染url图片无效：

  url: require("../../assets/img/exam/img-1.png"),
  

  使用vuex

  import { useStore } from "vuex";
  let store = useStore();
  store.state.annualCheck.otherData
  使用mutations的方法
  store.commit("annualCheck/examTimeChange", number);
  使用actions的方法
  store.dispatch("user/setuser", userObj);
  
  

• 7.typescript
  事件获取传参对象

  function text(item: { objType: string; id: string; }){   }
  
  

• 8.正则表达式
  获取富文本中的图片地址并进行替换…/

  str = str.replace(/src="(\.\.\/)*(\w+\/)+\w+\.(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)/gi,v=>{
    v = v.replace(/\.\.\//,'10.0.0.72:8080/common')
    return v;
  })
  

• 9.Vs code
  Format On Save 保存后自动格式化

• 10.SourceTree
  开启文件大小写识别：设置–编辑配置文件：ignorecase = true【false：开启大小写】

• 11.Element-ui

  //验证
  this.$refs.examine.validateField("barCode");
  this.rules.barCode= [{ required: true, message: '请上传图片' }]
  //取消验证
  this.$refs.examine.clearValidate('barCode');
  
  //input只允许输入数字
   @change="value=value.replace(/[^\d]/g,'')"
  
  

• 12.uni-app
  返回上一页并刷新

  let pages = getCurrentPages(); // 当前页面
  let beforePage = pages[pages.length - 2]; // 上一页
  uni.navigateBack({
      success: function() {
          beforePage.onLoad(); // 执行上一页的onLoad方法,不生效通过输出beforePage,查找操作
          
      }
  });
  
  

  获取状态栏高度

  手机的配置信息
  uni.getSystemInfoSync()
  导航栏高度
  uni.getSystemInfoSync().statusBarHeight
  
  

• 13.英文

  handle //操作
  self //自己
  secretary //书记
  check //考核
  increased //新增
  decrease //减少
  edit //编辑
  push //推送
  Apush //已推送
  issue //发布
  Aissue //已发布
  totalPoints //总分
  decide //判断
  
  

• 14.eCharts

  xAxis:
    name //坐标轴名称
    boundaryGap //坐标轴两边留白策略
    axisTick:{
      show:false, //是否显示坐标轴刻度(小尖尖)
    }
    axisLable:{
      align:"center", //坐标轴下文字对齐方式
      fontSize:10, //文字大小
      interval:0, //显示数据时的间隔数
    }
  yAxis:
    splitNumber:5, //坐标轴的分割段数
    offset:-20, //y轴相对于默认位置的偏移
    min:0, //坐标轴刻度最小值
    max:100, //坐标轴刻度最大值
    [axisLable] //同xAxis
  grid:
    left:0, //canvas组件距离左侧绝对值
    top:10%, //canvas组件距离顶部百分比
    right:10,
    bottom:60,
  
  series:
    avoidLabelOverlap:false, //是否启用防止标签重叠
    label:{
      show:true,
      posittion:"center",
      fontSize:18,
      fontWeight:"bold",
      padding:[-100,0,0,0],
      /*
        {a}：系列名
        {b}：数据名
        {c}：数据值
        {d}：百分比
        {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值
        {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数
      */
      formatter: '{b}: {d}', //支持字符串模板和回调函数两种形式:formatter:()=>{return '123'}
      color:"#ff3241",
    },
    itemStyle:{
      borderRadius:[15,15,0,0],//(顺时针左上，右上，右下，左下)
      //渐变色效果，如果使用第一种方式存在鼠标放上颜色变淡，可以使用第二种方式，改为相同颜色
      //第一种方式，一种颜色
      color:"#ff3241",
      //第二种方式，渐变色
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0,color: "#fe9516"},{offset: 1, color: "#ffcb8c"},
      ]),
    },
    symbol:"base64", //标记的图形
    symbolSize: 18, //标记的大小
    symbolRotate: 6, //标记的旋转角度
    barWidth: 57, //柱状图柱子宽度
  
  

• 15.面试题
  i18n：Vue I18n 是 Vue.js 的国际化插件。实现中英文切换

  call,apply,bind的区别

  作用：call、apply、bind作用是改变函数执行时的上下文，改变this指向
  区别：
    apply：
      接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入
      改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
      当第一个参数为null、undefined的时候，默认指向window(在浏览器中)
    call：
      接受n个参数，第一个参数是this的指向，第二个以及第二个往后都是参数
      改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
      当第一个参数为null、undefined的时候，默认指向window(在浏览器中)
    bind：
      bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
      改变this指向后不会立即执行，而是返回一个永久改变this指向的函数
  
  

  实现bind

  Function.prototype.myBind = function (context) {
      // 判断调用对象是否为函数
      if (typeof this !== "function") {
          throw new TypeError("Error");
      }
      // 获取参数
      const args = [...arguments].slice(1),
            fn = this;
      return function Fn() {
          // 根据调用方式，传入不同绑定值
          return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments)); 
      }
  }
  

• 16.npm
  安装yarn

  npm install -g yarn
  ##检查是否安装成功
  yarn --version
  ##yarn换源 安装淘宝镜像
  yarn config set registry https://registry.npm.taobao.org
  ##yarn全局安装vite
  yarn create vite@2.7.2
  
  

• vite-project
  引入normalize.css

  //安装依赖
  npm install normalize.css --save
  //main.ts引入
  import 'normalize.css'
  

  引入eslint配置

  npm install --save-dev eslint eslint-plugin-vue
  or 
  yarn add -D eslint eslint-plugin-vue
  根目录创建.eslintrc.js
  
  

  • .eslintrc.js

    module.exports = {
      root: true,
      env: {
        node: true,
      },
      plugins: ["simple-import-sort"],
      extends: [
        "plugin:vue/vue3-recommended",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint",
      ],
      globals: {
        JSPlugin: true,
        vrv: true,
      },
      parserOptions: {
        ecmaVersion: 2020,
      },
      rules: {
        "no-console": "off",
        "no-debugger": "off",
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": ["error"],
        "@typescript-eslint/no-var-requires": 0,
        // "@typescript-eslint/explicit-module-boundary-types": "off",
      },
    };