标签：vue const Object 笔记 学习 参数 eslint true

学习笔记

• 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",
      },
    };
    
    

标签：vue,const,Object,笔记,学习,参数,eslint,true
来源： https://blog.csdn.net/qq_40661003/article/details/122563658

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。