今日内容
props其他
# 安装依赖
cnpm install
# 做成纯净的vue项目
-在router 的index.js 中删除about的路由
-删除所有小组件和about页面组件
-App.vue上只保留
<template>
<div id="app">
<router-view/>
</div>
</template>
# 自定义属性,在子组件中接收传入的数据
# 方式一: 使用数组
props:['name']
# 方式二: 使用对象
props:{name:Number}
# 方式三: 使用对象 默认值和必填(注意要键name对应上一个对象)
props:{
name:{
type: String, //类型
required: true, //必要性
default:'默认值' //默认值
}
}
混入mixin
# 可以把多个组件共用的配置提取成一个混入对象
# 使用步骤
1 定义混对象 新建mixin包 下新建index.js
2 在 index.js 中写 代码(组件中会用到 data methods 等配置项)
export const cyf={
methods:{
showName(){
alert(this.name);
}
},
}
3 局部使用(仅在当前组件中使用)
import {cyf} from '@/mixin'
# 添加一个配置项
mixins:[cyf]
4 全局使用 在main.js 中
import {cyf} from '@/mixin'
Vue.mixin(cyf)
5 使用mixin
在methods中绑定一个函数 函数直接通过cyf.methods来点到下面的方法 这样在触发该函数的时候就会触发该函数的执行
插件
"""
功能: 用于增强Vue
本质: 包含install方法的一个对象 install的第一个参数是Vue 第二个以后的参数是插件使用者传递的数据
"""
# 使用步骤
1 新建包plugins,新建index.js
import Vue from "vue";
import axios from "axios";
export default {
install(vue) {
console.log('执行了插件', vue)
}
}
"""
可以做的事
1 了解,自定义指令(不了解没关系)
2 定义全局变量,以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax 就是axios对象
3 使用全局混入
4 自定义全局组件
"""
2 在main.js 中配置
# 使用自定义插件
import plugin from '@/plugins'
Vue.use(plugin)
elementui使用
# 在vue上,css样式,用的最多的是elementui,但是还有其他的
-elementui 做网页端 样式用的多 vue2的 饿了吗团队开发的
-elementui-plus 第三方团队继续基于vue3写的
-vant 做app的样式
-iview pc端用www.iviewui.com
# elementui的使用
1.安装
cnpm i element-ui -S
2 配置完整引入 在 main.js 中下入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElemntUI) // 以后就能直接使用elementui提供的组件
vuex
# 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
# 使用步骤
1 安装,新建store/index.js
2 在index.js 中写
export default new Vuex.Store({
state: {
# 放数据
},
mutations: {
# 放方法,正常是让actions中来调用
# 组件也可以直接调用
},
actions: {
# 放方法,正常组件调用
}
})
3 在组件中
-显示state的变量
html中:
{{$store.state.变量名}}
js中:
this.$store.state.变量面
改state中的值
-推荐按正常步骤---》this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用 context.commit('mutations',参数)---》在mutations中直接修改state的值
-可以跨过任何一步
this.$store.commit()
this.$store.state.变量名
vue Router
# 第三方插件,用来实现SPA 的vue 插件,
-单页面应用---》实现在一个index.html 中有页面跳转效果的 插件
-路由控制
-<router-link> 跳转用
-<router-view/> 替换页面组件用
#1 基本使用
-1 创建vue项目时加入了,直接用即可
-如果之前没装:先下载,在项目中创建router包,写个index.js,代码copy过来,main.js 写一下
-2 配置路由的跳转(跳转页面组件),只需要在routes数组中写对象即可
const routes = [
{
path: '/',
name: 'index',
component: Index
},
{
path: '/home',
name: 'home',
component: Home
}
]
-3 一定要写个视图组件 Home
#2 点击跳转路由两种方式
-js控制
this.$router.push('路径')
-标签控制
<router-link to="/home">
<button>点我跳转到home页面</button>
</router-link>
#3 路由跳转,携带数据的两种方式
-1 /course/?pk=1 带在路径中使用 ? 携带
-2 /course/1/ 路径中分割的
-1 第一种方式:/course/?pk=1
this.$route.query.pk
-2 第二种方式:/course/1/
- router/index中路径得改
{
path: '/login/:id',
name: 'login',
component: Login
},
-this.$route.params.id
#4 区分this.$route this.$router
-this.$router # new VueRouter对象,实例,可以实现路由的跳转
-this.$route # 是当前路由对象,内部有传入的参数
# 5 两种跳转方式,使用对象方式
-this.$router.push({
name: 'login',
// query: {
// name: 'lqz',
// age: 19
// },
params: {
id: 88
}
}) # 这里可以写个对象
-标签形式跳转,传对象形式
<router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
<button>点我跳转到home页面</button>
</router-link>
# 6 路由守卫--->
全局守卫
-前置路由守卫:在进路由前,执行代码
-后置路由守卫:路由跳转走,执行代码
如何用:router/index.js 加入
// 全局前置路由守卫--->任意路由跳转都会触发它的执行
router.beforeEach((to, from, next) => {
// to 是去哪,哪个路由对象
// from 是来自哪,是哪个路由对象 比如从 /--->/login
// next 是函数,如果加括号执行,就会真正的过去
console.log('前置路由守卫', to, from, next)
// next() // 真正跳转到 要去的路径
if (to.name == 'login') {
console.log('走了')
next()
} else {
var res = localStorage.getItem('userinfo')
if (res) {
next()
} else {
alert('您没有登录')
// 跳转到login--->没有解决---》你们搜一下如何解决
// console.log(this)
// router.push('/login')
}
}
})
localStorage系列
# 都是在浏览器存储数据的--》存数据有什么用?
-登录成功 token存在本地
-不登录加入购物车功能,迪卡侬存在了localStorage中
-组件间通信----》 跨组件
# localStorage
-永久存储,除非清空缓存,手动删除,代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear() // 清空全部
-localStorage.removeItem('userinfo')
# sessionStorage
-关闭浏览器,自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
# cookie
-有过期时间,到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')