vue&vue-cli 3.0项目中遇到的有趣问题（四）

1、vue中页面跳转的方式

写在html中：

<router-link :to="{name:'*****'}"></router-link>

<router-link :to="{path:'*****'}"></router-link>

<a href="*****"></a>


<router-link :to="{name:'*****'}" target="*****"></router-link>

<router-link :to="{path:'*****'}" target="*****"></router-link>

<a href="*****" target="*****"></a>

写在js中：

this.$router.push({ name: '*****' });

this.$router.push({ path: '*****' });

this.$router.go(数字)；0为熟悉本页面，-1为返回上一页

window.location.reload();

window.location.href='*****';

window.open('*****');

window.open('*****', '_blank', 'width=580,height=580,menubar=no,toolbar=no,status=no,scrollbars=yes');

const routeData = this.$router.resolve({name: '*****');
window.open(routeData.href, '_blank');

const routeData = this.$router.resolve({path: '*****');
window.open(routeData.href, '_blank');

2、逐行展示，多余省略的样式编写

p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: 20px;
    overflow: hidden;
}

p{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3、取消div滚动的滑轮的设置

div{
	&::-webkit-scrollbar {
    	/*兼容谷歌*/
    	display: none;
	}
    /*兼容火狐*/
    scrollbar-width: none;
    /*兼容IE*/
    -ms-overflow-style: none;
}

4、div居中方法汇总

《前端css设置div垂直水平居中的方法总结》

5、合并两个数组方法总结

1、for循环遍历

let a = [1, 2, 3, 4, 5];
let b = [5, 6];
for (let i = 0; i < b.length; i++) {
	a.push(b[i]);
}
console.log(a);

2、当b数组元素很少的时候，可以直接嵌进去

let a = [1, 2, 3, 4, 5];
let b = [5, 6];
a = [1, 2, 3, 4, 5, b[0], b[1]];
console.log(a);

3、concat
js的Array对象提供了一个叫concat()方法，连接两个或更多的数组，并返回结果。即concat方法连接a、b两个数组后，a、b两个数组的数据不变，同时会返回一个新的数组。

let a = [1, 2, 3, 4, 5];
let b = [5, 6];
a = a.concat(b);
console.log(a);

4、apply
函数的apply方法有一个特性，那就是func.apply(obj,argv)，argv是一个数组。上代码：a.push.apply(a,b)，调用a.push这个函数实例的apply方法，同时把，b当作参数传入，这样a.push这个方法就会遍历b数组的所有元素，达到合并的效果。

let a = [1, 2, 3, 4, 5];
let b = [5, 6];
a.push.apply(a, b);
console.log(a);

6、原生修饰符native的用法

就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触发的。该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
比如，如下的vue输入框，直接使用@keyup.enter是不起效果的，但是加上.native修饰符之后就可以起效果。

<el-input
   class="inline-input"
   v-model="title"
   @keyup.enter="handleInput(title)"
   placeholder="请输入内容">
</el-input>

<el-input
   class="inline-input"
   v-model="title"
   @keyup.enter.native="handleInput(title)"
   placeholder="请输入内容">
</el-input>

7、setInterval第一次执行时存在延迟的解决方法

我们平时在使用setInterval的时候发现其会先等待一段时间在执行，而不是立即执行。随意一般情况下，我都是在此函数之前先调一下需要延时循环的函数，但是这样并不美观，所以我便开始搜找解决方法。

解决方法：
在使用setInterval（function,delayTime）方法时，发现它会为函数的第一次调用也做延迟。一般我们都是第一次立即调用，然后延迟调用。我找到的解决方法如下：

需要延迟调用的函数：

mounted () {
	// 开启延时循环
	setInterval(this.setAction(), 1000); // 会立即执行
	setInterval(this.setAction, 1000); // 先等待一段时间在执行
},
methods: {
    // 加入会员根据不同状态跳转,后续会修改
    setAction () {
      console.log('a');
      //第一次执行完成后返回这个函数
      return this.setAction;
    }
}

补充： js中函数参数如果是”函数名+()“，则会先执行函数，然后将返回值作为真正的参数。
相反参数没加“（）”则会被作为一个函数块指针，不先执行。 在这里我们就可以利用这一特点实现所需要的效果。

8、vue 动态组件(component :is)的使用

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
 	<blog-post-row></blog-post-row>
</table>

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
 	<tr is="blog-post-row"></tr>
</table>

可以看出，is提供了一个途径，让我们用自定义组件，替换其他的HTML元素。使用时只需加上属性 is=“自定义组件名”。
在这种为了解除dom元素限制，自由渲染自定义组件的场景下，仅需渲染一次，所以is的值写死为自定义组件的名称就可以了。

博主，这边使用:is来切换pc端和mobile端页面的

<template>
  <div class="container">
    <component :is="showPage"></component>
  </div>
</template>

<script>
import pcHome from './pc/p-home.vue';
import mobileHome from './mobile/m-home.vue';

export default {
  computed: {
    showPage () {
      const pages = {
        pc: pcHome,
        mobile: mobileHome
      };
      const device = this.$store.state.device;
      return pages[device];
    }
  }
};
</script>

<style lang="scss" scoped></style>

参考文章原地址《vue 动态组件(component :is) 和 dom元素限制(is)用法说明》

9、Array方法集合

1、join(separator)——将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。返回值为拼接而成的字符串，且不改变原数组。

let arr = [1, 2, 3];
console.log(arr.join()); // 1, 2, 3
console.log(arr.join('-')); // 1-2-3
console.log(arr); // [1, 2, 3]

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：

function repeatString(str, n) {
	return new Array(n + 1).join(str);
}
console.log(repeatString('i', 5)); // HiHiHiHiHi

2、push()——可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.push(4, 5)); // 5
console.log(arr); // [1, 2, 3, 4, 5]

3、pop()——数组末尾移除最后一项，返回移除的项，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.pop()); // 3
console.log(arr); // [1, 2]

4、shift()——删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined ，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.shift()); // 1
console.log(arr); // [2, 3]

5、unshift()——将参数添加到原数组开头，并返回数组的长度 ，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.unshift(4, 5)); // 5
console.log(arr); // [4, 5, 1, 2, 3]

6、sort()——按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。需要注意，在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

let arr1 = ['a', 'b', 'c', 'd'];
console.log(arr1.sort()); // ['a', 'b', 'c', 'd']
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

sort()默认是升序排列，但有时我们需要降序排列怎么办，通过如下方法：

let arr = ['a', 'b', 'c', 'd'];
console.log(arr.sort()); // ['a', 'b', 'c', 'd']
arr.sort(function(a, b){return a - b});
console.log(arr); // ['d', 'c', 'b', 'a']

7、reverse()——反转数组项的顺序，不改变原数组。

let arr = [13, 24, 51, 3];
console.log(arr.reverse()); // [3, 51, 24, 13]
console.log(arr); // [3, 51, 24, 13]

8、concat()——将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本，不改变原数组。

let arr = [1, 3, 5, 7];
console.log(arr.concat(9, [11, 13])); // [1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7]

9、slice()——返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

let arr = [1, 3, 5, 7, 9, 11];
console.log(arr.slice(1,4)); // [3, 5, 7]

10、forEach()——对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

let arr = [1, 2, 3, 4, 5];
arr.forEach((x, index, a) => {
console.log(x + '|' + index + '|' + a));
});

// 输出为：
// 1|0|[1, 2, 3, 4, 5]
// 2|1|[1, 2, 3, 4, 5]
// 3|2|[1, 2, 3, 4, 5]
// 4|3|[1, 2, 3, 4, 5]
// 5|4|[1, 2, 3, 4, 5]

11、map()——对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(item => {
return 2 * item;
});
console.log(arr2); // [2, 4, 6, 8, 10]

参考原文章地址《js数组方法大全》

10、对象深拷贝和浅拷贝

浅拷贝仅仅是拷贝一层，深层次的对象级别的只拷贝了引用，所以当原对象发生变化的时候，拷贝对象也跟着变化；而深拷贝是拷贝多层，每一级别的数据都会拷贝出来，也就是另外申请了一块内存，内容和原对象一样，更改原对象，但是拷贝对象不会发生变化。

浅拷贝 const newObj = Object.assign({}, obj);

深拷贝 const newObj = JSON.parse(JSON.stringify(obj));

以上就是博主目前在进行vue&vue-cli3.0项目过程中所遇到的几个问题，可能存在瑕疵，希望对大家有帮助谢谢大家。后续还会继续更新哦,感谢大家支持~~
——————结束——————