查用插件

Posted 2021-02-27 le-le666

"""
1、vue-router插件
	路由跳转：
		<router-link to="/path"></router-link> 
		<router-link :to="{name: ‘path‘}"></router-link>
		this.$router.push(‘/path‘)
		this.$router.push({name: ‘path‘})
		this.$router.go(-1)
		this.$router.go(1)
	路由传参：
		配置：path: ‘/path/:pk‘ => 请求：`/path/${pk}` => 取值：this.$route.params.pk
		配置：path: ‘/path‘, name=‘path‘ => 请求：{name:‘path‘, query={pk:值}} => 取值：this.$route.query.pk
	
2、vuex插件
	完成任意组件间的数据交互(当页面刷新重新加载，仓库中的数据会重置)
	store.js配置: state: {num:0}
	取值：this.$store.state.num
	赋值：this.$store.state.num = 10
	
3、vue-cookies插件
	下载 => 配置 => 使用
	下载: cnpm install vue-cookies
	配置main.js:
		import cookies from ‘vue-cookies‘
		Vue.prototype.$cookies = cookies
	使用:
		this.$cookies.set(‘key‘, ‘value‘, 1 * 24 * 3600)  // 1 * 24 * 3600 = ‘1d‘ = 省略
		this.$cookies.get(‘key‘)
		this.$cookies.remove(‘key‘)
	
4、axios插件
	下载 => 配置 => 使用
	下载: cnpm install axios
	配置main.js:
		import axios from ‘axios‘
		Vue.prototype.$axios = axios
	使用:
		this.$axios({
			url: ‘后台接口链接‘,
			method: ‘请求方式‘,
			data: {数据包},
			params: {链接拼接数据},
			header: {请求头}
		}).then(function(response){
			// 请求成功的回调函数
		}).catch(function(error){
			// 请求失败的回调函数
		})
	
5、element-ui插件
	下载 => 配置 => 使用
	下载: cnpm install element-ui
	配置main.js:
		import ElementUI from ‘element-ui‘;
		import ‘element-ui/lib/theme-chalk/index.css‘;
		Vue.use(ElementUI);
	使用:
		在组件的template标签中，直接使用element-ui提供的众多 组件标签，在script标签中，直接用this访问element-ui提供的众多功能
		<el-row></el-row>
		this.$message({
			message: ‘普通弹出框‘
		})
"""

流式布局思想

"""
页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想

1) 将标签宽高设置成 百分比，就可以随屏幕(父集)缩放而缩放
2) 将标签宽高设置成 视图百分比，就可以随屏幕缩放而缩放
3) 将子集字体设置成 继承值，就可以通过父集统一控制子集
"""