Vue2（三）

最新推荐文章于 2025-04-07 10:26:32 发布

原创最新推荐文章于 2025-04-07 10:26:32 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

笔记同时被 2 个专栏收录

105 篇文章

订阅专栏

5 篇文章

订阅专栏

一、Vue核心

点此处去查看·Vue核心

二、Vue组件化编程

点此处去查看·Vue组件化编程

三、Vue脚手架

点此处去查看·Vue脚手架

四、Vue中的ajax

一个公共接口https://api.github.com/search/users?q=xx
一个公共接口https://api.uixsj.cn/hitokoto/get?type=social

ajax

4.1.1 方法一

在vue.config.js中添加如下配置:

devServer :{
	proxy : "http://localhost : 5000"
}

说明:
1.优点:配置简单，请求资源时直接发给前端(8080)即可
2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。
3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

4.2.2 方法二

在vue.config.js中添加如下配置:

devServer: {
        proxy: {
          '/api': {
            target: '<url>',
            pathRewrite:{'{^/api}':''},
            ws: true,//用于支持websocket
            changeOrigin: true //用于控制请求头中的host值
          },
          '/foo': {
            target: '<other_url>'
          }
        }
      }

说明:
1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。
2.缺点:配置略微繁琐，请求资源时必须加前缀。

4.2 vue-resource

npm i vue-resource

this.$http.get(url).then(...)

4.3 slot 插槽

1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件。
2.分类:默认插槽、具名插槽、作用域插槽

4.3.1 默认插槽

父组件中:
	<Category>
		<div>html结构1</div>
	</Category>
子组件中:
	<template>
		<div>
			<!--定义插槽-->
			<slot>插槽默认内容...</slot>
		</div>
	</template>

4.3.2 具名插槽

父组件中:
	<Category>
		<template slot="center">
			<div>html结构1</div>
		</template>
		<template v-slot:footer>
			<div>html结构2</div>
		</template>
	</Category>
子组件中:
	<template>
	<div>
		<!--定义插槽-->
		<slot name="center">插槽默认内容...</slot>
		<slot name="footer">插槽默认内容...</slot>
	</div>
	</template>

4.3.3 作用域插槽

1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。

父组件中:
	<Category>
		<template scope="scopeData">
			<! --生成的是ul列表-->
			<ul>
				<li v-for="g in scopeData.games" : key="g">{{g]}</li>
			</ul>
		</template>
	</Category>
	<Category>
		<template slot-scope="scopeData">
			<!--生成的是h4标题-->
			<h4 v-for="g in scopeData.games" : key="g">{{g}}</h4>
		</template>
	</Category>
子组件中:
	<template>
		<div>
			<slot :games="games"></slot>
		</div>
	</template>
	
	<script>
	export default {
		name : ' Category ' ,
		props : [ 'title '],//数据在子组件自身
		data() {
			return {
				games : [ '红色警戒',"穿越火线",'劲舞团','超级玛丽']
			},
		}
	</script>

五、Vuex

5.1 理解Vuex

5.1.1 vuex是什么

1．概念:专门在Vue 中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。
2. Github地址: https://github.com/vuejs/vuex

5.1.2什么时候使用Vuex

多个组件依赖于同一状态
来自不同组件的行为需要变更同—状态

5.2 原理图

在这里插入图片描述

5.3 搭建vuex环境

1、下载Vuex：npm i vuex
2、创建文件：src/store/index.js

//引入vue核心库
import Vue from 'vue'

//引入Vuex
import Vuex from 'vuex'

//应用vuex插件
Vue.use(Vuex)

//准备actions对象—响应组件中用户的动作
const actions ={}
//准备mutations对象—修改state中的数据
const mutations = {}
//准备state对象—保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

3、在main.js 中创建vm时传入store配置项

//引入store
import store from './store'
...

//创建vm
new Vue({
	el: '#app ' ,
	render: h => h(App),
	store
})

5.4 getters的使用

1.概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。
2.在store.js中追加 getters配置

const getters = {
	bigSum(state){
		return state.sum* 10
	}
}
//创建并暴露store
export default new Vuex.Store({
	getters
})

3.组件中读取数据:$store.getters.bigSum

5.5 四个map方法的使用

5.5.1mapState方法:

用于帮助我们映射state 中的数据为计算属性

computed : {
	//借助mapState生成计算属性: sum、 school、 subject（对象写法)
	...mapState({sum : 'sum ' ,school : 'school ' ,subject : 'subject' })，
	//借助mapState生成计算属性: sum、tchool、 subject（数组写法)
	. ..mapState( [ ' sum ' , 'school ' , 'subject ' ]),
},

5.5.2 mapGetters方法:

用于帮助我们映射getters 中的数据为计算属性

computed: {
	//借助mapGetters生成计算属性: bigSum(对象写法)
	. ..mapGetters({bigSum: " bigSum '}),
	/ /借助mapGetters生成计算属性: bigSum（数组写法)
	...mapGetters( [ 'bigSum '])
},

5.5.3mapActions方法:

用于帮助我们生成与actions对话的方法，即:包含$store.dispatch(xoxx)的函数

methods : {
	//靠mapActions生成:incrementodd、incrementwait（对象形式)
	...mapActions({incrementOdd : 'jia0dd ' ,incrementwait : 'jiawait'})

	//靠mapActions生成: incrementOdd、incrementwait（数组形式)
	...mapActions( [ 'jiaOdd ' , ' jiawait ' ])

5.5.4. mapMutations方法:

用于帮助我们生成与mutations对话的方法，即:包含 $store.commit(xoxox)的函数

methods :{
	//靠mapActions生成: increment、 decrement（对象形式)
	...mapMutations({increment : ' JIA' ,decrement : ' JIAN "}),
	//靠mapMutations生成:JIA、JIAN（对象形式)
	...mapMutations( [ 'JIA' , 'JIAN'])

5.6 模块化+命名空间

1.修改store.js

const countAbout = {
	namespaced:true,//
	开启命名空间
	state:{x:1},
	mutations: { ... },
	actions: { ... },
	getters : {
		bigSum(state){
			return state.sum* 10
	}
}

const personAbout = {
	namespaced:true,//开启命名空间
	state:{ ... },
	mutations: { ... },
	actions: { ... }
}

const store = new Vuex.Store({
modules: {
		countAbout,
		personAbout
	}
})

2.开启命名空间后，组件中读取state数据:

//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:,借助mnapState读取:
...mapState( 'countAbout',['sum ' , 'school ' , ' subject']),

3.开启命名空间后，组件中读取getters数据:

//方式一:自己直接读取
this.$store.getters[' personAbout/firstPersonName ' ]
//方式二:借助mapGetters读取;
...mapGetters( 'countAbout' ,[ 'bigSum ' ])

4.开启命名空间后，组件中调用dispatch

//方式一 自己直接dispatch
this.$store.dispatch( ' personAbout/ addPersonwang ' ,person)
//方式二:借助mapActions:
...mapActions( ' countAbout ' , {incrementOdd : 'jia0dd ' ,incrementWait : 'jiawait '})

5.开启命名空间后，组件中调用commit

//方式一:自己直接commit
this.$store.commit( ' personAbout/ADD_PERSON ' ,person)
//方式二:借助mapMutations:
...mapMutations( ' countAbout ' ,{increment: '3IA ' ,decrement: ']IAN' }),