基础常识整理

大娱
173 阅读4分钟

1、vue的路由跳转及传参有哪些方式？

1、router-link 跳转的方法
有时候跳转时需要传递一个数组，数组中带有多个参数，简便方法如下
<!-- 直接跳转 -->
<router-link to='/testDemo'>
   <button>点击跳转2</button>
</router-link>
 
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
   <button>点击跳转1</button>
</router-link>
 
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
   <button>点击跳转3</button>
</router-link>

<router-link to="/HH?setid=123qq">跳转到至HelloVue</router-link>
如下的work数组中传递多个参数 id title img等等多个参数时
<router-link tag="aa" :to="{path:'/目标路径',query:{arry:work}}">
export default{
  data(){
      return{
          work:[ ],
      }
  }
}
在跳转到的页面中用 created()接收
created(){
   this.work=this.$route.query.arry;
}

2、点击方法跳转
<template>
   <div id='test'>
       <button @click='goTo()'>点击跳转4</button>
   </div>
</template>
<script>
   export default{
       name:'test',
       methods:{
           goTo(){
               //直接跳转
               this.$router.push('/testDemo');
 
               //带参数跳转
               this.$router.push({path:'/testDemo',query:{setid:123456}});
               this.$router.push({name:'testDemo',params:{setid:111222}});
           }
       }
   }
</script>
  接收页面
created(){
       this.id=this.$route.params.orderId;
       console.log(this.id)
   }

2、什么是闭包？优缺点是什么？

  • 闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量， 所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

  • 特性： 函数嵌套函数。 函数内部可以引用外部的参数和变量。 参数和变量不会被垃圾回收机制回收。

  • 优点： 希望一个变量长期存储在内存中。 避免全局变量的污染。 私有成员的存在。

  • 缺点： 常驻内存，增加内存使用量。 使用不当会很容易造成内存泄露。

3、VueX用过吗（Vue状态管理模式)？

  • state 存放状态

  • mutations state成员操作

  • getters 加工state成员给外界

  • actions 异步操作

  • modules 模块化状态管理

    www.jianshu.com/p/2e5973fe1…

4、使用css画三角写？

  • 三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

5、数组的内置方法

1、join（连接字符）；将数组中的元素通过给定的连接字符连接成一个字符串

let s1 = arr.join('-');//数组元素之间用'-'来连接，默认','号连接

2、push（值/变量）：从数组的末尾向数组添加元素

arr.push('合规');

3、pop()从数组的末尾删除元素，一次只删除一个，返回被删除的元素。无需传参

let item = arr.pop();

4、shift()从数组的首部开始删除元素；

let t1 = arr.shift();//将删除的元素赋值给t1

5、unshift(值/变量)从数组的首部插入元素

arr.unshift('合规')

6、reverse()将数组元素颠倒顺序

let a2 = arr.reverse();

7、contact()连接两个或多个数组

let temp = [11,14,,15,16];
let newArr = arr.concat(temp);

6、交换两个变量的值，不使用第三个变量

加减实现：
a = 10
b = 20
a = a + b
b = a - b
a = a - b
consolg.log(a, b) //20 10
乘除实现：
a = 10
b = 20
a = a * b
b = a / b
a = a / b
consolg.log(a, b)  // 20.0   10.0   小数点是因为python中除法结果为浮点型
异或实现(^)
对异或的简单概述就是相同为假(0)，相异为真(1)。
异或操作主要的关键点在于：假设a^b=c，则c^b=a，c^a=b，也就是说一个数连续异或同一个数两次结果不变。
我们都知道计算机中数据都是以二进制形式存储的，现在任意假设两个变量a, b的二进制，a=101101，b=001010，a^b^b=a^(b^b)，而根据异或的定义，任意数和自身异或都会等于0，例如上述b^b=001010^001010=000000。同样根据异或的定义，任何数和0异或都会等于这个数本身，就像a^0=101101^000000=101101。
# 异或实现
a = 10
b = 20
a = a ^ b
b = a ^ b
a = a ^ b
consolg.log(a, b)  //20   10

7、节流和防抖

节流：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。如：获取验证码，只执行第一次

防抖：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。如输入框搜索多次点击，只执行最后一次

avatar
文章
阅读
粉丝