Vue - 08 Vue 高级
Vue - 08
别人发送的项目需要安装依赖,如何使用
①删除node_modules文件夹,后复制项目,然后安装依赖
②安装依赖
在项目路径下安装依赖
npm install
组件间通信的方式(5种):
① 父子间 - 父传子:使用【自定义属性】
② 父子间 - 子传父:使用【自定义事件】
③ ref属性
④ localStorage、sessionStorage、cookies
⑤ Vuex - 状态管理器
1 props配置项
通过让组件接收外部传过来的数据,可以通过自定义属性,在子组件中接收传入的数据
1.1 props的三种使用方式
①数组
props:[name]
②对象:单个校验-限定类型
props: { name:Number }
③对象:多个校验-默认值和必填
- 有默认值后没有传值的情况下使用默认值
props: { film: { type: String, required: false, default: '流浪地球' // }
2 混入mixin
【抽取代码】,可以将多个组件共用的配置提取成一个混入对象【合并同类项】
2.1 使用方式
① 定义混入对象
-
新建mixin包,在index.js中新建混入对象
-
可以定义 变量、方法、生命周期钩子函数等等
-
其中可以使用this,this代指的是Vue实例
// 在mixin包下的index.js文件中新建混入类 export const mixComponent = { data() { return { name:'流浪地球' } }, methods: { showName(){ alert(this.film) }, }, mounted() { console.log('混入对象挂载了!!') } }
② 在局部组件中导入混入对象【局部使用】
使用配置项mixins
导入混入对象,这样可以在局部组件中使用
mixins: [mixComponent]
③ 在main.js中导入混入对象【全局使用】
这样可以在全局组件中使用
// 导入混入类 import {mixComponent} from "@/mixin"; // 全局配置混入对象 Vue.mixin(mixComponent)
3 插件
功能:用于增强Vue,
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
3.1 步骤
① 定义插件:插件的使用方式
新建plugins包,在index.js中新建插件对象,
包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
(1)自定义指令(了解)
通过Vue.directive
来自定义指令
import Vue from "vue"; export default { install(a) { console.log('执行了插件', a) // 定义指令 //定义全局指令:跟v-bind一样,获取焦点 Vue.directive("fbind", { //指令与元素成功绑定时(一上来) bind(element, binding) { element.value = binding.value; }, //指令所在元素被插入页面时 inserted(element, binding) { element.focus(); }, //指令所在的模板被重新解析时 update(element, binding) { element.value = binding.value; }, });
(2)定义全局变量
定义全局变量,借助于Vue.prototype
在原型上放变量、方法,以后在任何组件中都可以使用
- 需要在变量前加$符号,防止数据污染
Vue.prototype.$name = 'duoduo' // 原型上放方法,所有vc和vm都可以用hello Vue.prototype.$hello = () => { alert("你好啊"); };
(3)使用全局混入
//定义混入,所有vc和vm上都有name和lqz Vue.mixin({ data() { return { name: '彭于晏', age: 19, }; }, });
(4)自定义全局组件
elemenui就是将组件做成了插件
② 在main.js中配置
导入插件组件,并通过use方法使用
// 导入组件 import plugins from '@/plugins' // vue实例use方法在全局中配置插件 Vue.use(plugins)
③ 使用自定义插件
- 自定义的变量前要加
$
防止数据污染 - 自定义指令也是通过
v-自定义指令名
来使用
4.elementui(重点)
由饿了么团队开发的,在Vue中使用elementui来增强css样式的样式库
了解:
- elementui:做网页样式,基于vue2开发(vue3用elementui plus)
- vant:做app的样式【也可以用iview】
4.1 elementui的使用
① 下载elementui
npm i element-ui -S
② 在main.js中配置完整引入
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
③ 使用:去官网中找然后【复制】
注意:
- 复制的时候不要忘记复制 【js代码】和style中的【css的代码】
5.存储器Local Storage、session Storage、cookie
①Local Storage【计算机的本地存储器/局部存储器】
特点:过期时间-永久存储,除非清空缓存,手动删除,代码删除
作用:使浏览者可以在明确脱机、低带宽或连接时断时续的情况下高效地工作,同时可提高系统的响应速度,减少用户的等待时间。
②session Storage【对话期存储】
特点:过期时间-当前会话有效,关闭浏览器,自动清理
③cookie【信息记录程序】
特点:过期时间-有过期时间,可以设置
作用:Cookie通常是由浏览器存储的文本文件,当用户重新访问同一网站时,浏览器将发送该cookie以帮助网站"记住"用户的过去行为。
都是浏览器存储数据的,存储数据的用处,比如迪卡侬官网不登录加购物车的功能,
5.1 Local Storage 局部存储器
-
登录成功存储token
-
用不同的浏览器会留下不同的数据
-
组件间通信
①写入数据
需要传入的值:value,必须是一个字符串,如果是对象或者数组,需要转换成json格式
// 设置local storage setLocalStorage() { // 需要传入的值:value,必须是一个字符串,如果是对象或者数组,需要转换成json格式 localStorage.setItem('UserInfo',JSON.stringify(this.UserInfo)) },
②获取
取出local storage的时候为JSON格式字符串,需要转换成前端的对象更好显示
// 打印local storage getLocalStorage(){ // 取出local storage的时候为JSON格式字符串,需要转换成前端的对象更好显示 let ls = localStorage.getItem('UserInfo') console.log(typeof ls) console.log(ls) let res = JSON.parse(ls) console.log(typeof res) console.log(res) },
③删除
- 方法1:
clear
清空全部 - 方法2:
removeItem
指定清除1个
delLocalStorage(){ // 方法1:clear 清空全部 // localStorage.clear() // 方法2:remove 指定清除1个 localStorage.removeItem('UserInfo') }
5.2 sessionStorage 对话期存储
①写入数据
// 设置SessionStorage insertSessionStorage() { // 需要传入的值:value,必须是一个字符串,如果是对象或者数组,需要转换成json格式 sessionStorage.setItem('UserInfo',JSON.stringify(this.UserInfo)) }

②获取
// 打印SessionStorage getSessionStorage(){ // 取出local storage的时候为JSON格式字符串,需要转换成前端的对象更好显示 let ls = sessionStorage.getItem('UserInfo') console.log(typeof ls) console.log(ls) let res = JSON.parse(ls) console.log(typeof res) console.log(res) },

③删除
- 方法1:
clear
清空全部 - 方法2:
removeItem
指定清除1个
delSessionStorage(){ // 方法1:clear 清空全部 sessionStorage.clear() // 方法2:remove 指定清除1个 // sessionStorage.removeItem('UserInfo') },
5.3 cookies
通过vue来操作cookies需要借助第三方工具vue-cookies
-
下载
npm i vue-cookies -S -
导入
import cookies from 'vue-cookies'
①写入数据
写入cookies的时候是加密形式保存在前端浏览器中
// 设置Cookies insertCookies() { // 需要传入的值:value,必须是一个字符串,如果是对象或者数组,需要转换成json格式 cookies.set('UserInfo',JSON.stringify(this.UserInfo)) },
②获取
通过vue-cookies来操作cookies,取出的时候就是对象,不用再转换了,并且已经解密了
getCookies(){ // 取出cookies的时候直接就是对象形式 let ls = cookies.get('UserInfo') console.log(typeof ls) console.log(ls) },

③删除
- remove()方法删除cookies
delCookies(){ cookies.remove('UserInfo') },
6.router
Vue Router是一个官方的路由管理器。它可以将Vue.js应用程序与URL相关联,使得用户在应用中导航时能够在浏览器中显示与当前视图对应的URL。Vue Router可以实现多页面应用(MPA)或单页面应用(SPA)的路由功能,使得应用的视图可以随着URL的改变而改变。
- 作用:
①路由控制:使得应用的视图可以随着URL的改变而改变
②路由跳转:<router-link>
跳转用
③页面替换:<router-view/>
6.1 使用方法
①安装
- 创建项目时,选择安装
Router
,创建项目后直接用 - 如果之前没装直接下载,然后在项目中创建router包,写个index.js,代码copy过来,main.js配置router对象
②根据路由配置视图组件
编写视图组件HomeView
③给页面配置路由的跳转
在router
目录下的index.js
文件中,配置跳转页面组件,只需要再routes
数组中写对象即可
// 导入Vue对象 import Vue from 'vue' // 导入router对象 import VueRouter from 'vue-router' // 导入单页面组件,配置路由 import HomeView from '../views/HomeView.vue' // 使用router Vue.use(VueRouter) const routes = [ { path: '/home', name: 'home', component: Home } ]
6.2 跳转功能
①js控制:$router.push
方法
runHome(){ this.$router.push('/home') }
②标签控制:<router-link :to="/xx"></router-link>
通过 to属性
来控制跳转的地址
<router-link :to="/home"> <button>点我跳转到home页面</button> </router-link>
6.3 路由跳转携带数据
① 方式1:带在路径中使用?携带
/course/?pk=1
获取数据:
this.$route.query.pk
② 方式2:路径中分割的
携带参数在路径中分割的时候,需要在router
文件夹下的index.js
中注册路由的时候,通过:
来绑定属性,这样在this.$route.params
才能点出来
/course/1 // router/index.js中注册的时候需要通过:绑定属性 { path: '/login/:id', name: 'login', component: Login },
获取数据:
this.$route.params.id
6.4 区分 this.$route与this.$router
区分
this.$route 是当前路由对象,内部有传入的参数
this.$router 是Vue的实例中的VueRouter的对象,实例可以实现路由的跳转

6.5 编程式路由导航
①方式1:通过$router.push方法实现
runLogin() { // this.$router.push('/login/3') this.$router.push({ // 路由注册的时候的name name: 'login', params: { id: 88 }, query:{ pk:99, name:'duoduo' }, }) }
②方式2:传对象形式,标签形式跳转
<router-link :to="{name: 'login', query: {name: 'duoduo'}, params: {id: 55}}"> <button>点我跳转到home页面</button> </router-link>
也可以通过 this.$route.back 跳回上一页
6.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') } } })
7 Vuex
在Vue中实现【集中式状态(数据)管理】的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
使用步骤
①安装
新建store/index.js
②在index.js 中写创建Store对象
export default new Vuex.Store({ state: { # 放数据 }, mutations: { # 放方法,正常是让actions中来调用 # 组件也可以直接调用 }, actions: { # 放方法,正常组件调用 # ①逻辑判断 # ②与后端交互 # ③调用mutations中方法 } })
③从组件到actions-->mutations来操作state中的数据
1.通过this.$store.dispatch来触发actions中的方法调用 this.$store.dispatch('actions中的方法',参数) 2.通过context.commit mutations调用中的方法 context.commit('mutations中的方法',参数) 3.在mutations中直接修改state的值
案例:
(1)组件中
html标签中
<p>购物车商品数量{{$store.state.good_num}}</p> <button @click="addNum">点击增加商品数量+1</button>
methods方法中,使用this.$store.dispatch方法触发store下的index.js中的actions
methods: { ... addNum(){ this.$store.dispatch('actionsAddNum',1) } },
(2)store下的index.js中
actions中调用 context.commit 方法触发mutations
【但是,此时actions中可以给后端发送ajax请求】
actions: { // 放方法,正常组件调用 actionsAddNum(context, value) { context.commit('mutationsAddNum', value) } },
mutations中操作state中的数据
state: { // 放数据 good_num: 10 }, mutations: { // 放方法,正常是让actions中来调用 // 组件也可以直接调用 mutationsAddNum(state, value) { state.good_num += value } },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY