VUE杂谈_current-change": got undefined

我没系统学过VUE和element-ui，都是要用了再官网上查找，或者百度

1、element中调用方法

再普通vue中调用方法是标签中写@click="方法名"，然后再在方法中vue实例中

methods:{
      方法名(){
        alert("123");
        //code...
      }
    }
1
2
3
4
5
6

但是在element-ui元素中，要 @click.native=方法名"，调用的一样

实例

<template>
   <el-pagination
           background
           layout="prev, pager, next"
           :total="1000"
           @click.native="showSome">
   </el-pagination>
</template>

<script>
  export default {
    methods:{
      showSome(){
        alert("")
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、有些element自带事件和参数

还是上面那个例子，打开官网往下走，看到

这个current-page参数就是页数，那么事件往下面翻

看到，current-page改变时，事件名为current-change，并且有个回调参数为当前页，那么

<el-pagination
       background
       layout="prev, pager, next"
       :total="1000"
       @current-change="page">
</el-pagination>

<script>
  export default {
    methods:{
      page(currPage){
          alert(currPage)
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 调用方法，不是@click而是 @current-change，因为上面也说了事件是这个。。然后这个事件，定义个方法名吧，就叫page，在下面写方法page，其有个回调参数，参数名就自己瞎写了，就可以用到了

3、分页功能

使用分页功能的时候，其有个属性为page-size（每页显示条目个数），这个记得设置，不然默认是10 ，然后:total是（总数目），这个也要记得设置，然后页数就是:total/page-size

4、axios得get与post

5、跳转并且传值

就是点击一个按钮，路由改变，并且传递参数
其跳转传值有：<router-link>直接传值跳转 和 方法内的this.$route.push(query:{})
接受值有2中方法，是params和query接受
所以是2*2=4种跳转传值方法

1）router-link + params

路由：

{
	  path:'/test',
	  name:'Test',
	  component:Test
  },{
  		//占位符
	  path:'/test/:id',
	  name:'Test2',
	  component:Test2
  }
1
2
3
4
5
6
7
8
9
10

<!-- test -->
<template>
	<div>
		我是test1
		<!-- 1、直接通过 router-link 加上地址传值，id就是用到占位符了-->
		<router-link :to="'/test/'+id">点我跳转</router-link>
	</div>
</template>

<script>
	export default {
		name: "Test",
		data() {
			return {
				id:123
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- test2 -->
<template>
	<div>
		我是跳转的
		<h2>{{id}}</h2>
		<h2>{{this.$route.params.id}}</h2>
    </div>
</template>

<script>
	export default {
		computed:{
			id(){
				//从路由中的占位符拿到数据
				return this.$route.params.id
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这是用computed方式的，用created来接受然后赋值也是可以的

2）router-link + query

这个就不要用到路由注册表了，用一般的就行

{
	  path:'/test',
	  name:'Test',
	  component:Test
  },{
	  path:'/test2',
	  name:'Test2',
	  component:Test2
  }
1
2
3
4
5
6
7
8
9

<!-- test -->
<template>
	<div>
		我是test1
		<!-- 一样是 :to ，但是又path和query，query传对象的 -->
		<router-link 
		:to="{	
			path:'/test2',
			query:this.person}">
		点我跳转</router-link>

	</div>

</template>

<script>

	export default {
		name: "Test",
		data() {
			return {
				person:{
					name:'lihua',
					id:666
				}
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!-- test2 -->
<template>
	<div>
		我是跳转的
		<h2>name:{{person.name}}</h2>
		<h2>id:{{person.id}}</h2>
		<h2>{{this.$route.query}}</h2>
    </div>
</template>

<script>
	export default {
		computed:{
			person(){
				//用this.$route.query来接受刚才传过来的值
				return this.$route.query
			}
		}
	}
</script>>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3）$router.push + params

这个还是要占位符的

{
	  path:'/test',
	  name:'Test',
	  component:Test
  },{
  		//占位符
	  path:'/test/:id',
	  name:'Test2',
	  component:Test2
  }
1
2
3
4
5
6
7
8
9
10

<!-- test -->
<template>
	<div>
		我是test1
		<!-- 1、用点击事件去完成-->
		<button @click="tourl">点我跳转</button>
	</div>
</template>

<script>

	export default {
		name: "Test",
		data() {
			return {
				id:666
			}
		},
		methods: {
			tourl(){
				//点击事件，就传送到xxx + id
				this.$router.push('/test/'+this.id)
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- test2 -->
<template>
	<div>
		我是跳转的
		<h2>{{id}}</h2>
		<h2>{{this.$route.params.id}}</h2>
	</div>
</template>

<script>
	export default {
		computed: {
			id() {
				//从路由中的占位符拿到数据
				return this.$route.params.id
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4）$router.push + query

{
	  path:'/test',
	  name:'Test',
	  component:Test
  },{
	  path:'/test2',
	  name:'Test2',
	  component:Test2
  }
1
2
3
4
5
6
7
8
9

<!-- test -->
<template>
	<div>
		我是test1
		<button @click="tourl">点我跳转</button>

	</div>

</template>

<script>
	export default {
		name: "Test",
		data() {
			return {
				person:{
					name:'lihua',
					id:666
				},
			}
		},
		methods: {
			tourl(){
				this.$router.push({
					//一样又path和query，然后那边就query接受
					path:'/test2',
					query:this.person
				})
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- test2 -->
<template>
	<div>
		我是跳转的
		<h2>name:{{person.name}}</h2>
		<h2>id:{{person.id}}</h2>
		<h2>{{this.$route.query}}</h2>
	</div>
</template>

<script>
	export default {
		computed: {
			person() {
				return this.$route.query
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5）总结

总的来说，query是接受对象，params接受一个key的。
router-link用来做a标签的简单跳转,$router.push用在方法里面更灵活
params需要路由占位符，query不需要

5.5、跳转和传值（笔记太垃圾已废弃，具体看5）

1、this.$router.push(“xxx”)

在方法中使用this.$router.push("/xxx")，就可以跳到指定路径，从而配合router-view.

1. 不带参数
 this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参 
 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
  
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、在el-menu标签中添加router属性

这个方法不一定实用于所有，因为el-menu中有el-menu-item子标签，而这个子标签的index属性就是跳转的路径，这个是特殊的

1. 在el-menu标签添加router属性
2. 添加 router-view
3. el-menu-item为选项的标签，其index值就是跳转的router

5.6 跳转传值（笔记太垃圾已废弃，具体看5）

1）

传

<router-link
	:to="{
		path:'/qa/'+ problem.id,
		params:{
			id:problem.id
		}
	}">{{problem.title}}</router-link>
1
2
3
4
5
6
7

• path是要传得值，我这里是/qa/id加上id号跳转
• params是传值，key-value

收：

mounted() {
	this.problem.id = this.$route.params.id
	console.log(this.problem.id)
}
1
2
3
4

2）router-view传值

在路由弄一个占位符，然后跳到这里时，根据url获得值
在router 的index.js中

{
	  path: '/spit',
	  name: 'SpitIndex',
	  component:SpitIndex
  },{
	  path:'/spit/:id',
	  name:'SpitItem',
	  component:SpitItem
  }
1
2
3
4
5
6
7
8
9

//spit.vue
<router-link :to="'/spit/'+spit._id">{{spit.content}}</router-link>
这里跳转就传如ID了
1
2
3

在跳到到另外一个页面的时候

///spit/:id
console.log(this.$route.params.id)
//打印出跳转的ID
1
2
3

6、<template slot-scope="scope">

这个东西，很神奇，一般这样用，只能用于template的属性

<el-table
        :data="tableData"
        border
        style="width: 40%">
    <el-table-column
            fixed
            prop="id"
            label="ID"
            width="150">
    </el-table-column>
    <el-table-column
            prop="name"
            label="姓名"
            width="120">
    </el-table-column>
    <el-table-column
            prop="author"
            label="作者"
            width="120">
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
            width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
        </template>
    </el-table-column>
</el-table>

<script>
 export default {
    
     methods: {
         test(){
             this.$router.push("/addbook")
         	}
   		}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

点一下查看，就是26.27行的那些代码，定义了一个slot-scope="scope"，利用什么滚动的。。我也不懂。然后下一行@click="handleClick(scope.row)"，表示点这个查看用到这个方法，并且有个参数，方法中，传的这个scopne.row，可以展示这个框的数据

7、components

就是复用代码了
使用步骤

1. 写复用代码vue
2. 在要用的地方import xxx from "xxxx";
3. <xxx></xxx>

8、导入css文件

方案1、在main.js中引入方式(全局)

import '@/assets/css/reset.css'

方案2、在.vue文件的

@import "../assets/css/index.css";

9、关掉

根目录的.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    // 'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    // parser: 'babel-eslint'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

10、float失败的时候

有时候用了float后，button就不起作用了，style加上这个

style="display: inline-block;"
1

11、父子组件传值

1）父传子

①通过props的字符串传值

父

<template>
	//用了子组件，传一个key为id，value则为bookid的值，传给子组件读取
	<UserData :id="bookid"></UserData>
</template>
<script>
	import UserData from '../../components/UserData'

	export default {
		name: "FriendIndex",
		components: {
		//加载儿子
			UserData
		},
		data(){
			return{
				bookid:123
			}
		}
<script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

子：

<template>
	<div>
	//这里读取id，而这个id就是在子组件的props中拿到的
	{{id}}
    </div>
</template>

<script>
	export default {
		name: "",
		//这里的props为数组形式，不是一个数组形式，就是保存父给子的key，写在这里
		props:["id"],
	}
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

②通过props的对象形式传值

对象的更好，在第一个方法的基础上，添加了限定类型和默认值，其中，类型可以有

1. String
2. Number
3. Boolean
4. Array
5. Object
6. Date
7. Function
8. Symbol

父

<template>
	//用了子组件，传一个key为id，value则为bookid的值，传给子组件读取
	<UserData :bookName="bookName" :price="price" :stroe="stroe" :obj="obj" :doubleType="doubleType"></UserData>
</template>
<script>
	import UserData from '../../components/UserData'

	export default {
		name: "FriendIndex",
		components: {
		//加载儿子
			UserData
		},
		data(){
			return{
				bookName:'金瓶梅',
				price:666，
				stroe:['新华书店','旧华书店'],
				obj:{
					msg:'hello'
				},
				doubleType:'123'
			}
		}
<script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

子：

<template>
	<div>
	//这里读取id，而这个id就是在子组件的props中拿到的
	书名：{{bookName}}   价格：{{price}}
    </div>
</template>

<script>
	export default {
		name: "",
		//props变为对象形式，更方便
		props:{
			//单单限制类型
			bookName:String,
			//限制类型并且提供默认值
			price:{
				type:Number,
				default:0，
				//表示这个key值必须传东西进来
				required:true
			},
			//如果是数组或者对象类型，那么默认值是要写一个函数返回的类型
			stroe:{
				type:Array,
			    default: () => []

			},
			//对象类型
			obj:{
				type:Object,
				default(){
					msg:'hello'
				}
			},
			//即可是数组，也可是数字
			doubleType:[String,Number]
		}
	}
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

③大坑，子接受不到数据

就直接{{}}可以显示数据，但是在方法或者created中想用就用不了，

就很诡异，没有值，原因是这父传子需要异步处理，所以有时候会延迟，导致传不了数据到子组件的created和mounted，所以解决办法是在子组件加上个v-if进行判断
如

//在后面加个判断,这样有才进行传值,就不会异步了
 <LastPhysicalCardSale :date="lastDate" v-if="lastDate"/>
1
2

2）子传父

比如发生点触事件，传值给父组件给父组件显示
思路为，子组件写一个@click点击事件，事件里面写this.$emit(事件名,要传的参数)，这里就完成了发送事件。
接着就是在父组件里面写一个事件 用于接受参数 的函数，函数的参数就是接受到的数
父

<template>
	<div>
//3、父组件用到子组件，父传子的话要加一个 @事件 的监听事件，事件名是子组件中$emit定义的，函数名就自己写	
		<TestSon @itemClick="sonClick"></TestSon>
		{{ball}}
	</div>
</template>

<script>
	import TestSon from './testSon.vue'
	
	export default {
		name: "Test",
		data() {
			return {
				ball:''
			}
		},
		methods: {
//4、这里父接受子的事件，函数写一个参数就能接受到了		
			sonClick(item){
				console.log('item',item)
				this.ball=item
			}
		},
		components:{
			TestSon
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

子

<template>
	<div>
//1、点击事件触发函数，传值给父组件，用@click，	
		<button v-for="item in list" @click="btnClick(item)">{{item}}</button>
    </div>
</template>

<script>
	export default {
		name: "TestSon",
		data() {
			return {			
				list:['篮球','足球','羽毛球']
			}
		},	
		methods: {
//2、写函数，里面一定要这样写  	this.$emit('父组件接受的事件',值)	
//注意是父组件接受的事件而不是函数
			btnClick(item){
				this.$emit('itemClick',item)
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

点篮球

点足球

11.5、父子组件的访问

访问是只能拿到值，读取，并且可以调用方法

1）父访问子

①$children方法访问

父

<template>
	<div>
		<TestSon ></TestSon>
		<button @click="btnClick">按钮</button>
	</div>

</template>

<script>
	import TestSon from './testSon.vue'
	
	export default {
		name: "Test",
		data() {
			return {
				
			}
		},
		methods: {
//2、父组件访问子组件通过$children访问，得出结果是个数组，可以拿到子组件的很多东西		
			btnClick(){
				console.log('父组件打印子组件',this.$children)
				console.log('父组件打印子组件的变量:'+this.$children[0].message);
				this.$children[0].showMessage()
			}
		},
		components:{
			TestSon
		}
	}
</script>

<style scoped>
  
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

子

<template>
	<div>
		
    </div>
</template>

<script>
//1、子组件这里只提供一个变量和方法，示范是父组件访问子组件的变量和方法
	export default {
		name: "TestSon",
		data() {
			return {
				message:'这是一句话'
			}
		},	
		methods: {
			//这是一个方法
			showMessage(){
				console.log('子组件里面打印：'+this.message)
			}
		},
        created() {
            
        },
		props:{
			
		}
	}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

打印子组件可以有很多东西的

$children的缺陷

比如父组件写很多个子组件

<TestSon ></TestSon>
<TestSon ></TestSon>
<TestSon ></TestSon>
1
2
3

$children是一个数组，取第二个的值是

this.$children[1]
1

这样取的，但是如果某一天在第一个后面插入一个子组件，那么数组下标就变了，所以很不人性化，这时候就要使用$refs了

②$refs方法访问（推荐）

因为$children的缺陷，$children是数组形式，$refs是使用key的形式，每一个子组件加一个ref标识，在读取的时候根据ref名字读取即可

子和上面的一样
父

<template>
	<div>
		<TestSon ></TestSon>
//1、给每一个子组件加一个ref的名字
		<TestSon ref="son1"></TestSon>
		<TestSon ref="son2"></TestSon>
		<button @click="allSon">按钮1</button>
		<button @click="oneSon">按钮2</button>
	</div>

</template>

<script>
	import TestSon from './testSon.vue'	
	export default {
		name: "Test",
		data() {
			return {
				
			}
		},
		methods: {
			allSon(){
//2、this.$refs 就是打印全部子组件了			
				console.log(this.$refs); 
			},
			oneSon(){
//3、this.$refs.名字  就是打印某一个子组件的东西了			
				console.log(this.$refs.son1);
				console.log(this.$refs.son1.message);
				this.$refs.son1.showMessage()

			}
		},
		components:{
			TestSon
		}
	}
</script>

<style scoped>
  
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

点击按钮1

点击按钮2

2）子访问父

其实子访问父的很少的

①$parent

父

<template>
	<div>
		<TestSon></TestSon>
	</div>

</template>

<script>
	import TestSon from './testSon.vue'
	export default {
		name: "Test",
		data() {
			return {
				message:'我是父组件的一句话'
			}
		},
		components:{
			TestSon
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子

<template>
	<div>
		<button @click="fu">按钮</button>
    </div>
</template>

<script>
	export default {
		name: "TestSon",
		data() {
			return {
				message:'这是一句话'
			}
		},	
		methods: {
			fu(){
				console.log(this.$parent);
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这是获取父的

②$root

获取根，最上级的那个

<template>
	<div>
		<button @click="fu">按钮</button>
    </div>
</template>

<script>
	export default {
		name: "TestSon",
		data() {
			return {
				message:'这是一句话'
			}
		},	
		methods: {
			fu(){
				console.log(this.$root);
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

12、全局变量localStorage存值、删值、获值

1）存值

	//普通地
 localStorage.setItem("下标",值);
 localStorage.setItem("holiday_start_date",that.holiday_time[0]);
 
 //如果值是对象的话，先转换
 localStorage.setItem("下标",JSON.stringify(值));
 localStorage.setItem("holiday_emp",JSON.stringify(response.data.data[0]));
1
2
3
4
5
6
7

2)获值

//普通
localStorage.getItem("下标")
localStorage.getItem("is_week")

//对象，
var xx = (JSON.parse(localStorage.getItem("下标")))
var id = (JSON.parse(localStorage.getItem("holiday_emp"))).id;
1
2
3
4
5
6
7

3)删

localStorage.removeItem("下标")
1

13、创建对象

setUserInfo(mobile){
	var that = this
	var user = {mobile:mobile}
	}
1
2
3
4

14、时间格式

数据库是datetime 的2021-03-27 15:25:39，页面显示的是1616858739000

npm install moment --save
main.js中添加

import Moment from 'moment'

// 定义全局时间戳过滤器
Vue.filter('formatDate', function(value) {
  return Moment(value).format('YYYY-MM-DD HH:mm:ss')
})
1
2
3
4
5
6

然后在用的地方

<span class="el-icon-time">注册时间{{user.regdate | formatDate}}</span>
1

14.5、过滤器

14的时间格式书写就是用过滤器来写的，一般是这么写的

{{参数| 过滤器名}}

  data: {
	  
  },
  filters:{
  	过滤器名(参数){
  		return 一般是返回什么格式的
  	}
  }
1
2
3
4
5
6
7
8
9
10

全局配置过滤器

不用每个过滤器都写在一个组件啦,全局配置一个,大家都能用

//main.js
import * as filters from './filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
1
2
3
4
5
6

// src/filter/index.js
import Moment from 'moment'
import {trans_tp, payment_type} from '@/views/scenesPay/dict'

/**
 * @param {日期} dateStr
 * @param {格式化模式} pattern
 */
export function dateFormat(dateStr, pattern) {
  if (!dateStr) return ''
  return Moment(dateStr).format(pattern)
}
1
2
3
4
5
6
7
8
9
10
11
12

然后平时用就{{ a | dateFormat }}这样使用

15、分页

<el-pagination
        background
        layout="prev, pager, next"
        :total="hotListTotal"
        page-size="5"
        @current-change="pageHot">
</el-pagination>
1
2
3
4
5
6
7

• :total是总数，一般在查询的时候就加上去总数了
• page-size一页显示多少条数据
• @current-change="pageHot"点击页数的时候，触发的函数

首页加载时，创建这个函数

getNewProblemList(){
	var that = this
	axios.get('http://192.168.12.128:9012/qa/problem/newlist/1/5').then(function(response) {
		if(response.data.flag==true){
			//数据
			that.$data.problemNewList = response.data.data.rows
			//总有多少条数据
			that.$data.newListTotal = response.data.data.total
		}
		console.log(response);
	})
},
1
2
3
4
5
6
7
8
9
10
11
12

记得在data加上newListTotal 和problemNewList

到这里，获得了多少个函数和初始化了，接下来就是点击页数的时候，触发的函数

//当被点击页数的时候，跳转
pageHot(currPage){
    var that=this;
    axios.get('http://192.168.12.128:9012/qa/problem/hotlist/'+currPage+'/5').then(function (response) {
		if(response.data.flag==true){
			//数据覆盖
			that.$data.problemHotList = response.data.data.rows
		}
		console.log(response);
    })
},
1
2
3
4
5
6
7
8
9
10
11

• currPage是当前点击页数显示的数字

16、axios.delete和平时的不一样

这个B，这个参数和平时的不一样
平时是

var tempData={
	userid:userid
}

axios.post('http://192.168.12.128:9012',tempData).then(function (response) {

	console.log(response);
})
1
2
3
4
5
6
7
8

而delete是

var tempData = {
	userid:JSON.parse(localStorage.getItem("userInfo")).id,
	targetuser:targetuser
}
				
axios.delete('http://192.168.12.128:9012/user/user/follow',{data:tempData}).then(function(response) {
	if(response.data.flag==true){
		// that.$message("删除成功")
	}
	that.$message(response.data.message)
	console.log(response);
})
1
2
3
4
5
6
7
8
9
10
11
12

17、路由占位符，组件里面获得数据

就比如

<router-link :to="'/user/'+problem.userid">提出
1

一个跳转这里使用动态id，比如problem.userid值为5，就会跳转到/user/5，而跳到那个页面，怎么获取这个5呢？

1、路由

先在路由写

  {
	path:'/user/:id'  ,
	name:'UserItem',
	component:UserItem
  }

1
2
3
4
5
6

• :id是一个占位符

2、组件获取数据

<template>
	<div>
		{{userid}}
    </div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				userid:''
			}
		},
		methods: {
			
		},
        created() {
            this.userid = this.$route.params.id
        }
	}
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

18、级联选择器

级联选择器

其数据是这样的

      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }
          			{ text: '宁波市', value: '330100' },
          			{ text: '温州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14

就是children嘛，如果有children（不管是不是空）就继续点下一级，没有就返回数据。但是目前一半返回的数据中，就算最后一级了，也是会有个children:[]的，比如

[
    {
        "id": "441900117000",
        "findname": "凤岗镇",
        "find_quanpin": "fenggangzhen",
        "find_jianpin": "fgz",
        "province": "广东省",
        "displayorder": 441900,
        "netname": "gdwebson.gdnyt.com",
        "netaddress": "1.1.1.1",
        "deptarttype": 1,
        "departtype": 1,
        "tag": "东莞市 , 广东省",
        "children": [
            {
                "id": "901120000000401",
                "findname": "东莞凤岗站",
                "find_quanpin": "dongguanfenggangzhan",
                "find_jianpin": "dgfgz",
                "province": "广东省",
                "displayorder": null,
                "netname": "gdwebson.gdnyt.com",
                "netaddress": "1.1.1.1",
                "deptarttype": 2,
                "departtype": 2,
                "tag": null,
                "children": [],
                "address": "东莞市凤深大道与龙平西路交汇处东北角",
                "stationhotline": "0769-87513786"
            }
        ],
        "address": null,
        "stationhotline": null
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

就算children没有数据，也是有这个字段的。如果只要还有children字段，就会显示下一级，但是下一级是空的没有得选

这个时候就要去掉最后一级得children字段

// 递归判断列表，把最后的children设为undefined
			getTreeData(data) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].children.length < 1) {
						// children若为空数组，则将children设为undefined
						data[i].children= undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			}
1
2
3
4
5
6
7
8
9
10
11
12
13

19、:class绑定的几种方式

或者一个标签几个动态的class，可以这样写

20、计算属性

简单形式

之前没遇到过的，比如有firstName和lastName两个属性，在页面上我们要

{{firstName}} + {{lastName}}
1

这样显示，就很麻烦

有个计算属性的东西，可以自动拼接字符的

{{fullName}}

<script>
	xxxx省略代码
	data:{
		firstName:'jack',
		lastName:'white'
	},
	computed:{
		fullName:function(){
			return this.firstName + ' ' + lastName
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

data里面没有fullName，但是在computed里面显示了，页面显示jack white
值得一提的是，data的值改变，其computed也是会重新计算一次的

get形式

其实我们这是缩写，其实本来是这样的

{{fullName}}

<script>
	xxxx省略代码
	data:{
		firstName:'jack',
		lastName:'white'
	},
	computed:{
	//这里如果直接fullName :function(){}，就是只取get方法
		fullName:{
			get:function(){
				return this.firstName + ' ' + lastName
			}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

其实也有set的

老面向对象了，也是有set的。比如你什么button按钮想改变值，也是可以的

{{fullName}}

<script>
	xxxx省略代码
	data:{
		firstName:'jack',
		lastName:'white'
	},
	computed:{
	//这里如果直接fullName :function(){}，就是只取get方法
		fullName:{
			get:function(){
				return this.firstName + ' ' + lastName
			},
			set:function(newValue){
			//这里把值给保存给data了
				const names = newValue.spit(' ');
				this.firstName = names[0];
				this.lastName = names[1];
			}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

21{{}}里面直接写函数也是可以的

{{getFullName()}}

<script>
	xxxx省略代码
	data:{
		firstName:'jack',
		lastName:'white'
	},
	methods:{
		getFullName(){
			return this.firstName + ' ' + lastName
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

22、各个修饰符

@keyup.enter就是触发回车的事件之类的

.stop修饰符

一个div有个点击事件，div里面有个button有个点击事件，那么点button的时候，会触发div点击事件和button点击事件。
那么我想点button只触发button而不触发div事件，可以@click.stop="xx"

23、.native

自定义组件的时候，直接@click="xx"无反应，在自定义组件的时候应该加上@click.native="xx"

24、遍历对象

<ul v-for="(value,key,index) in person">{{value}}--{{key}}--{{index}}</ul>

//js
  data() {
	  return {
		  person:{
			  name:'小强',
			  age:22
		  }
	  }
  },
1
2
3
4
5
6
7
8
9
10
11

小强–name–0
22–age–1

25、函数的不定长参数

function sum(...num){
	//code
}

sum(10,20,30,35)
1
2
3
4
5

26、vue中数组的一些自带方法

push

数组末插入数据

this.arr.push('aa')
1

pop

删除最尾的数据

this.arr.pop()
1

shift

删除数组最前面的一个元素

this.arr.shift()
1

unshift

再数组最前面添加一个元素

this.arr.unshift('aa')
1

splice

其有好几个作用

删除元素

this.arr.splice(从第几个开始删，删除几个元素)
//从第二个元素开始删除，删除2个   [a,b,c,d] --> [a,b]
this.arr.splice(2,2)
1
2
3

替换元素

this.arr.splice(从第几个开始替换，替换几个，替换的元素)
//从第二个元素开始替换，删除2个   [a,b,c,d] --> [a,b,e,f]
this.arr.splice(2,2,'e','f')
1
2
3

插入元素

this.arr.splice(第几个后面插入，0，插入的元素)
//从第二个元素后面插入   [a,b,c,d] --> [a,b,e,f,c,d]
this.arr.splice(2,0,'e','f')
1
2
3

27、js高阶函数

比如const nums = [10,20,111,112]

filter

filter中的参数是回调函数，其回调函数必须返回一个boolean值。返回值是数组。filter的回调函数会循环一遍数组的

用来过滤的，比如取出数组小于100的数字，普通的

let newNums = []
for(let n in nums){
	if(n<100){
		newNums.push(n)
	}
}
1
2
3
4
5
6

但是可以这样简写

//用newNums来接住数组，然后filter里面写回调函数，return true 或者 false
let newNums = nums.filter(function(n){
	return n < 100
})
1
2
3
4

map

和filter差不多，只不过filter规定返回布尔值，map的返回值不规定
比如要求每个数*2

let newNums = []
for(let n in nums){
	newNums.push(n*2)
}
1
2
3
4

高阶

let newNums = nums.map(function(n){
	return n*2
})
1
2
3

reduce

对数组进行汇总，他是这样的

数组.reduce(回调函数(上一次遍历的值,当前遍历的值){
//	code
},初始值)
1
2
3

比如将所有数加起来

const nums = [10,20,111,112]
let total = 0
for(let n in nums){
	total + =n
}
1
2
3
4
5

可以这样写

let total = newNums.reduce(function(preValue,n){
	return preValue + n
},0)
1
2
3

第一次遍历，preValue = 0,n=10 , return 10
第二次遍历，preValue = 10,n=20 , return 30
第三次遍历，preValue = 30,n=111 , return 143
第三次遍历，preValue = 143,n=112 , return 255

28、checkbox多选框的使用

比如这个，选中哪个，就记录哪个。
之前我是每一个都弄一个点击事件，然后再push和pop操作的。
后来发现视频，不用的，直接,每一个input都是v-model绑定一个数组，然后直接在下面{{数组}}就可

	  <input type="checkbox" value="篮球" v-model="hobbies">篮球
	  <input type="checkbox" value="唱歌" v-model="hobbies">唱歌
	  <input type="checkbox" value="跳舞" v-model="hobbies">跳舞
	  <input type="checkbox" value="足球" v-model="hobbies">足球

	<h2>爱好：{{hobbies}}</h2>
//------
  data() {
	  return {
		  hobbies:[]
	  }
  },
1
2
3
4
5
6
7
8
9
10
11
12

29、v-model修饰符

lazy

懒加载，由于v-model双向绑定，比如input还在输入的时候，data会时时改变

<input type="text" v-model.lazy="msg">
		{{msg}}
		//------
		
		data() {
			return {
				msg:''
			}
		},
1
2
3
4
5
6
7
8
9

但我们想在input中输完时，按下回车或者焦点离开输入框，data值才改变

还没按回车，后面的值不会改变

按下回车，值改变

number

就是说input的时候，只能输入数字类型，如果是<input type="number">data里面判断类型时string而不是number，这时候这样用就可以

		<input type="number" v-model.number="msg">
		{{typeof msg}}
		//------
		
		data() {
			return {
				msg:''
			}
		},
1
2
3
4
5
6
7
8
9

30、父传子，避免用v-model直接绑定props中的值

比如
父

<template>
	//用了子组件，传一个key为id，value则为bookid的值，传给子组件读取
	<UserData :id="bookid"></UserData>
</template>
<script>
	import UserData from '../../components/UserData'

	export default {
		name: "FriendIndex",
		components: {
		//加载儿子
			UserData
		},
		data(){
			return{
				bookid:123
			}
		}
<script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

子：

<template>
	<div>
	{{id}}
	//这里用了父子
	<input type="text" v-model="id">
    </div>
</template>

<script>
	export default {
		name: "",
		//这里的props为数组形式，不是一个数组形式，就是保存父给子的key，写在这里
		props:["id"],
	}
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

v-model绑定了props而不是data，会有错误

官方建议data先拿到props，然后再对data进行双向绑定
修改后子：

<template>
	<div>
	{{reallyId}}
	//这里用了父子
	<input type="text" v-model="reallyId">
    </div>
</template>

<script>
	export default {
		name: "",
		//这里的props为数组形式，不是一个数组形式，就是保存父给子的key，写在这里
		props:["id"],
		data(){
			return {
				reallyId:this.id
			}
		}
	}
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

31、watch监听某一值的改变

和data同级，某一值发生改变时，执行的代码

<template>
	<div>
		<input type="text" v-model="reallyId">
    </div>
</template>

<script>
	export default {
		name: "",
		data(){
			return {
				reallyId:'123'
			}
		},
		watch:{
			//一个新值，一个旧值
			reallyId(newValue,oldValue){
				//要执行的代码
			}
		}
	}
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

32、插槽slot

插槽嘛，插入啥变变成啥
应用场景多为一个重复的组件，但是组件和组件之间又有些不一样的需求。有点类似于Java的集成，把大家共性的东西都打包，要怎么改怎么用，就是子类的事了。

导航条，左边有些事返回，有些是菜单，但是总的来说，大家都是左中右3个地方，我们就可以将这些共性打包

1）简单插槽

<!-- 子 -->
<template>
	<div>
		<!-- 这里都显示 -->
		我是子组件
<!--1、 solt是插槽，要什么的就在这里插入 -->
		<slot></slot>
		<br><br>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10

<!-- 父 -->
<template>
	<div>
<!-- 2、在子组件里面插入你想要插入的东西，这个东西就会在solt中替换的 -->	
		<TestSon><button>按钮</button></TestSon>
<!-- 3、没有插入的就啥事没有发生 -->		
		<TestSon></TestSon>
<!-- 4、或者你插入其他的 -->		
		<TestSon><i>我是i</i></TestSon>
<!-- 5、插入多个的话，会都加载，将多个都在solt中替换 -->		
		<TestSon>
			<button>我是button</button>
			<h2>我是h2</h2>
		</TestSon>
	</div>

</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3）具有默认值的插槽

如果调用10次插槽，8次要求是button，2次要求是h2，那么每一个我都要些button和h2，但是button是8次啊，明显又麻烦了，所以有默认值，和Java抽象方法的默认值这种差不多

<!-- 父 -->
<template>
	<div>
		<!-- 2、覆写默认值 -->
		<TestSon><p>老子不想要按钮</p></TestSon>
		<!-- 3、空白就直接用默认值 -->
		<TestSon></TestSon>
		<TestSon><button>老子是自己写的按钮</button></TestSon>

	</div>

</template>
1
2
3
4
5
6
7
8
9
10
11
12

<!-- 子 -->
<template>
	<div>
		我是子组件
		<!-- 1、定义了一个solt，但有默认值 -->
		<slot><button>按钮</button></slot>

		<br><br>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10

3）具名插槽

上面是子组件里面只有一个solt，但是如果想几个solt怎么办？

<!-- 子 -->
<template>
	<div>
	<!-- 写3个插槽 -->
		<slot>左边</slot> 
		<slot>中间</slot>
		<slot>右边</slot>

		<br><br>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

<!-- 父 -->
<template>
	<div>
		<TestSon></TestSon>
		<!-- button覆盖3个插槽 -->
		<TestSon><button>按钮</button></TestSon>

	</div>

</template>
1
2
3
4
5
6
7
8
9
10

如果我们只想替换中间那个，可以这样写

<!-- 子 -->
<template>
	<div>
		<!-- 1、给每一个插槽起名字-->
		<slot name="left">左边</slot> 
		<slot name="center">中间</slot>
		<slot name="right">右边</slot>

		<br><br>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

<!-- 父 -->
<template>
	<div>
		<TestSon></TestSon>
		<TestSon>
			<!-- 在子组件里面，插入template ，属性v-solt:插槽名 ，然后再在button里面插入想要的东西-->
			<template v-slot:center>
				<button>按钮</button>
			</template>
		</TestSon>

	</div>

</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

v-slot 只能添加在 <template> 中

4）作用域插槽

子组件的插槽的slot中的样式是子组件写的，但是，如果我想用到子组件插槽中的数据，但是只是想改变样式而已。

就是说，比如子组件默认插槽值是

但是我想换成这样子

其中，这些值是子组件的值，这时候如果要改变样式并且拿到子组件的值，要这样做

<!-- 子 -->
<template>
	<div>
//2、把值给父组件读取，需要加上 :自定义名字="变量"  ，这样父组件通过名字就能读取了
		<slot :language="language">
//1、这里是slot中的默认样式		
			<ul>
				<li v-for="item in language"> {{item}} </li>
			</ul>
		</slot>
		<br><br>
    </div>
</template>

<script>
	export default {
		name: "TestSon",
		data() {
			return {
				language:['java','php','js']	
			}
		},	
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- 父 -->
<template>
	<div>
		<TestSon></TestSon>
		<TestSon>
//3、v-slot:default="slotProps" ，这里的 slotProps就可以拿到子组件插槽中的所有变量（名字也是自己起的）
			<template v-slot:default="slotProps">
			//4、这里读slotProps，会拿到全部值
				<div>slotProps: <h2>{{slotProps}}</h2>
				</div>
				<br>
			//5、slotProps.什么  ，就是子组件插槽中定义的值
				<div>slotProps.language: <h2>{{slotProps.language}}</h2>
				</div>
				<br>
			//6、遍历
				<span v-for="item in slotProps.language">{{item}}-</span>
			</template>
		</TestSon>

	</div>

</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

另一个例子

33、js的模块化导出导入

js是弱语言，没有Java这么强的封装性和继承性。
如果正常导入js文件，是<script src="xx.js"></script>，那么如果导入的几个js文件有重名变量，函数，会覆盖。
那么模块化就是把每个模块之间隔绝，重名变量就不会覆盖。
导出就是模块隔绝后，开个接口给别人用，就是导出export
导入就是导入别的模块来使用，导入import

简单的模块化

js就写一些普通的函数，或者变量，别人用就要这样用

<script src="main.js" type="module"></script>
1

简单的导入导出

//a.js，定义一个变量和函数
// 1、写东西
var flag = true

function sum(num1, num2) {
    return num1 + num2

}
//2、导出
export {
    flag,sum
}
1
2
3
4
5
6
7
8
9
10
11
12

//b.js导入a.js，并调用东西
//3、导入js
import {flag,sum} from './a.js'

//4、引用变量和函数
if(flag){
	console.log(sum(10,20))
}
1
2
3
4
5
6
7
8

导出方式

1）写完再导出

var flag = true

function sum(num1, num2) {
    return num1 + num2
}

//2、导出
export {
    flag,sum
}
1
2
3
4
5
6
7
8
9
10

2）边写边导出

export  var flag = true

export  function sum(num1, num2) {
    return num1 + num2
}
1
2
3
4
5

3）导出函数

export class Person(){
	run(){
		console.log('跑')
	}
}
1
2
3
4
5

4）export default

上面的导入，都是import {xx} from 'x.js'，但是平时vue的都是import 自己起名字 from 'a'
那么这个自己起名字就是通过export的

//a.js
var num =666
export default num
1
2
3

import shuzi from './a.js'
console.log(shuzi)
1
2

666

export default一个文件只能存在一个

导入方式

1）一个个导入

//a.js，定义一个变量和函数
var flag = true
var num = 123

function sum(num1, num2) {
    return num1 + num2

}
//2、导出
export {
    flag,sum,num
}
1
2
3
4
5
6
7
8
9
10
11
12

//b.js导入a.js，并调用东西
import {flag,sum,num} from './a.js'

//4、引用变量和函数
if(flag){
	console.log(sum(10,20))
}
1
2
3
4
5
6
7

2）一起导入

//b.js导入a.js，并调用东西
import * as obj from './a.js'

//4、引用变量和函数
if(obj.flag){
	console.log(obj.sum(10,20))
}
1
2
3
4
5
6
7

34、webpack打包JS

webpack xxx.js xx.js

35、简单理解npm

npm是一个maven管理器，控制一堆包的，但是npm不像maven那么高级，所有包都放在一个仓库，他
是每一个项目都有自己的仓库，叫node_modules。

npm install xx -g保存到全局，但有些东西是每个项目都要单独安装的，仅适用于类似webpack这种全局的打包的

36、脚手架创建文件没有webpack.config.js

https://blog.csdn.net/zz00008888/article/details/109536466

vue cli2.x才会有webpack.config.js，3.x之后就类似spring boot的自动配置一样，要加的话往里面加个vue.config.js进行修改即可

37、npm install错误

目前只知道几种解决方案

1）npm clean cache --force

注意在cmd用管理员身份打开
其其实就是把C:\Users\master\AppData\Roaming\npm-cache删除，清下缓存

38、咋看vue版本

网上说的 vue -V看的是cli版本的！！！

首先vue版本准确说是怎么看项目的vue版本，打开项目的node_modules\vue\package.json，查看版本

可以看到我用的是vue2.x而不是3.x
emmmm
我一直以为自己用3.x了。。。。。

39、箭头函数

其实就是Java8的lambda

const obj = {
  sum(num1,num2){
    return num1+num2
  }
}

const test = function (str){
  console.log(str);
}

test(666)
obj.sum(10,20)
1
2
3
4
5
6
7
8
9
10
11
12

简写

const sum = (num1,num2) =>{
  return num1+num2
}

sum(10,20)
1
2
3
4
5

如果函数里面，只有一个参数可以

then((data) => {
	console.log(data);

then(data => {
	console.log(data);
1
2
3
4
5

40、url的hash和history

hash方式

比如在https://www.jd.com/
输入location.hash='/foo'，就到了https://www.jd.com/#/foo
但是页面没有刷新，而且也有个后退按钮

当输入history.back()时，又退回到了https://www.jd.com/
其实这玩意就是个栈，请求一层层往上加，back就去掉一层

history方式

history.pushState({},'','home')

history.go()

history.back() == history.go(-1)
history.go(-2)就回退2个

如果是history.go(1)就返回刚才的页面，其实就是这个

41、深入浅出路由

之前都是回用就好了，现在回顾一下
router\index.js

import Vue from 'vue'
//1、先导入插件
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'

//2、插件的使用方式，再使用Vue.use(xxx)
Vue.use(VueRouter)

//4、routes定义在router里面的数组
const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

//3、定义一个变量，3个选项嘛，最后一个变量是数组
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//5、最后面要导出啦
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

再到根目录的main.js

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
//导入那个 ./router/index.js
import router from './router'
import store from './store'
import './plugins/element.js'

Vue.config.productionTip = false

//这里就是new Vue了，有个router，就是简写的  router:router
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

42、路由懒加载

其实就是

{
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
1
2
3
4
5

或者是

const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue')
{
    path: '/about',
    name: 'About',
    component: About 
  }
1
2
3
4
5
6

好处是，这样打包后，加载速度会更块，以后都推荐这种方式

43、导航守卫

就是一个router里面的东西，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，有点拦截器的感觉，可以配合安全验证之类的进行拦截跳转。

官网介绍：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

比如我们想根据url显示不同的title（就是浏览器标签页中图标右边的文字）

1）在router/main.js添加meta

{
	  path:'/test',
	  name:'Test',
	  component:Test,
	  meta:{
		  title:'测试1'
	  }
  },{
	  path:'/test2',
	  name:'Test2',
	  component:Test2,
	  meta:{
		title:'测试2'
	}
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

meta是数据的描述注释之类的，除了title还有其他很多的。

2）router/main.js 里面添加全局前置守卫

//beforeEach是前置守卫，在跳转前执行的函数，其有3个变量，from跳转到to，然后next是个函数，可以中断，可以继续跳转
router.beforeEach((to, from, next) => {
	//设置标题
	window.document.title = to.meta.title
	//可以看看有啥
	console.log(to);
	//next一定要有，无的话会报错
	next()
})
1
2
3
4
5
6
7
8
9

打印to可以看到有很多信息，之后我们甚至可以判断路径url显示自定义的东西之类的，
如果有时候判断不了，例如子子组件，可以用matched来解决子的路径

3）next

• next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

• next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

• next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

就是说，我们可以判断有没有登陆之类的，没有登陆就next(‘/login’)这种

4）后置守卫

router.afterEach((to, from) => {
  // ...
})
1
2
3

就是后置啦，没有next

5）路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11

6）组件内的导航守卫

//和data,created同级
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

44、keep-alive的使用

为社么要用keep-alive

因为一个页面，有created和destory两个函数嘛，组件创建和毁灭，当从A到B时，A毁灭B创建。但我后退一步，又要B毁灭再A创建。这样很麻烦，虚拟dom弄了好多次，而且如果A到B再到A，那么A原本的东西就会都不见了，因为A已经被毁灭过了，保存的临时数据页销毁了。keep-alive就是解决这个问题得到。

案例

这个案例原本可以简单点的，但是这个问题公司也会用到，一起讲了

比如我们页面是这样

跳转到到home时，识别或者重定向跳转到/home/toutiao

home有两个子：头条和新闻，和home同级的有my

当点击home时，或者点击头条时，跳转到home/toutiao

点击新闻时跳转到home/news

点击my时跳转到/my

当点击home的新闻，再点击my，再点击到home的时候，如果是使用重定向，会跳转到home/toutiao，那么我刚才浏览的明明是新闻，还要继续点一个新闻才到新闻。我想在home/news时，点my，再点home，会跳到home/news而不是home/toutiao
点my=》 点home=》
可以这样做
首先路由

	{
		path: '/home',
		name: 'home',
		component: home,
		redirect :'/home/toutiao',
		children: [{
			path: 'news',
			name: 'news',
			component: news,
		}, {
			path: 'toutiao',
			name: 'toutiao',
			component: toutiao,
		}]
	}, {
		path: '/my',
		name: 'my',
		component: my
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//app.vue
<template>
	<div>
	//根目录就2个按钮
		<button @click="tohome">home</button>
		<button @click="tomy">my</button>
		//1、加了keep-alive就行
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

<script>
	export default {
		methods: {
			tohome() {
				this.$router.push('/home')
			},
			tomy() {
				this.$router.push('/my')
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//home.js
<template>
	<div>
		我是home <br>
		//到了home里面，有2个按钮，根据按钮在router-view显示对应
		<el-button @click="totoutiao"> 头条</el-button>
		<el-button @click="tonews"> 新闻</el-button>
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//1、先定义path，这样就类似重定向
				path: '/home/toutiao'
			}
		},
		methods: {
			totoutiao() {
				this.$router.push('/home/toutiao')
			},
			tonews() {
				this.$router.push('/home/news')
			}
		},
		//2、在keep-alive里面才有这个函数，表示当这个页面活跃的时候，
		//从home/new跳转到my的时候，home不会被销毁，而且记得了上一次呆的地方是news，所以再点击home时，执行activated跳到home/news
		activated() {
			this.$router.push(this.path)
		},
		//组件内后置守卫，跳转了之后的
		beforeRouteLeave(to, from, next) {
			console.log(this.$route.path)
			//要离开了，记得这次是从哪里离开的，方便再次加入
			this.path = this.$route.path
			next()
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

其实说那么多就是为了表达keep-alive是可以方式组件再次被创建和销毁的，这个案例我觉得工作会用到所以记下的

注意点

我们先看下生命周期
created和mounted，然后接下来就是平常的东西，如果或数据发生变化，发生updated，然后销毁destoryed。
keep-alive有2个函数，activated和deactivated ，一个是某个组件活跃的时候（用到的时候），另一个就是组件不活跃（没用到的时候）

不让某个节点有keep-alive

比如详情页之类得,点击详情页再返回,再点击其他的详情页,因为用了keep-alive,不会再执行mouth和created,所以这个时候需要排除某些组件

<keep-alive exclude="xxx组件名">

</keep-alive>
1
2
3

45、为啥url有时候有#

这是因为VueRouter设置的模式是hash模式，设置成history就不是#了

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})
1
2
3
4
5

判断什么url干什么事

比如，tabbar的，根据url为/index的时候，首页按钮显示红色，其他都是黑色

就是设置2个，活跃的时候，显示红色，不活跃显示黑色，这个活跃值就这样判断

	if(this.$route.path.indexOf('/home') !==-1){
		//code...
	}
1
2
3

str.indexOf('key')：判断str中是否包含key，没有则返回-1，有则返回第几个开头的字

小实例？

		created() {
			console.log(this.$route);
			if(this.$route.path.indexOf('/home/toutiao') !==-1){
				console.log('trueeeeee!')
			}
		},
1
2
3
4
5
6

46、配置路径别名

如果导入一些图片之类的，如果文件移动了，什么…/，…/…/之类的很多，取个别名就好多了
默认@就是src,比如src/main.js，就是@/main.js

其他更多的可以自定义设置名字

//vue.config.js
const path = require('path');        //引入path模块
function resolve(dir){
    return path.join(__dirname,dir)  //path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
            //set第一个参数：设置的别名，第二个参数：设置的路径
            .set('@',resolve('./src'))
            .set('assets',resolve('.src/assets'))
            .set('components',resolve('./src/components'))
            .set('views',resolve('src/views'))
    }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其他用view,就

//import就这样写
import xx from 'views/xxx'
//如果非import，前面要加~
<img src="~xxx" alt="">
1
2
3
4

47、Promise

这是一个异步编程的一种解决方案
其实我之前敲代码也有过，比如我axios时，发送一个请求，当拿到结果后，再从拿到的结果再次发送一个请求。或许没啥事，但是当时写得是挺乱得，如果以后还有套娃嵌套娃嵌套娃，那就很恶心了，而promise就是为了让代码更好看，而且执行效率高，结构分明的东西。

Promise主要是用于有异步处理的地方

其大概结构是这样写的

	new Promise((resolve, reject) => {
		//...code
		//成功时执行resolve函数，实际上就是执行then的函数
		resolve('success');
		//失败时执行reject函数，实际上就是执行catch的函数
		reject('err')
	}).then((data) => {
		//成功之后的事
		console.log(data);
	}).catch((err) => {
		//失败之后的事
		console.log(err);
	})
1
2
3
4
5
6
7
8
9
10
11
12
13

• Promise的参数为一个函数，那个函数又有2变量resolve和reject，但resolve和reject也都是函数（不用写具体内容）。于是就可以用箭头函数简写啦
• 其在里面进行操作异步处理，在执行成功的地方写入resolve函数传参。就会自动跳到then执行代码。在执行失败的地方写入resolve函数传参，就会自动跳到catch执行代码
  或者是

	new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('resolve')
			reject('reject')
		}, 1000);
	}).then(data=>{
		//执行成功的代码
		console.log(data);
	},err=>{
		//执行错误的代码
		console.log(err);
	})
	
	//其其实就是then(function(data),function(err))
	//第一个执行成功的代码，第二个执行失败的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

小案例

比如我们这有个套娃的，用setTimeout模仿异步请求啦
一个setTimeout里面，执行代码，然后执行完里面又有个setTimeout，执行代码，里面又有setTimeout

	setTimeout(() => {
		console.log('11111');

		setTimeout(() => {
			console.log('222222');

			setTimeout(() => {
				console.log('333333');
			}, 1000);
		}, 1000);
	}, 1000);
1
2
3
4
5
6
7
8
9
10
11

打印是可以打印，就是有点恶心。用Promise优雅一下

	new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('1111')
			reject('err')
		}, 1000);
		//执行第一层成功代码
	}).then((data) => {
		console.log(data);
		//code..

		return new Promise((resolve, reject) => {
			setTimeout(() => {
				resolve('2222')
				reject('err')
			}, 1000);
			//执行第二次成功代码
		}).then((data) => {
			console.log(data);
			//code...

			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve('3333')
					reject('err')
				}, 1000);
				//执行第3次成功代码
			}).then((data) => {
				console.log(data);
				//执行第3次失败代码
			}).catch((data) => {
				console.log(err);
			})

			//执行第二次失败代码
		}).catch((data) => {
			console.log(data);
		})
		//处理第一层的错误代码
	}).catch((data) => {
		console.log(data);
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

虽然看起来还是恶心，但是，如果代码逻辑很复杂，这个就好

链式调用

还有链式调用，还有链式调用的简写方式，但我实在学不懂了，简写以后再学吧

all方法

我觉得比较罕见，就是2个异步任务，要任务A成功，任务B成功，2个一起成功了才执行自定义代码

	//all里面是个数组，每一个元素都是new一个Promise对象
	Promise.all([
		new Promise((resolve, reject) => {
			//code
		}),
		new Promise((resolve, reject) => {
			//code
		})
		//几个异步任务完成后，都是成功执行后，再来到then函数
		//其中，result是一个数组，result[0]是第一个异步任务完成的回调数据，result[1]是第二个异步任务完成的回调数据，
	]).then(result => {
		console.log(result);
	})
1
2
3
4
5
6
7
8
9
10
11
12
13

比如

			Promise.all([
				new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve({
							name: '小强',
							age: 18
						})
					}, 1000);
				}),
				new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve({
							name: '小明',
							age: 22
						})
					}, 1000);
				})
			]).then(result => {
				console.log(result);
				
			})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

结果为：

[
    {
        "name": "小强",
        "age": 18
    },
    {
        "name": "小明",
        "age": 22
    }
]
1
2
3
4
5
6
7
8
9
10

48、导入插件 或者 创建自己的工具类和插件

就是用别人的插件之类的
目前我只会怎么用别人的插件，创建自己的插件（工具类）我还不会

使用别人的插件

用官方的vuex为例子，其他第三方插件我不知道
主要是我查不到正确的做法是什么，官方这样导入的，其他应该或许大概也是这样做的？

1. 先下载插件(npm install xxx)
2. 新创个文件，专门做这个插件的事情

   //  store/index.js
   
   //1、导入vue和vuex
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   //2、使用插件  Vue.use(插件)
   Vue.use(Vuex)
   
   //3、导出插件，export default 插件对象
   //可以是new xx直接写
   //也可以是const x = new 插件对象，写好再export default x
   export default new Vuex.Store({
     state: {
     },
     mutations: {
     },
     actions: {
     },
     modules: {
     }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22

3. 再在main.js中使用插件

   import Vue from 'vue'
   //4、导入插件
   import store from './store'
   
   Vue.config.productionTip = false
   
   new Vue({
   //5、在这里写，这是官方的，我不知道第三方插件在new Vue里面，还是Vue.use
     store,
     render: h => h(App)
   }).$mount('#app')
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

   然后其他的也能通过$store使用

49、vuex

1）简单使用

就是之前遇到的，2个毫无相关的组件，要用同一个变量。之前是通过全局变量localStorage来实现的，但这个不是响应式的，不好做，查了下发现原来vuex就是做全局变量的，而且是响应式的。

vuex在store/index.js下
要的全局变量就在state里面加，比如

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  	//设置全局变量
    count:1000
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

别人用的话

我是全局变量counter:{{this.$store.state.count}}
1

就可

我是全局变量counter:1000

2）修改vuex中的数据

既然知道vuex是进行全局变量的，那么肯定能读能写，读就直接this.$store.state.变量名去读，但是写的话不可以通过传统的this.$store.state.变量名 ++，因为不单单你一个组件在写，其他组件也可能会写，这样直接改会发生异步错误处理。vuex都帮我们做好了

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:1000
  },
  mutations: {
    //1、vuex定义一个方法，为count++，参数加state
    increment(state){
      state.count++
    },
    //vuex定义一个方法，为count--
    decrement(state){
      state.count--
    },
    //还可以传参，第一个是state，第二个就是传参数据，如果是多个传参数据，可以用对象传，再 对象.xx
    incrementNum(state, num) {
      state.count += num
    }
    
  },
  actions: {
  },
  modules: {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<template>
	<div>
		我是全局变量counter:{{this.$store.state.count}}
		<!-- 2、普通的点击事件 -->
		<button @click="add">+</button>
		<button @click="jian">-</button>
		<button @click="addNum(5)">+5</button>
		<button @click="addNum(10)">+10</button>
	</div>
</template>

<script>
	export default {
		name: "",
		methods: {
			add(){
			//3、事件里面 this.$store.commit('vuex中方法名')  来进行值得修改
				this.$store.commit('increment')
			},
			jian(){
				this.$store.commit('decrement')
			},
			addNum(num){
				this.$store.commit('incrementNum', num)
			},
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

这样子就可以改，而且可以在插件里面看到值得修改过程

3）getters

这类似于普通组件的computed，什么计算属性，可以写一些tostring的东西

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1000,
    array: [10, 20, 30, 40]
  },
  mutations: {
  },
  getters: {
    //重构，显示对应的东西
    toStringCount(state) {
      return 'count:' + state.count
    },
    //可以配合过滤
    more20(state) {
      return state.array.filter(n => {
        return n > 20
      })
    },
    //参数可以加getters，调用getters的方法
    more20Lent(state, getters) {
      return getters.more20.length
    },
    //甚至可以自定义传参
    moreNum(state) {
      //return 回调函数，参数num就是要大于的数
      return num => {
        //然后过滤
        return state.array.filter(n => {
          //得到的数过滤回来
          return n > num
        })
      }
    }
  },
  actions: {},
  modules: {}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

		<!-- 直接显示 -->
		<h2>{{this.$store.getters.toStringCount}}</h2>
		<h2>{{this.$store.getters.more20}} </h2>
		<h2>{{this.$store.getters.more20Lent}} </h2>
		<h2>{{this.$store.getters.moreNum(10)}} </h2>
1
2
3
4
5

3.5）getters还有更方便的读写方式

const getters = {
  sid: state => state.user.sid
}
export default getters
1
2
3
4

const store = new Vuex.Store({
  getters
})
1
2
3

然后在用的地方

import {mapGetters} from "vuex";

  computed: {
    ...mapGetters(['sid']),
      //其是会自动转换成
      // sid(){
   	 //   return this.$store.state.sid
 	   // }
  },
1
2
3
4
5
6
7
8
9

然后就能简单地使用啦

console.log(this.sid)
1

4）特殊的mutations提交风格

上面的是普通的，下面这个特殊的

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1000,
  },
  mutations: {
  	//这种接受的是一个对象
    incrementNum(state, payload) {
      console.log(payload);
      state.count += payload.num
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

	<button @click="addNum(5)">+5</button>
	<button @click="addNum(10)">+10</button>
	
	<script>
	//方法
	addNum(num){
		//type和一个传值
		this.$store.commit({
			type :'incrementNum',
			num
		})
	},	
	
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

按下+10

{
    "type": "incrementNum",
    "num": 10
}
1
2
3
4

5）Mutation响应规则

2中是介绍了vuex中修改数据，但那仅限于修改，增加和删除我们都没讲
比如我们要修改和删除，先看错误的.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    obj: {
      name: '小强',
      age: '23'
    }
  },
  mutations: {
    updateObj(state) {
    	//obj增加一个key
       state.obj['address'] = '深圳'
       //obj删除一个key
       delete state.obj.age
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

		<h2>{{this.$store.state.obj}}</h2>
		<button @click="changeObj">修改对象</button>


			changeObj(){
				this.$store.commit('updateObj')
			}
1
2
3
4
5
6
7

点击修改对象按钮，也没效果

这么看来是已经修改了，但可惜的是，这2者不支持响应式布局（下面会讲哪些不是响应式的）

应该这么改

    updateObj(state) {
      // state.obj['address'] = '深圳'
      // delete state.obj.age
      //用这2个进行添加和修改
      Vue.set(state.obj,'address','深圳')
      Vue.delete(state.obj,'age')
    }
1
2
3
4
5
6
7

6）Mutation常量类型

就是，我们commit传的是字符串嘛，为了统一性，用常量来定义这个字符串，然后传入这个常量即可

//mutations_types.js
export const INCREMENT = 'increment'
1
2

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
//导入
import * as type from './mutations_types.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1000,
    array: [10, 20, 30, 40],
    obj: {
      name: '小强',
      age: '23'
    }
  },
  mutations: {
    //vuex定义一个方法，为count++
    // increment(state) {
    //   state.count++
    // },
    //将名字和替换成常量
	[type.INCREMENT](state) {
      state.count++
    },
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

	<button @click="add">+</button>
	

	import * as type from '../store/mutations_types.js'

	add() {
		// this.$store.commit('increment')
		this.$store.commit(type.INCREMENT)
	},
1
2
3
4
5
6
7
8
9

7）Action

上面的操作都是在mutation中进行的同步操作，但是很多情况是要异步操作的，而mutation不支持异步操作的，需要配合action使用。所以需要异步操作就方法->action->mutation,不需要异步就方法->mutation

  mutations: {
  	//在action中异步处理完后，在mutations中修改全局变量
      muAsync(state,payload){
      state.count +=payload.count
    }
  },
  actions: {
  	//2、在action中，定义异步操作，在异步操作成功时context.commit到mutatuions
    acAsync(context,payload){
      setTimeout(() => {
        context.commit('muAsync',payload)
      }, 1000);
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

		<h2>------------------</h2>
		<button @click="async(2)">异步操作+2按钮</button>
		{{this.$store.state.count}}
//js
		//1、在方法里面进行异步修改全局变量，dispatch跳转到action，第二个参数是对象
		async(num){
			this.$store.dispatch('acAsync',{count:num})
		}
1
2
3
4
5
6
7
8

ps

如果actions是在某个模块里面的，比如是

export default {
	actions:{
	  setUserId ({ commit }, userId) {
   	  commit('SET_USER_ID', userId)
  },		
	}
}
1
2
3
4
5
6
7

//store.index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

//  文件加载
const modulesFiles = require.context('./modules', true, /\.js$/)

//  遍历文件导出store对象
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})

export default store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

其他地方可直接用store.dispatch('user/setUserId', userId)

①结合Promise进行回调处理

就是在方法中，this.$store.dispatch('acAsync',{count:num})成功完成后，进行的一些操作

  actions: {
  
    acAsync(context, payload) {
      //返回一个promise，这样子，方法就可以继续写then了
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          //commit到mutations
          context.commit('muAsync', payload)
          //成功
          resolve('success')
        }, 1000);
      })
    }
    
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	methods: {
		async (num) {
			this.$store.dispatch('acAsync', {
				count: num
				//写回调
			}).then(res => {
				console.log(res);
			})
		}
	}
1
2
3
4
5
6
7
8
9
10

8）Module模块化

因为什么都往里面塞的话，这个index.js就会很大不方便，有个模块化

const Person ={
  state:{},
  mutations:{},
  getters:{},
  actions:{}
}

export default new Vuex.Store({
  state: {
    count: 1000,
    array: [10, 20, 30, 40],
    obj: {
      name: '小强',
      age: '23'
    }
  },
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    //其实就是Person:Person的简写
    Person  
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

①使用

import Vue from 'vue'
import Vuex from 'vuex'
import * as type from './mutations_types.js'

Vue.use(Vuex)

const Person ={
  state:{
    name:'詹姆斯'
  },
  mutations:{
    //注意这里的名字不要和根或其他任何模块重名
    updateName(state,payload){
      //state是本模块的state
      state.name = payload.name
    }
  },
  getters:{
    //普通的getters
    fullname1(state){
      return state.name + '1'
    },
    //调用本模块的getters
    fullname2(state,getters){
      return getters.fullname1 + '2'
    },
    //还可以用根的state数据
    fullname3(state,getters,rootState){
      return getters.fullname2 + rootState.count
    }
  },
  actions:{
    //异步操作也是一样
    syncUpdateName(context,payload){
      console.log(context,payload);
      setTimeout(() => {
        context.commit('updateName',payload)
      }, 1000);
    }
  }
}

export default new Vuex.Store({
  state: {
    count: 1000,
    array: [10, 20, 30, 40],
    obj: {
      name: '小强',
      age: '23'
    }
  },
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    //其实就是Person:Person的简写
    Person  
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

点击异步改变名字后

9）vuex项目结构

我们希望进行模块化的目录结构

store下，index是总，然后actions、mutations就管理总的action之类的，然后一个modules文件夹，管理各个模块，一个模块就有自己的action、mutations之类的

10）总结

vuex是个很好的全局变量管家，就是用起来有点麻烦。
要先预设什么全局变量，就在state中设置，
同步请求就在mutation中写好，方法再调用mutations
异步请求就方法调用action在action中进行异步处理，得到结果后再给mutations进行全局变量的修改
所有的全局变量修改一定要通过mutations进行修改。绕过mutations修改数据官方不建议，会造成数据错误

50、axios

1）crud

then和catch是每个都会有的
axios.request(config)，其他的比如get:axios.request(url[,config])

①get

两者用的时候，都是在方法里面用的，格式为

	axios.get('路径').then(res => {
          console.log(res );
      }).catch(err =>{
      	console.log(err);
      })
      
1
2
3
4
5
6

②post

	axios.post('路径',json类型的数据).then(res => {
          console.log(res );
      })
1
2
3

或者

	axios.post('路径',{params:json类型对象}).then(res => {
          console.log(res );
      })
1
2
3

③put

	axios.put('路径',json类型的数据).then(res => {
          console.log(res );
      })
1
2
3

④delete

	axios.delete('路径',{data:json类型数据}).then(res => {
          console.log(res );
      })
1
2
3

2）all并发请求

	//返回的是一个数组
	axios.all([axios.get('url1'), axios.get('url2')])
		.then(res => {
			console.log(res);
	})
	//或者一个个地返回，推荐这种
	axios.all([axios.get('url1'), axios.get('url2')])
		.then(axios.spread((res1, res2) => {
			console.log(res1);
			console.log(res2);
	}))	
	
1
2
3
4
5
6
7
8
9
10
11
12

3）axios的配置信息

一般弄完基本的东西，有特殊的可以在里面加一些配置

①直接在某一个axios请求里面加进去

	axios.all([
			axios({
				//config
				baseURL: 'http://192.168.12.128:9012',
				url: 'user/user/follow'
			}),
			axios({
				//config
				baseURL: 'http://192.168.12.128:9012',
				url: 'user/user/follow',
				params: {
					type: 'all'
				}
			}),
		])
		.then(axios.spread((res1, res2) => {
			console.log(res1);
			console.log(res2);
		}))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

②全局的配置

	//公共baseURL抽出来
	axios.default.baseURL = 'http://192.168.12.128:9012'

	axios.all([
			axios({
				url: 'user/user/follow'
			}),
			axios({
				url: 'user/user/follow',
				params: {
					type: 'all'
				}
			}),
		])
		.then(axios.spread((res1, res2) => {
			console.log(res1);
			console.log(res2);
		}))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

③配置表

https://github.com/axios/axios

{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

   // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default

  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default

  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

4）实例封装

如果一个文件写默认配置baseURL =xxx，那么会影响全部，但往往很多时候需要从不同的数据库拿不同的数据，那baseURL就不一定了
一种是，利用nginx反向代理，或者是spring cloudbus的那个，将所有请求统一起来再分发下去
另一种就是自己封装一层axiox实例，我们一般是用这个方法的

	//request.js
	//传入config，config会自动覆盖的
	export function request(config){
		//有个axios.create专门用于创建实例
		const instance = axios.create({
			baseURL:'http://192.168.12.128:9012',
			timeout:5000
		})

		//返回的是一个promise
		return instance(config)
	}
1
2
3
4
5
6
7
8
9
10
11
12

用的话

	import request from 'request.js'
		//传入的是config，上面那个表，
	request({
		url: '/user/user/follow'
	}).then(res => {
		console.log(res);
	}).catch(err => {
		console.log(err);
	})
1
2
3
4
5
6
7
8
9

5）拦截器

分为请求拦截器和响应拦截器，写再axios得到实例封装里面的，就是返回 return instance(config)之前

	//请求拦截器
	//use后第一个参数函数是成功的函数
	instance.interceptors.request.use(config => {
		//请求可以在这里设置一个转圈圈的东西，等在相应后，将转圈圈样式改变就可

		//可以检查config里面有没有token令牌之类的

		//或者检查config里面有没有不对的信息
		// 都通过后再放行，如果不通过就跳转到其他页面
		return config
		//失败的函数
	}, err => {
		//code
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

	//响应拦截器
	instance.interceptors.response.use(res => {
		//code
		return res
	}, err => {
		//code
		return err
	})
	
1
2
3
4
5
6
7
8
9

51 、css常量

	//:root是定义常量的
	:root{
		--color-text: #666;	
	}

	//这就是使用
	.xxx{
		color: var(--color-text);
	}
1
2
3
4
5
6
7
8
9

52、tabbar的编写(怎么让一个东西固定)

(0)怎么固定

先说一下怎么让一个div在页面上固定,给css

//比如固定住上面的导航条
.x{
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

//比如在一个中心固定住
  .leftSideBackground {
    position: fixed;
    bottom: 37px;
    left: 20px;
    //这样就固定了距离左下多少
    width: 7px;
    height: 40px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(1)tabbar

只是提供一个思路，用插槽完成

因为下面的tabbat不知道会有几个，所以可以先定义一个tabbar，然后一个插槽完成，插槽里面再细分到每个item，然后用总的 MainTabBar完成。

<!-- tabbar -->
<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<script>
	export default {
		name: "TabBar"
	}
</script>

<style scoped>
  #tab-bar {
    /* 本身的样式 */
    background-color: #f6f6f6;
    height: 49px;
    border-top: 1px solid #eee;
    box-shadow: 0px -1px 1px rgba(150,150,150,.08);

    /* 定位相关 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* 利用flex进行布局 */
    display: flex;
    text-align: center;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- tabbarItem，每一个插槽都要有活跃图片，未选择图片，文字 -->
<template>
  <div id="tab-bar-item" @click="itemClick">
  	//记得要再slot外再用一层div包住，因为div才能用样式之类的
    <div class="item-icon" v-show="!isActive"><slot name="icon"></slot></div>
    <div class="item-active-icon" v-show="isActive"><slot name="active-icon"></slot></div>
    <div class="item-text" :style="activeStyle"><slot name="text"></slot></div>
  </div>
</template>

<script>
	export default {
		name: "TabBarItem",
    props: {
			link: {
				type: String,
        required: true
      }
    },
    computed: {
			isActive() {
				return this.$route.path.indexOf(this.link) !== -1
      },
      activeStyle() {
				return this.isActive ? {'color': 'red'} : {}
      }
    },
    methods: {
			itemClick() {
				this.$router.replace(this.link)
      }
    }
	}
</script>

<style scoped>
  #tab-bar-item {
	/* 这个很重要 */
    flex: 1;
  }

  .item-icon img, .item-active-icon img {
    width: 24px;
    height: 24px;
    margin-top: 5px;
    vertical-align: middle;
  }

  .item-text {
    font-size: 12px;
    margin-top: 3px;
    color: #333;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

MainTabBar,往tabbar中插入一些tabbaritem
<template>
  <tab-bar>
    <tab-bar-item link="/home">
      <img slot="icon" src="~assets/img/tabbar/home.svg" alt="">
      <img slot="active-icon" src="~assets/img/tabbar/home_active.svg" alt="">
      <div slot="text">首页</div>
    </tab-bar-item>
    <tab-bar-item link="/category">
      <img slot="icon" src="~assets/img/tabbar/category.svg" alt="">
      <img slot="active-icon" src="~assets/img/tabbar/category_active.svg" alt="">
      <div slot="text">分类</div>
    </tab-bar-item>
    <tab-bar-item link="/cart">
      <img slot="icon" src="~assets/img/tabbar/cart.svg" alt="">
      <img slot="active-icon" src="~assets/img/tabbar/cart_active.svg" alt="">
      <div slot="text">购物车</div>
    </tab-bar-item>
    <tab-bar-item link="/profile">
      <img slot="icon" src="~assets/img/tabbar/profile.svg" alt="">
      <img slot="active-icon" src="~assets/img/tabbar/profile_active.svg" alt="">
      <div slot="text">我的</div>
    </tab-bar-item>
  </tab-bar>
</template>

  <script>
    import TabBar from 'common/tabbar/TabBar'
    import TabBarItem from 'common/tabbar/TabBarItem'

    export default {
      name: "MainTabBar",
      components: {
        TabBar, TabBarItem
      }
    }
  </script>

<style scoped>

</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

52.5、flex: 1;

css中的一个属性，用于水平布局

53、前端mvc

这个问题也是困扰了我很久，就是我的请求都直接写在每个组件方法里面，这样不好

其实可以参考spring mvc，每个组件的方法请求相当于controller，然后弄个中间层，将逻辑代码放到servlet层，因为只有读取到的数据后操作不一样，读取数据的操作都是一样的。可能A组件要根据ID找数据，B组件也是根据ID找数据，那么就可以让根据ID找数据丢在一个文件里面就行

	//封装好一个request.js
	//传入config，config会自动覆盖的
	export function request(config){
		//有个axios.create专门用于创建实例
		const instance = axios.create({
			baseURL:'http://192.168.12.128:9012',
			timeout:5000
		})
		
		//拦截器
		
		//返回的是一个promise
		return instance(config)
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

//home.js，专门处理home的东西
import requestfrom './request'


export function getHomeMultidata() {
  return axios({
    url: '/home/multidata'
  })
}
1
2
3
4
5
6
7
8
9

//	别的地方要用的话
  import {getHomeMultidata} from "network/home";
		
		//返回的就是一个promis，可以then和catch
        getHomeMultidata().then(res => {
          //xxx
          
        })
1
2
3
4
5
6
7
8

53、process.env.NODE_ENV

可以获得当前是什么环境，怎么拿到我就不知道了。。就只会用

54、手机浏览器看控制台

一个插件，叫vconsole

55、前端处理跨域+转发跳转

事情的原因是，发送一个http://localhost:8080/applySiCard/applyInfo/v1/realNameInfo的请求，等半天没反应，就觉得很奇怪，大佬说这里发送的是localhost，但实际上vue进行了设置

//vue.config.js
module.exports = {
  devServer: { // 包含关系
    proxy: {
      '/applySiCard': {
        target: 'http://10.11x.x.x:8099',
        // target: 'http://192.168.xxx:8099',
        changeOrigin: true //跨域
      }
    }
  }
},
1
2
3
4
5
6
7
8
9
10
11
12

这个做了转发也做了跨域问题，只要是localhost:8080/applySiCard/xxx的，都会跳转到10.11x.x.x:8099/applySiCard/xxx,F12也看不到的
这里是做了一个转发的，这样就不用在每个请求都加ip和端口了

值得一提的是，这些操作devServer.proxy都是用于开发环境的，开发环境才会有跨域问题，为了解决跨域才会有这个操作。因为本地是127.0.0.1，会有跨域。
如果是线上，前端和后端在同一个主机上，地址当然耶一样，不用再改了。

56、setInterval和clearInterval

settimeout是多少秒仅执行一次后消失了嘛，这玩意是隔多少秒就执行一次
clearInterval是用来取消的
比如发验证码，60s内不允许重复发

    startBusRefresh() {
      if (this.busRefreshTimer) return
      this.time = 60
      this.busRefreshTimer = setInterval(() => {
        this.time--
        if (this.time == 0) {
          this.stopBusRefresh()
        }
      }, 1 * 1000)
    },
    stopBusRefresh() {
      this.busRefreshTimer && clearInterval(this.busRefreshTimer)
      this.busRefreshTimer = null
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

57、vue中，方法异步用async关键字

async examin() {
//xxx
}
1
2
3

58、this.$forceUpdate()强制刷新

原理是调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期
能少用就少用吧，刷新一下对用户体验不友好

59、!important 解决兼容性

.el-table__expanded-cell:hover {
  background-color: #f7f7f7 !important;
}
1
2
3

60、/deep/、::v-deep、>>>

这3都是表示一个东西，修改原生样式
这得从一件诡异的事情说清
公司做一个弹窗嘛

二话不说上vant的官网复制粘贴去
然而复制粘贴后，却啥都没有

①为什么会这样

？！为啥这样，对比了一下官方的css，发现样式被覆盖了

这背景都被搞了，是被自己写的全局css覆盖了。。。

所以我们现在在vue文件里面改局部css样式就好（不要搞全局css）

这是官网的：

尽管有点不一样，但不要怕，把背景搞成白色就算赢
不知道为啥上面是有#app .van-action-sheet，而官方是.van-action-sheet，可能是全局变量设置了什么东西吧。。。
然后就改

②错误1

  .van-action-sheet{
    background: white;
  }
1
2
3

真是非常神奇呢，然后看了网上说是改原生样式，会在后面加一串东西

③错误2

  /deep/ .van-action-sheet{
    background: white;
  }
1
2
3

嗯？不会。。

④正确

简单且朴素

#app{
  .van-action-sheet{
    background: white;
  }
}
1
2
3
4
5

我也不知道为什么后面有那串东西还能成功

61、根据什么环境读取不同的参数数据

.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
1
2
3

PS:属性名必须以VUE_APP_开头，比如VUE_APP_XXX
如

# .env.development
VUE_APP_MOCK_LOCAL = true
1
2

用的话：

const isMockLocal = process.env.VUE_APP_MOCK_LOCAL;
1

62、win和linux的node环境不一样

忘记哪个依赖了，install后会报错说没有安装python，然后安装个python就行（有些Linux自带py环境）。然后还有一个是淘宝镜像的问题，在后面加--registry=https://registry.npm.taobao.org

63、路由请求时转圈圈

这种，可以在一个请求方法里面写，也可以搞一个通用post里面写，我这在一个请求方法里面写的

export function queryARES(param, showLoading = true) {
  let loading = null
  //等待状态
  if (showLoading) {
    loading = Toast.loading({
      duration: 40 * 1000, // 持续展示 toast
      forbidClick: true,
      message: '正在处理，请稍等'
    })
  }
  return new Promise((resolve) => {
    return post({
      param: param,
      url: '/openapi/v1/mohrss/call_api',
    }).then((res) => {
      //清除等待状态
      loading?.clear()
      resolve(res);
    }).catch((error) => {
      //清除等待状态
      loading?.clear()
      console.log(error);
      resolve(false);
    });
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

64、async的作用

我以前一直以为async是为了解决异步问题，现在发现是配合promise使用的
如果一个请求返回promise，没有async为

  created() {
    const res =  xxx(param, true)
    console.log(res)

  },
1
2
3
4
5

如果有async

  async created() {

    const res = await xxx(param, true)
1
2
3

65、富文本编辑器

npm install @packy-tang/vue-tinymce
把https://gitee.com/panjiachen/vue-element-admin/tree/master/src/components中的Tinymce复制下来到一样的地方（对，npm安装后还不能直接用。。而且这个是已经编写好的了，很方便）
然后用就简单了

<template>
  <div class="components-container">
    <aside>
      这是富文本编辑器，用v-model绑定html形式的值
    </aside>
    <div>
      <tinymce v-model="content" :height="300" />
    </div>

    <aside>
      这是富文本编辑器的结果，用v-html绑定html形式的值。保存到数据库直接用html形式保存即可
    </aside>
    <div class="editor-content" v-html="content" />
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      content:
      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><ul>
        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
      </ul>`
    }
  }
}
</script>

<style scoped>
.editor-content{
  margin-top: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

66、图片加载不了

普通的<img src='https://dgapa.dongguantong.com.cn/dgtmgm/upload/image/20210801115039.jpg' alt="" style="height: 50px;width: 50px">就加载不出来呢

然后百度说加这个就好了 <meta name="referrer" content="no-referrer" />

67、非父子组件传值

vuex

第一个方法就是vuex了，在前面已经介绍

新建一个Vue对象busEvent

新建一个Vue对象作为中间值

// 创建busEvent.js   作用：非父子组件间传值
import Vue from 'vue'
const busEvent = new Vue()
busEvent.dicts = []
export default busEvent
1
2
3
4
5

然后用的话

import busEvent from '@/utils/busEvent'

//xxxx函数里面，读取缓存
      if (busEvent.dicts[dict_type]) {
        this.dicts[dict_type] = busEvent.dicts[dict_type]
        return busEvent.dicts[dict_type]
      }
//写缓存
      busEvent.dicts[dict_type] = res.data
      return busEvent.dicts[dict_type]
1
2
3
4
5
6
7
8
9
10

68、注册全局的$xxx

之前不是会有$router表示路由嘛，我们也想要$xx自己的也可以的

//main.js
import Vue from 'vue'
import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts
1
2
3
4
5

69、父组件用子组件的方法

      <template slot="content">
<!--        要加个ref就对了-->
        <userinfo-Mgt-Table ref="userinfoMgtTable" />
      </template>

<script>
import userinfoMgtTable from "@/components/Table/personas/userinfoMgtTable";

export default {
  components: {
    userinfoMgtTable,
  },
}  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后子组件userinfoMgtTable里面有个方法searchByParam

//userinfoMgtTable
    searchByParam(param) {
      this.pageNum = 1;
      this.searchParam = Object.assign({}, param);
      this.reqBillingRecordList();
    },
1
2
3
4
5
6

父组件要用的话

	this.$refs.子组件名.方法
	
    this.$refs.userinfoMgtTable.searchByParam(param);
1
2
3

70、Object.assign(a,b)

这可是个好东西，让b的属性加到a里面，

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

1
2
3
4
5

Object { a: 1, b: 4, c: 5 }

71、Object.keys(object).forEach(e =＞ {您的代码}) 用于查看对象的key

类似于for…i…
下面两段代码的结果都一样

// 创建对象
var person = {
    name: 'hjm',
    age: 18,
    school:"SKD University",
    home: 'China'
}
 
// 用forEach()进行遍历
var keys = Object.keys(person).forEach(function (e) {
    console.log("person ", e, ": ", person[e]);
});
1
2
3
4
5
6
7
8
9
10
11
12

// 创建一个对象
var person = {
    name: 'hjm',
    age: 18,
    school:"SKD University",
    home: 'China'
}
 
// 获得对象属性名组成的数组
var keys = Object.keys(person);
 
// 用于存储匹配的属性值
var value = [];
 
// 用for进行遍历
for (var i = 0,len = keys.length; i < len; i++) {
    var key = keys[i];
    value[i] = person[key];
    console.log("person ", key, ": ", value[i]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

用于将对象下标对应的值为空

      searchForm = {
        user_id: "asd",
        age_tag: "qwe",
        sex_tag: "r",
        card_type_tag: "w",
        active_tag: "q",
        parking_tag: "s",
      },
      
      //将对象值为空
      Object.keys(this.searchForm).forEach(key => {
        this.searchForm[key] = ''
        console.log(this.searchForm)
      })
     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

sex_tag
age_tag
card_type_tag
active_tag
parking_tag
ex_tag

72、开发依赖和生产依赖

就开发的时候嘛，有些是要用的，但是正式上线就不用了，就npm install xxx --save-dev
普通的就npm install xxx --save

73、mock的简单使用

以前的mock我都是参照vue element admin他里面做好的来做的，但是我直接复制过去发现不行，就参考了这个文章是可以的
PS：最好的办法还是vue element admin里面的mock方法，但是我不会抽出来，只能用比较差一点的方法

npm install mockjs --save-dev

1、在src同级目录添加mock-server文件夹内涵3个文件如下

index.js //假接口入口配置文件
 
similar.js //小模块，不让一整个模块都写在index里面
 
1
2
3
4

2、vue.config.js内配置

devServer:{
	proxy: config.dev.proxyTable,//参照位置
	...
	before: require('./mock-server/index'), //添加

}
1
2
3
4
5
6

3、index.js

//导入拆分的模块
const similar = require('./similar')

module.exports = function (app) {

	//然而我写得还是不好，还是要一个个地导入
  similar.querySimilarUserPersonaListByPage(app);
  similar.querySimilarUserPersonaNum(app)

}

1
2
3
4
5
6
7
8
9
10
11

similar.js

const Mock = require('mockjs');
const Host = process.env.VUE_APP_HOST + '/persona/label/v1'

//生成mock地随机数
const json = Mock.mock({
  result_code: '@integer(1, 3)',
  message: "success",
  data: {
    id: '@increment',
    title: '@title(5, 10)',
  }
})

module.exports = {

	//里面就写各个的方法
  querySimilarUserPersonaListByPage(app) {
    app.post(Host + '/querySimilarUserPersonaListByPage', function (rep, res) {
      res.json(Mock.mock(json));
    });
  },

  querySimilarUserPersonaNum(app) {
    app.post(Host + '/querySimilarUserPersonaNum', function (rep, res) {
      res.json(Mock.mock(json));
    });
  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

73.5、由于mockjs很久没人理了，所以推荐使用Better-Mock

Better-Mock基于mockjs，所以可以兼容使用
Better-Mock文档
mock文档
主要是Better-Mock可以直接拦截

74、数据字典的几种使用方法

过滤器

//main.js
import * as filters from './filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
1
2
3
4
5
6

// src/filter/index.js
// 导入的2个就是json
import {trans_tp, payment_type} from '@/views/scenesPay/dict'

export function formatScenesDict(value) {
  let flag = false

  for (let transTpElement of trans_tp) {
    if (value === transTpElement.code) {
      flag = true
      return transTpElement.name
    }
  }

  for (let paymentTypeElement of payment_type) {
    if (value === paymentTypeElement.code) {
      flag = true
      return paymentTypeElement.name
    }
  }

  if (flag == false) return value

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// src/views/scenesPay/dict
export const payment_type = [
  {code: '0101', name: "中银通支付"},
  {code: '0102', name: "微众虚拟卡支付"},
  {code: '0103', name: "东莞银行虚拟卡支付"},
  {code: '0104', name: "广发银行虚拟卡支付"},
  {code: '0105', name: "农商银行虚拟卡支付"},
  {code: '0201', name: "联盟银行信用卡支付"},
  {code: '0202', name: "非联盟信用卡支付"},
  {code: '0203', name: "联盟银行储蓄卡支付"},
  {code: '0204', name: "非联盟银行储蓄卡支付"},
  {code: '0205', name: "社保卡支付"},
  {code: '0206', name: "储蓄卡快捷支付"},
  {code: '0207', name: "信用卡快捷支付"},
  {code: '0301', name: "微信支付"},
  {code: '0302', name: "支付宝支付"},
  {code: '0303', name: "云闪付支付"},

]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

75、判断当前是什么环境

环境只有3个，开发、测试、生产，其中，开发和测试是可以直接判断的
process.env.NODE_ENV 为development时，开发环境
为production时，是生产环境

判断是否为测试环境

这个大有研究，从原理说起

//package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test-build": "vue-cli-service build --mode testpdct",
    "lint": "vue-cli-service lint"
  },
}
1
2
3
4
5
6
7
8
9

一般比如看这里嘛，第一个是开发，第二个是生产
第三个是我们自定义的，自定义为测试，后面的–mode testpdct就是让我们用了.env.testpdct这个文件

一般来说，配置什么全局变量的都是这样的

开发和生产是用vue cli创建就有的，testpdct是人工创建的，名字就是package.json里面的--mode xxxx
然后在.env.testpdct里面定义一个VUE_APP_ENV = test,用的时候process.env.VUE_APP_ENV === 'test'就能判断是不是测试环境了

76、更新依赖

直接npm update xxxx

77、组件传值不单单是传值

比如这个

	<van-empty
	  :image="image"
	  v-if="bus_tickets&&bus_tickets.length == 0">
	  <template slot="description">
	    <span>您还没有行程 赶紧下单吧！ <br> <div class="clickTips" @click="refresh">点我刷新试试</div></span>
	  </template>
	</van-empty>
<style>
  .van-empty {
    padding: 0;

    /deep/ .van-empty__image {
      width: 135px;
      height: 85px;
      margin-top: 57px;
      margin-bottom: 15px;
    }

    /deep/.van-empty__description {
      margin-top: 0;
      .clickTips {
        text-align: center;
        color: rgb(94, 201, 255);
      }
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

就，原本description只传个文字，但是用<template slot="description">后，里面可以添加样式啥的，，而且那cssvan-empty__description还能直接用？？

78、传图片路径失败时还可以用require来做

      <van-empty :image="image">
      </van-empty>
      
<script>
  data () {
    return {
      image: require('@/assets/images/empty.png')
    }
  },
</script>

1
2
3
4
5
6
7
8
9
10
11

79、$on和$emit进行非父子组件通讯

非父子组件通讯

//busEvent.js
// 创建busEvent.js   作用：非父子组件间传值
import Vue from 'vue'
const busEvent = new Vue()
export default busEvent

1
2
3
4
5
6

//一般来说这么用的
//用之前记得import busEvent
var bus = new Vue()

// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
  // ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
1
2
3
4
5
6
7
8
9
10

80、阻止冒泡事件

每个按钮都有@click事件，然后按钮里面有个X也有@click事件，但是按了X，连外面button得事件也触发了，为了解决，这就是阻止冒泡事件（大学干小南教过）
vue解决就是在X得事件加stop@click.stop="xxx"
https://cn.vuejs.org/v2/api/#v-on

81、保存登录状态

一般来说，登录后，保存到localStorage和vuex，这样，不刷新不退出的情况下就能一只知道登录状态和用户了
但是一般都会刷新的，那么就用到全局路由前置守卫

router.beforeEach((to, from, next) => {
}
1
2

在每次要跳转之前，判断localStorage的用户信息是否存在，如果不存在，就没登录。如果存在，就把localStorage中的用户信息同步到vuex进行相应化数据，其他用就getter用就好了
比如

router.beforeEach((to, from, next) => {
  const uniUserInfo = uni.getStorageSync('userInfo')
  const uniToken = uni.getStorageSync('token')

  if (uniToken){
    if (uniUserInfo){
      store.dispatch('user/setToken', uniToken)
      store.dispatch('user/setUserInfo', uniUserInfo)
    }else{
      setTokenAndUserInfo(uniToken)
    }
  }
  // console.log(uniToken)
  // console.log(uniUserInfo)
  next();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

82、el-select中的el-option中value为对象时

比如这个

   <el-form-item label="上一级字典" prop="sup_dict">
     <el-select v-model="sup_dict" placeholder="请选择" >
       <el-option v-for="item in dictInfo" :label="item.dict_name" :value="item" :key="item.id"></el-option>
     </el-select>
   </el-form-item>
1
2
3
4
5

//dictInfo为
dictInfo:[
    {
        "id": "d3f34d529e26494eb974772ccc8d4612",
        "dict_no": "1",
        "dict_name": "阵地打卡活动",
        "dict_type": "activity_type",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "10",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-11 10:11:08",
        "update_time": null,
        "is_delete": "0"
    },
    {
        "id": "e152ef7a0f374a8389b2d5219f6921fd",
        "dict_no": "2",
        "dict_name": "主题积分活动",
        "dict_type": "activity_type",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "100",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-11 10:11:49",
        "update_time": null,
        "is_delete": "0"
    },
    {
        "id": "181c11e860fa44e79b1c12dedf6c31ae",
        "dict_no": "1",
        "dict_name": "实体卡刷卡",
        "dict_type": "sign_type",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "呵呵",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-10 15:28:46",
        "update_time": "2021-11-11 09:03:43",
        "is_delete": "0"
    },
    {
        "id": "78fef122fdbb416a99f3d951b3254cfa",
        "dict_no": "2",
        "dict_name": "手动补卡",
        "dict_type": "sign_type",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "无",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-11 10:09:15",
        "update_time": null,
        "is_delete": "0"
    },
    {
        "id": "909176513a6240cd889c13008e803ed7",
        "dict_no": "3",
        "dict_name": "人脸打卡",
        "dict_type": "sign_type",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "无",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-11 10:09:45",
        "update_time": null,
        "is_delete": "0"
    },
    {
        "id": "f3e65a8b463d4f69b51700eb0c0f77b9",
        "dict_no": "1",
        "dict_name": "正常",
        "dict_type": "status",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "无",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-11 10:13:00",
        "update_time": null,
        "is_delete": "0"
    },
    {
        "id": "85471e06f1024bfe9dbca5c4622f6b55",
        "dict_no": "2",
        "dict_name": "失效（置黑）",
        "dict_type": "status",
        "dict_desc": null,
        "sup_dict_no": null,
        "sup_dict_type": null,
        "field1": "无",
        "field2": null,
        "field3": null,
        "status": "1",
        "create_time": "2021-11-11 10:13:24",
        "update_time": null,
        "is_delete": "0"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

就很简单的，选项为for循环，显示为dict_name，点中后值为整个item对象，通过v-model绑定到sup_dict中，但是，事实是这样

为什么都乱了。。。
查文档

就是说要在el-select加多个value-key=“id”，其中id为唯一

     <el-form-item label="上一级字典" prop="sup_dict">
       <el-select v-model="sup_dict" placeholder="请选择" value-key="id">
         <el-option v-for="item in dictInfo" :label="item.dict_name" :value="item" :key="item.id"></el-option>
       </el-select>
     </el-form-item>
1
2
3
4
5

就好了

83、连接日期和时间，返回Date

const date = '2018-12-24';
const time = '23:59:59';

const dateTime = moment(`${date} ${time}`, 'YYYY-MM-DD HH:mm:ss').format();
1
2
3
4

84、解决异步的邪门歪道，诡异的办法

有些东西就尼玛离谱，逻辑上一点毛病都没有，但他妈的vue或者是js就是存在着这些异步同步的问题。
比如

console.log(this.form)
this.form =  obj2DateRange(this.form)
console.log(this.form)
1
2
3

明明经过函数的变化都已经发生改变了，但2次输出都是变化后的效果，但老子要的是一个变化前和一个变化后的效果啊

再比如提交表单的

const reqParam = this.form
//然后将reqParam提交上去,进行更新
1
2

但这个，修改里面变的情况下，外面你的table也会变，但这还没提交呢
遇事不决，遇到这种人眼逻辑看起来没毛病的，我们可以统一用一种诡异的方法解决

      this.form.id = row.id
      this.form.act_no = row.act_no
      this.form.act_name = row.act_name
      this.form.act_type_no = row.act_type_no
      this.form.site_no = row.site_no
      this.form.act_desc = row.act_desc
      this.form.status = row.status
      this.form.act_duration = row.act_duration
      this.form.score_once = row.score_once
      this.form.dateRange = row.dateRange
      this.form.start_date = row.start_date
      this.form.start_time = row.start_time
      this.form.end_date = row.end_date
      this.form.end_time = row.end_time
		//this.form = row //感觉和这一样，但效果确实不一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

或者

              const {
                id,
                act_no,
                act_name,
                act_type_no,
                site_no,
                act_desc,
                status,
                act_duration,
                score_once,
                dateRange, //在做了在做了
                start_date,
                start_time,
                end_date,
                end_time
              } = this.form

              const reqParam = {
                id,
                act_no,
                act_name,
                act_type_no,
                site_no,
                act_desc,
                status,
                act_duration,
                score_once,
                dateRange, //在做了在做了
                start_date,
                start_time,
                end_date,
                end_time
              }
              //const treqParam = this.form //看起来和这一样，但实际上就尼玛不一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

看起来就是搁这搁这得感觉，但实际上他就是能解决一些异步得奇怪行为，就尼玛 诡异离谱