vue2-notes

文章目录

  • 组件间传递消息
    • props(子父组件之间传值)
    • 自定义事件(子父组件通信方式)
    • 全局事件总线(任意两个组件之间的通信)
    • 消息的订阅与发布(任意两个组件之间的传值)
  • mixin混入
  • plugin插件
  • scoped样式
  • WebStorage(浏览器存储)
  • axios
  • slot插槽
    • 默认插槽
    • 具名插槽
    • 作用域插槽
  • Vuex
    • 将vuex中的属性和方法放到组件中去
    • 模块化+命名空间(就是多个组件共享在vuex中定义的属性和方法)
      • 在store创建两个组件的js和index.js
      • 创建两个组件
    • main.js和app.vue
  • 路由Vue Router
    • 简单使用案例
    • 多级路由
    • 路由query传参
    • 命名路由
    • 路由params传参
    • 路由中使用props传递和接收参数
    • 使浏览器没有路由点击的历史记录
    • 编程式路由导航
    • 缓存路由组件
    • 路由组件触发和失活的两个钩子
  • 路由守卫
    • 全局路由守卫
    • 独享路由守卫
    • 组件内路由守卫
  • 路由器的两种工作模式
  • Vue UI组件库

组件间传递消息

props(子父组件之间传值)

三种写法
1.props:[‘name’]
2.props:{name:String}
3.限制类型、限制必要性、指定默认值)

props:{
    name:{
    	type:String, //类型
        required:true, //必要性
        default:'JOJO' //默认值
    }
}

父组件 ==> 子组件 通信
子组件 ==> 父组件 通信(要求父组件先给子组件一个函数)

注意传入对象时 todos是一个对象,如果mm前面不加 " : " 就会传成一个字符串.
注意尽量让传递的变量名和被传递的对象名一致:
传入方法时 showdate是一个方法,如果showdata前面不加 " : " 就会传成一个字符串.
注意尽量让传递的变量名和被传递的对象名一致:

使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的
props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做

例:
src\App.vue

<template>
  <div id="app">
    <School msg="原来是风啊">School>
  div>
template>
<script>
import School from './components/School.vue'
export default {
  name: 'App',
  components: {
    School
  }
}
script>

src\components\School.vue

<template>
    <div>
        <div>{{name}}div>
        <div>{{age}}div>
        <div>{{msg}}div>
    div>
template>
<script>
export default {
    name: 'Vue1School',
    props:["msg"],
    data() {
        return {
            name: "李四",
            age: 11
        };
    },
};
script>

自定义事件(子父组件通信方式)

注意:通过this. r e f s . x x x . refs.xxx. refs.xxx.on(‘atguigu’,回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!
若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法

解绑自定义事件:this.$off('atguigu')

例:
App.vue

<template>
    <div class="app">
        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第一种写法,使用@或v-on) -->
        <Student @sendStudent="getStudentName" ref="school"/>

    </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

    export default {
        name:'App',
        components: { Student,School },

        mounted(){
            // 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第二种写法,使用ref) 
            this.$refs.school.$on('sendSchool',this.getSchoolName)
        },

        methods:{
            getStudentName(name){
                // 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第一种写法,使用@或v-on)
                console.log("已收到学生的姓名:"+name)      
            },
            getSchoolName(name){
                // 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第二种写法,使用ref) 
                console.log("已收到学校的名称:"+name)
            }
        }
    }
</script>

Student.vue

<template>
    <div class="student">
        <h2>学生姓名:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <button @click="sendStudent">点我传递学生姓名</button> 
        <button @click="sendSchool">点我传递学校姓名</button> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
				sex:'男'
            }
        },
        methods:{
            sendStudent(){
                this.$emit("sendStudent","大学生")
            },
            sendSchool(){
                this.$emit("sendSchool", "超级大学")
            }
        }
    }
</script>

全局事件总线(任意两个组件之间的通信)

全局事件总线是一种可以在任意组件间通信的方式,本质上就是一个对象。它必须满足以下条件:

1. 所有的组件对象都必须能看见他 
2. 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件

School.vue组件想接收数据,则在School.vue组件中给$bus绑定自定义事件,事件的回调留在School.vue组件自身

export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
        this.$bus.$on('xxx',this.demo)
    }
}
Student.vue提供数据:this.$bus.$emit('xxx',data)
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件

例:
在main.js中安装全局事件总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	}
}).$mount('#app')

创建接收消息的组件: School.vue

<template>
	<div class="school">
		<h2>学校名称:{{name}}</h2>
		<h2>学校地址:{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		methods:{
			demo(data) {
				console.log('我是School组件,收到了数据:',data)
			}
		},
		mounted() {
			this.$bus.$on('demo',this.demo)
		},
		beforeDestroy() {
			
			this.$bus.$off('demo')
		},
	}
</script>

创建发送消息的组件: Studen.vue

<template>
	<div class="student">
		<h2>学生姓名:{{name}}</h2>
		<h2>学生性别:{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('demo',this.name)
			}
		}
	}
</script>

消息的订阅与发布(任意两个组件之间的传值)

发布: 接收消息
订阅: 发送消息
1.安装pubsub:npm i pubsub-js
2.在所有接收消息组件和发送消息组件中导入: import pubsub from ‘pubsub-js’
3.发送消息组件: pubsub.publish(‘发布函数别名’,data)
4.接收消息组件:

export default {
	//第一参数是
    methods(fucname,data){
        demo(data){...}
    }
    ...
    mounted() {
		this.pid = pubsub.subscribe('发布函数别名(和发送组件中保持一至)',this.demo)
    }
}

5.在接收消息组件中最好在beforeDestroy钩子中,使用pubsub.unsubscribe(pid)取消订阅
例:
接收消息方: src\components\Receive.vue

<script>
import pubsub from "pubsub-js"
export default {
    name: 'vueReceive',
    data() {
        return {
            
        };
    },
    mounted(){
        //定义需要其他组件需要传递参数的函数
        this.pubId = pubsub.subscribe("aaaabbb",this.demo)
    },
    methods: {
        //接收消息函数
        demo(msgName,data) {
			console.log('接收到的消息为',data);
            console.log(msgName,data);
		}
    },
    beforeDestroy() {
		pubsub.unsubscribe(this.pubId) //取消订阅
	}
};
</script>

发送消息方: src\components\Send.vue

<template>
    <div>
        <button @click="sendMsg">Send</button>
    </div>
</template>

<script>
import pubsub from "pubsub-js"

export default {
    name: 'vueSend',

    data() {
        return {
            name: "李四"
        };
    },

    methods: {
        sendMsg(){
            pubsub.publish('aaaabbb',this.name) //发布消息
        }
    },
};
</script>

mixin混入

全局混入:Vue.mixin(xxx)
局部混入:mixins:[‘xxx’]

1.组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”,在发生冲突时以组件优先。
2.同名生命周期钩子将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
1.局部混入:
mixin.js

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好呀~")
    }
}

School.vue

<template>
    <div>
        <div>{{name}}div>
        <div>{{age}}div>
        <div>{{msg}}div>
        <button @click="showName">aaabutton>
        <button @click="func">bbbbutton>
    div>
template>

<script>
import { mixin } from '../mixin';
export default {
    name: 'Vue1School',
    props:["msg"],
    data() {
        return {
            name: "李四",
            age: 11
        };
    },
    methods:{
        func(){
            alert("hello")
        }
    },
    mounted(){
        console.log("world")
    },
    mixins:[mixin]
};
script>

全局混入:Vue.mixin(xxx)

import Vue from 'vue'
import App from './App.vue'
//注意要加大括号
import {mixin} from './mixin'
Vue.mixin(mixin)

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

plugin插件

1.功能:用于增强Vue
2.本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
3.定义插件:

plugin.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }

4.使用插件:Vue.use(plugin)

plugin.js

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,1)
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法(vm和vc就都能用了)
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

使用插件
main.js

import Vue from 'vue'
import App from './App.vue'
import plugin from './plugin'
import {mixin} from './mixin'
Vue.mixin(mixin)

Vue.use(plugin,1,2,3)

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

School.js

<template>
    <div>
        <div>{{name | mySlice}} </div>
        <div>{{age}}</div>
        <div>{{msg}}</div>
        <div>{{x}}</div>
        <div>{{y}}</div>
        <button @click="showName">aaa</button>
        <button @click="func">bbb</button>
    </div>
</template>

<script>

export default {
    name: 'Vue1School',
    props:["msg"],
    data() {
        return {
            name: "李四",
            age: 11
        };
    },
    methods:{
        func(){
        //使用插件中定义的函数
           this.hellow()
        }
    },
    mounted(){
        console.log("world")
    }
};
</script>

scoped样式

使样式局部生效

<style scoped>

WebStorage(浏览器存储)

LocalStorage存储的内容,需要手动清除才会消失
SessionStorage存储的内容会随着浏览器窗口关闭而消失

存储内容大小一般支持5MB左右(不同浏览器可能不一样)
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
相关API:
xxxStorage.setItem(‘key’, ‘value’):该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值
xxxStorage.getItem(‘key’):该方法接受一个键名作为参数,返回键名对应的值
xxxStorage.removeItem(‘key’):该方法接受一个键名作为参数,并把该键名从存储中删除
xxxStorage.clear():该方法会清空存储中的所有数据

xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到,那么getItem()的返回值是null
JSON.parse(null)的结果依然是null

LocalStorage:例:

<template>
    <div>
        <button @click="saveDate()">点我保存数据</button><br/>
        <button @click="readDate()">点我读数据</button><br/>
        <button @click="deleteDate()">点我删除数据</button><br/>
        <button @click="deleteAllDate()">点我清空数据</button><br/>
    </div>
</template>

<script>
export default {
    name: 'Vue1School',
    data() {
        return {
            person:{
                name: "张三",
                age: 18
            }
        };
    },

    methods: {
        saveDate(){
            localStorage.setItem('msg','localStorage')
            localStorage.setItem('person',JSON.stringify(this.person)) 
        },

        readDate(){
            console.log(localStorage.getItem('msg'))
            console.log(localStorage.getItem('person'))
        },

        deleteDate(){
            localStorage.removeItem('msg')
            localStorage.removeItem('person')
        },

        deleteAllDate(){
            localStorage.clear()
        }
    },
};
</script>

SessionStorage: 例:

<template>
    <div>
        <button @click="saveDate()">点我保存数据</button><br/>
        <button @click="readDate()">点我读数据</button><br/>
        <button @click="deleteDate()">点我删除数据</button><br/>
        <button @click="deleteAllDate()">点我清空数据</button><br/>
    </div>
</template>

<script>
export default {
    name: 'Vue1Student',
    data() {
        return {
            person:{
                name: "张三",
                age: 10
            }
        };
    },

    methods: {
        saveDate(){
            sessionStorage.setItem('msg','sessionStorage')
            sessionStorage.setItem('person',JSON.stringify(this.person))
        },
        readDate(){
            console.log(sessionStorage.getItem('msg'))
            const person = sessionStorage.getItem('person')
            console.log(JSON.parse(person))
        },

        deleteDate(){
            sessionStorage.removeItem('msg')
            sessionStorage.removeItem('person')
        },
        deleteAllDate(){
            sessionStorage.clear()
        }
    },
};
</script>

axios

说一下为什么要配置代理服务器:
1.首先浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
2.但是服务器访问服务器是没有跨域的。所以在vue2中配置代理服务器就是将axios发的请求发送到前段vue2脚手架的服务器上,让前端服务器去访问后端服务器,就没有跨域问题了。
3.**具体操作:**在vue.config.js文件中配置devServer后,前段启动的服务器的地址的端口号就是代理服务器的端口号,换个话说就是:前端服务器就是代理服务器,所以直接在axios中不直接请求后端服务器的具体地址和端口号,应直接访问代理服务器(前端服务器)的端口号,然后由代理服务器转发到后端服务器

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1.下载axios库: npm install axios
2.配置代理服务器
方式一:在vue.config.js中添加如下配置

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

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

方式二:在vue.config.js中添加如下配置:详细配置

devServer: {
    proxy: {
      	'/api1': { // 匹配所有以 '/api1'开头的请求路径
        	target: 'http://localhost:5000',// 代理目标的基础路径
        	changeOrigin: true,
        	pathRewrite: {'^/api1': ''}
      	},
      	'/api2': { // 匹配所有以 '/api2'开头的请求路径
        	target: 'http://localhost:5001',// 代理目标的基础路径
        	changeOrigin: true,
        	pathRewrite: {'^/api2': ''}
      	}
    }
}

// changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
// changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080

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

3.使用代理服务器:
例如:
vue.config.js中

  devServer:{
  //代理服务器端口号
    port:7878,
    proxy:"http://localhost:8888"
}

app.vue中

<template>
    <div id="root">
        <button @click="getStudents">获取学生信息</button><br/>
    </div>
</template>

<script>
    import axios from 'axios'    
    export default {
        name:'App',
        methods: {
			getStudents(){
			 //直接想代理服务器端口发送请求
				axios.get('http://localhost:7878/fs').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
        }
    }
</script>

slot插槽

让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式

默认插槽

父组件中:

<Category>
   	<div>html结构1</div>
</Category>

子组件中:

<template>
    <div>
       	<slot>插槽默认内容...</slot>
    </div>
</template>

例:
Apple.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
		<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>=
	</div>
</template>

app.vue

<template>
	<div class="container">
		<Apple>
			<div>{{ games[0] }}</div>
		</Apple>

		<Apple>
			<div>{{ games[1] }}</div>
		</Apple>

		<Apple>
			<div>{{ games[2] }}</div>
		</Apple>
	</div>
</template>

<script>
import Apple from "./components/Apple"
	export default {
		name:'App',
		components:{
			Apple
		},
		data() {
			return {
				games:['植物大战僵尸','空洞骑士','王国']
			}
		},
	}
</script>

具名插槽

父组件中:

<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>

例:
Apple.vue

<template>
    <div>
        <slot name="aaa">我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
        <slot name="bbb">我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
    </div>
</template>

app.vue

<template>
	<div class="container">
		<Apple>
			<div slot="bbb">bbb</div>
			<div slot="aaa">aaa</div>
		</Apple>
	</div>
</template>

作用域插槽

数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

例:
Apple.vue

<template>
    <div>
        <slot :aaa="aaa">我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>  
    </div>
</template>
<script>
export default {
    name: 'Vue1Apple',

    data() {
        return {
            aaa: "李四"
        };
    },
};
</script>

app.vue

<template>
	<div class="container">
		<Apple>
			<template slot-scope="mydata">
				<p>{{ mydata.aaa }}</p>
			</template>
		</Apple>
	</div>
</template>

<script>
import Apple from "./components/Apple"
	export default {
		name:'App',
		components:{Apple}
	}
</script>

Vuex

使用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)
   
//mutations的强化版,mutations不可异步修改states,但是actions可以做到,所以actions用于异步修改数据,$store.dispatch('action中的方法名',数据) ,可以在action中发送接收请求
const actions = {}
//相当于页面中的method,即修改数据的方法,但是只有通过mutations才能修改states中的数据,$store.commit('mutations中的方法名',数据),若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit
const mutations = {}
//我们需要全局使用的数据 $store.state.xxx (xxx是state中的一个数据)
const state = {}
//类似于计算属性但可以全局调用
const getters = {}
   
//创建并暴露store
export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   	getters 
})

3.在src/main.js中配置:

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

4.在组件中使用

例:
1.创建store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0 //当前的和
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.main.js

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

3.Count.vue

<template>
	<div>
			//获取store/index.js中state中的全局属性:sum
		<h1>当前求和为:{{$store.state.sum}}</h1>
			//获取store/index.js中getters中的全局计算属性属性:bigSum
		<h2>结果乘以十后:{{$store.getters.bigSum}}</h2>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
	</div>
</template>

<script>
	export default {
		name:'aCount',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				//调用mutations中的方法
				this.$store.commit('ADD',this.n)
			},
			incrementOdd(){
				//调用action中的方法
				this.$store.dispatch('addOdd',this.n)
			}
		},
	}
</script>

4.app.vue

<template>
	<div class="container">
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count}
	}
</script>

将vuex中的属性和方法放到组件中去

mapState和mapGetters:就是将全局属性和全局计算属性变成自己组件的data
用法:

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

    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),

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

mapActions与mapMutations:就是将全局方法变成自己组件的methods

methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

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

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

例:

<template>
	<div>
		<h1>当前求和为:{{sum}}</h1>
		<h3>当前求和的10倍为:{{bigSum}}</h3>
		<h3>我是{{name}},我在{{school}}学习</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name:'aCount',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			// 借助mapActions生成:increment、decrement(对象形式)
			...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),

			// 借助mapActions生成:incrementOdd、incrementWait(对象形式)
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{		
			// 借助mapState生成计算属性(数组写法)
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性(对象写法)
			...mapState({sum:'sum',school:'school',name:'name'}),

			...mapGetters(['bigSum'])
		}
	}
</script>

模块化+命名空间(就是多个组件共享在vuex中定义的属性和方法)

在store创建两个组件的js和index.js

1.count.js

export default{
    namespaced:true,//开启命名空间!!!!!!!!!!!!!!!!!!!!!
    actions:{
        addOdd(context,value){
            console.log("actions中的addOdd被调用了")
            if(context.state.sum % 2){
                context.commit('ADD',value)
            }
        },
        addWait(context,value){
            console.log("actions中的addWait被调用了")
            setTimeout(()=>{
                context.commit('ADD',value)
            },500)
        }
    },
    mutations:{
        ADD(state,value){
            state.sum += value
        },
        SUBTRACT(state,value){
            state.sum -= value
        }
    },
    state:{
        sum:0, //当前的和
        name:'JOJO',
        school:'尚硅谷',
    },
    getters:{
        bigSum(state){
            return state.sum * 10
        }
    }
}

2.person.js

import axios from "axios"
import { nanoid } from "nanoid"

export default{
    namespaced:true,//开启命名空间!!!!!!!!!!!!!!!!!!!!!
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王!')
            }
        },
        addPersonServer(context){
            axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'JOJO'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}

1.index.js:将countAbout和personAbout暴露

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引入count
import countOptions from './count'
//引入person
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
   
//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions,
    }
})

创建两个组件

1.创建Count.vue

<template>
	<div>
		<h1>当前求和为:{{sum}}</h1>
		<h3>当前求和的10倍为:{{bigSum}}</h3>
		<h3>我是{{name}},我在{{school}}学习</h3>
		<h3 style="color:red">Person组件的总人数是:{{personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name:'aCount',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			...mapMutations('countAbout',{increment:'ADD',decrement:'SUBTRACT'}),
			...mapActions('countAbout',{incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{
			...mapState('countAbout',['sum','school','name']),
			...mapGetters('countAbout',['bigSum']),
			...mapState('personAbout',['personList'])
		}
	}
</script>

Person.vue

<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color:red">Count组件求和为:{{sum}}</h3>
        <h3>列表中第一个人的名字是:{{firstPersonName}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name">
		<button @click="add">添加</button>
        <button @click="addWang">添加一个姓王的人</button>
        <button @click="addPerson">随机添加一个人</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'aPerson',
		data() {
			return {
				name:''
			}
		},
		computed:{
			personList(){
				return this.$store.state.personAbout.personList
			},
			sum(){
				return this.$store.state.countAbout.sum
			},
            firstPersonName(){
                return this.$store.getters['personAbout/firstPersonName']
            }
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.name = ''
			},
            addWang(){
                const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				this.name = ''   
            },
            addPerson(){
                this.$store.dispatch('personAbout/addPersonServer')
            }
		},
	}
</script>

main.js和app.vue

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false
Vue.use(Vuex)


new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

app.vue

<template>
	<div class="container">
		<Count/>
		<hr>
		<Person/>
	</div>
</template>

<script>
	import Count from './components/Count'
	import Person from './components/Person'
	export default {
		name:'App',
		components:{Count,Person}
	}
</script>

路由Vue Router

注意:to=“xxx” 如果只有路径不用家 “ : ” 如果有参数 必须家 " : ", :to=“xxx”

整个应用只有一个完整的页面,点击页面中的导航链接不会刷新页面,只会做页面的局部更新,数据需要通过ajax请求获取
路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹

通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载
每个组件都有自己的 r o u t e 属性,里面存储着自己的路由信息整个应用只有一个 r o u t e r ,可以通过组件的 route属性,里面存储着自己的路由信息 整个应用只有一个router,可以通过组件的 route属性,里面存储着自己的路由信息整个应用只有一个router,可以通过组件的router属性获取到

简单使用案例

1.下载vue-router:npm i vue-router
2.创建src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

2.main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    el:"#app",
    render: h => h(App),
    router
})

3.app.vue

<template>
	<div>
		<div>
			<!-- Vue中借助router-link标签实现路由的切换 -->
			<router-link to="/about">About</router-link>
			<router-link to="/home">Home</router-link>
	    </div>
		<div>
			<!-- 指定组件的呈现位置 -->
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

4.pages/Home.vue

<template>
  <h2>我是Home组件的内容</h2>
</template>

<script>
    export default {
        name:'Home'
    }
</script>

5.pages/About.vue

<template>
  <h2>我是About组件的内容</h2>
</template>

<script>
    export default {
        name:'About'
    }
</script>

多级路由

在简单案例的基础上创建两个.vue: /pages/News.vue和/pages/Message.vue

News.vue
<template>
	<div>news</div>
</template>

<script>
    export default {
        name:'aNews'
    }
</script>

Message.vue
<template>
    <div>message</div>
</template>

<script>
    export default {
        name:'a-message'
    }
</script>

路由query传参

使用步骤:
1.传递参数:

<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:666,
        title:'你好'
	}
}">跳转</router-link>

2.接收参数:

$route.query.id
$route.query.title

例:
1.router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

2.Message.vue

<template>
    <div>

        <div v-for="m in messageList" :key="m.id">
            <!-- 跳转路由并携带query参数,to的字符串写法 -->
            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
                    {{m.title}}
            </router-link>&nbsp;&nbsp; -->

            <!-- 跳转路由并携带query参数,to的对象写法 -->
            <router-link :to="{
                path:'/home/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                 }
            }">
                {{m.title}}
            </router-link>
        </div>

        <hr/>
        
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name:'aNews',
        data(){
            return{
                messageList:[
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'}
                ]
            }
        }
    }
</script>

3.Detail.vue

<template>
    <ul>
        <li>消息编号:{{$route.query.id}}</li>
        <li>消息标题:{{$route.query.title}}</li>
    </ul>
</template>

<script>
    export default {
        name:'aDetail'
    }
</script>

命名路由

简化路由跳转路径
router/index.js

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                    name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

Message.vue

<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		    id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

路由params传参

特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

1.router/index.js
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}


2.传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>


3.接收参数
$route.params.id
$route.params.title

路由中使用props传递和接收参数

使用props传递和接收参数是要在使用params传递参数的基础上,在router/index.js中添加处理内容后,在路由组件中使用props:[‘aaa’,‘bbb’]接收参数

{
	name:'xiangqing',
	path:'detail/:id/:title',
	component:Detail,

	//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

使浏览器没有路由点击的历史记录

作用:控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式:push和replace,其中push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push方式
开启replace模式:

<router-link replace ...>News</router-link>

编程式路由导航

不借助实现路由跳转,让路由跳转更加灵活

//一般在方法中使用点击事件触发
this.$router.push({
	name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})

this.$router.replace({
	name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

让不展示的路由组件保持挂载,不被销毁

//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名,不写表示全部缓存
    <router-view></router-view>
</keep-alive>

//缓存多个路由组件
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

路由组件触发和失活的两个钩子

activated和deactivated是路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体使用:
activated路由组件被激活时触发
deactivated路由组件失活时触发

1.activated和deactivated是配合keep-alive一起使用的
2.没有keep-alive的时候是不会被触发的
3.存在keep-alive的时候可以将activated当作created进行使用
4.deactivated是组件销毁的时候触发,此时的destory是不执行的

例:

About.vue
<template>
	<h2>我是About</h2>
</template>
  
  <script>
	export default {
		name:'aAbout'
	}
  </script>

Home.vue
<template>
    <div>
		<h2>Home组件内容</h2>
    </div>
</template>

<script>
    export default {
        name:'aHome',
		activated(){
            console.log('Home组件被激活了')
        },
        deactivated(){
            console.log('Home组件失活了')
        }
    }
</script>

router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

app.vue

<template>
	<div>
		<div>
			<!-- Vue中借助router-link标签实现路由的切换 -->
			<router-link  to="/about">About</router-link>
			<router-link  to="/home">Home</router-link>
		</div>

		<div>
			<keep-alive>//注意在这里使用keep-alive!!!!!!!!!!!!!!!!
				<!-- 指定组件的呈现位置 -->
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	export default {
		name:'App',
		component:{
			
		}
	}
</script>

路由守卫

全局路由守卫

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'


//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{
                title:'关于',
                requireAuth: true
            }
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{
                title:'主页',
                requireAuth: true
            },
        }
    ]
})

//全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {
    console.log("前")
    if(to.meta.requireAuth){
        if(localStorage.getItem("aaa") === "bbb"){
            next();
        }else{
            console.log("不允许通过");
        }
    }else{
        console.log("不需要验证直接放行")
    }
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log("后",to,from)
	document.title = to.meta.title || '硅谷系统'
})

//导出路由器
export default router

独享路由守卫

就是针对某一个组件进行拦截,拦截方法写在router的内部

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import Message from '../pages/Message'
//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyv',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'message',
                    component:Message,
                    meta:{title:'新闻'},
                    //独享守卫,特定路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('独享路由守卫',to,from)
                        if(localStorage.getItem('aaa') === 'bbb'){
                            next()
                        }else{
                            alert('暂无权限查看')
                        }
                    }
                }
            ]
        }
    ]
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

//导出路由器
export default router

组件内路由守卫

<template>
    <h2>我是About组件的内容</h2>
</template>

<script>
    export default {
        name:'aAbout',
        //通过路由规则,离开该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(localStorage.getItem('aaa')==='bbb'){
                next()
            }else{
                alert('无权限查看!')
            }
        },
        //通过路由规则,离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }
    }
</script>

路由器的两种工作模式

对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值
hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器
hash模式:
地址中永远带着#号,不美观
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
兼容性较好
history模式:
地址干净,美观
兼容性和hash模式相比略差

Vue UI组件库

1.element-ui
使用步骤:

你可能感兴趣的:(前端,前端,前端框架,vue.js)