发表于： 2019-11-09 17:30:45
0 1257
一、this.$router.push、replace、go的区别
1.this.$router.push()
描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。
2.this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
3.this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
二、vue里面的v-for列表循环
v-for可以把数据中的一个数组对应为一组元素
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组， item 是数组元素
<template>
<div v-for="item in items">{{item.text}}</div>
</template>
<script>
data:{
items:[
{text:"第一组"}，
{text:"第二组"}，
{text:"第三组"}，
]
}
<script>
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。
三、点击切换Class，实现Active
1.先在data里增加一个变量，用来储存当前点击的元素
data() {
return {
activeClass: false,
};
}，
2.编写<template>里面的代码，给div绑定一个click事件，并把事件方法写在methods里面
<div @click="clickChange()"></div>
methods{
clickChange:() =>{
}
}
3.在style中创建一个要切换颜色的类changeColor，然后通过绑定calss用active来判断
.active {
border: 1px solid red;
}
//绑定class
<div :class="{‘active’: activeClass}" @click="clickChange()"></div>
//点击后触发判断，进行切换
methods： {
clickChange:() =>{
this.activeClass = !this.activeClass
}
},
四、动手实现v-for渲染列表并点中div改变border颜色
// 循环渲染按钮组 并绑定key以便识别
<div class="check" v-for="(item,index) in list" :key="index"
//绑定class：active到shows，当shows等于index（for 循环中传入）时，激活class
:class="{active:shows==index}" @click="getItem(index)" >{{item.text}}</div>
<style>
渲染出来发现是一排按钮
使用display：flex ;
justify-content：space-around;
align-items : center；
设置按钮宽度并开启换行
flex-warp：warp;
btn{
设置按钮宽度为42%（）
}
<style>
<script>
export default{
data(){
return{
shows：-1；// 0为默认选择第一个，-1为不选择
list：[ // 为div中传入的list传入参数，index自动生成
{"text":"20"},
{"text":"50"},
{"text":"100"},
... ...
]
}
}
methods：{
getItem(){
this.shows = index ；// 把当前点击元素的index，赋值给shows
}
}
}
</script>
完整代码（除css）
减少了以前复制粘贴的操作，极大地简化了重复性工作，提高编码效率
五、组件库
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。
我们在做项目的时候，通常会需要一些公用的基础组件，比如dialog、alert、form、nav等等。开源组件库应运而生。
组件化的意义
- 为前端提供了很好的分治策略，可以实现独立维护，可维护性强
- 组件具有独立性，组件之间可以自由组合
- 页面只不过是组件的容器，负责组合组件即可形成功能完整的界面
常用桌面端组件库：
element-ui
常用移动端组件库
vant
返回列表
评论