标签：Vue js vue7 import 组件 router 路由
今日内容概要
- props补充
- 混入mixin
- 插件
- elementui使用
- vuex
- vue router
- locastorage系列
今日内容详细
props补充
父传子通过自定义属性 在子组件通过props接收传入的数据
有三种方式
方式一:使用数组
props:['接收的自定义属性名']
方式二:使用对象
props:{自定义属性名:指定接收属性的类型}
方式三:使用对象 添加一些限制
props:{
name: {
type:String, // 指定接收的类型
required:true, // 是否必须传
default:'' // 默认值
}
}
混入mixin
混入就是可以把多个组件共用的配置提取成一个混入对象
使用步骤
1.定义混入对象 新建一个mixin包 并新建一个index.js(可以是其他名字 用index是为了方便导入)
2.在index.js中写代码（组件中会用到的配置项 如data methods等
export const mymixin = {
data(){
return {name: 'lzj'}
},
methods: {
showName(){
alert(this.name) // 本身并没有this 但是是用到组件上的
}
},
mounted(){
console.log('页面挂载执行了')
}
}
3.局部使用(只在当前组件使用)
import {mymixin} from '@/mixin'
组件配置项中新增一个
minin:[mymixin] // 数组形式 可以使用多个混入
4.全局使用(所有组件都可以使用到) 取main.js中配置
import {myminxin} from "@/mixin";
Vue.mixin(myminxin) // 每使用一个混入都需要添加一个Vue.mixin(混入名)
5.组件中可以直接使用mixin中定义的东西
插件
用于增强Vue
本质就是一个包含了install方法的对象 install的第一个参数是Vue 第二个及以后的参数是插件使用者传递的数据
使用步骤
1.新建一个plugins包 新建index.js
2.在index.js中编写代码
import Vue from 'vue'
import axios from 'axios'
export default {
install(vue) {
console.log('执行了插件', vue)
# 可以做的事
# 1 了解，自定义指令(不了解没关系)
# 2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放
Vue.prototype.$axios = axios # 后续可以直接this.$axios使用
# 给axios加前缀是为了防止数据污染 因为如果组件中有重名的 会覆盖掉定义的 可以不加也可以自定义前缀 不一定要是$
# 3 使用全局混入
# 4 自定义全局组件
Vue.mixin({
data(){
return {phone: 110}
},
methods: {
add(a, b) {
return a + b
}
}
})
}
}
3. 在main.js中配置
import plugin from '@/plugins'
Vue.use(plugin)
elementui使用
在vue上 css样式 网页端用的最多的是elementui 但其实还有很多其他的
elementui 做网页端常用 是基于vue2 饿了吗团队开发的
https://element.eleme.cn/#/zh-CN
elementui-plus 第三方团队基于vue3写的
https://element-plus.gitee.io/zh-CN/
vant 通常用于做app的样式
https://vant-ui.github.io/vant/?#/zh-CN
iview pc端用的
https://www.iviewui.com/
elementui使用
1.安装
cnpm i element-ui -S
npm i element-ui -S
2.在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI) # 后续直接使用elementui提供的全局组件即可
3.组件中使用
去官网中找好看的 直接复制粘贴做修改即可
Vuex
Vuex用于在Vue中实现集中式状态(数据)管理的一个Vue插件 对Vue应用中多个组件的共享状态进行集中式的管理(读、写) 也是一种组件间通信的方式 且适用于任意组件间通信
使用步骤
1.安装
百度
2.在src下新建一个包store 包下建一个index.js
3.在index.js中写
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
# 放数据的
},
getters: {
# 计算属性
},
mutations: {
# 放方法 正常是让actions中的方法来调用的
# 组件也可以直接调用 但是不推荐
},
actions: {
# 放方法 异步方法 正常组件调用它
},
modules: {
# store模块
}
})
4.使用vuex中state的变量
html中 {{$store.state.变量名}}
js中 this.$store.state.变量名
5.修改vuex中state的变量
推荐按照正常步骤
this.$store.dispatch('actions中的方法', 参数)--》actions中的方法接收两个参数(context,value)并用context调用.commit('mutatuions中的方法', value)--》在mutatuions的方法中直接修改state的值
也可以直接跨过这些步骤 但是不推荐
this.$store.state.变量名 = 新值
vue router
也是第三方插件 用来实现spa单页面应用的vue插件 也就是路由控制
单页面应用就是实现在一个index.html页面中有页面跳转的效果
有两种标签
<router-link to="路由"></router-link> 跳转用
<router-view/> 替换页面组件用 一定要有
使用步骤
1.安装
百度如何安装
2.实例化router对象 在main.js中导入并配置
3.配置路由的跳转 在routes的数组中写对象即可
import HomeView from "@/views/HomeView";
import AboutView from "@/views/AboutView";
const routes = [
{
path: '/', // 路由地址
name: 'home', // 别名
component: HomeView // 导入组件的别名 确定绑定哪个页面组件
},
{
path: '/about',
name: 'about',
component: AboutView
}
]
控制跳转路由的两种方式
js控制 并且可以是传对象的方式
this.$router.push('路由路径')
this.$router.push({name: '别名', query:{要携带的参数键值对}, params:{要携带的参数键值对}})
标签控制
<router-link to="路由路径">
<button>点我跳到主页</button>
</router-link>
<router-link to="{name: '别名', query:{要携带的参数键值对}, params:{要携带的参数键值对}}">
<button>点我跳到主页</button>
</router-link>
路由跳转携带参数
1.路径中?携带
/course/?pk=1
后去取的话就从对应路由视图中通过 this.$route.query.pk取到
2.路径中分割
/course/1/
路由配置的时候也需要修改
{
path: '/course/:id', // 跟上冒号以及变量名
name: 'course',
component: CourseView
}
后续取的时候 this.$route.params.id
区分this.$route和this.$router
this.$route是当前路由对象 内部有传入的参数
this.$router是VueRouter实例化得到的对象 用于实现路由的跳转
/*
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
*/
路由守卫
全局守卫
前置路由守卫:在进路由前 执行代码
后置路由守卫:路由跳转走 执行代码
写在router下的index.js中
router.beforeEach((to, from, next) => {
// to是要去的路由对象
console.log(to)
// from是来自哪个的路由对象
console.log(from)
// next是函数 加括号执行就会真正的执行跳转
console.log(next)
// 真正跳转到要去的路径
// 可以在这做一些路由跳转前的逻辑判断
if (to.name === 'login' || to.name === 'home'){
next()
}else {
if (localStorage.getItem('userinfo')){
next()
}else {
alert('当前还未登陆 请先登陆')
router.push('/login')
}
}
})
localStorage系列
是用于在浏览器中存储数据的
如登陆成功 将token存在本地
不登录加入购物车功能 可以看下迪卡侬的 就是存在了localStorage中
以及组件间通信等
localStorage
永久存储 除非清空缓存 手动删除 代码删除
localStorage.setItem(键名, 字符串形式的数据) 增加
localStorage.getItem(键名) 获取指定key的数据
localStorage.clear() 清空全部
localStorage.remove(键名) 删除指定key的数据
sessionStorage
关闭浏览器就会自动清理
sessionStorage.setItem(键名, 字符串形式的数据) 增加
sessionStorage.getItem(键名) 获取指定key的数据
sessionStorage.clear() 清空全部
sessionStorage.removeItem(键名) 删除指定key的数据
cookie
有过期时间 到过期时间自动清理 需要借助于第三方插件 vue-cookies
cookies.set(键名, 字符串形式的数据) 增加
cookies.get(键名) 获取指定key的数据
cookies.delete(键名) 删除指定key的数据
标签：Vue,
js,
vue7,
import,
组件,
router,
路由
From： https://www.cnblogs.com/lzjjjj/p/17142744.html