Vue2.0 高级进阶知识之学习笔记

已于 2023-02-28 23:55:58 修改
阅读量140 收藏
点赞数
分类专栏： Vue 文章标签： 学习 vue.js javascript
于 2023-02-24 00:03:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wg8ofk08/article/details/129192598
版权

系列文章目录

提示：阅读本章之前，请先阅读目录

文章目录

前言

Vuex

在这里插入图片描述

npm i vuex@3，这个适合vue2.0
npm i vuex@4，这个适合vue3.0

搭建Vue环境

在这里插入图片描述

在这里插入图片描述

store里面index.js，使用Vue.use(Vuex)，是因为，import的导入，vue会先解析，所以，得先写早store里面，否则，vue会报错，说必须得先use

Vuex 使用案例

在这里插入图片描述

在这里插入图片描述

Vuex的getters

在这里插入图片描述
在这里插入图片描述

Vuex的mapState

在这里插入图片描述

Vuex的mapGetters

在这里插入图片描述

Vuex的mapActions 和 mapMutations

在这里插入图片描述

Vuex的namespaced

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue-router

npm i vue-router@3

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

嵌套路由

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

路由传参

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

路由name

在这里插入图片描述

在这里插入图片描述

路由params

重要：跳转的时候，必须使用name

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

路由的props

在这里插入图片描述

在这里插入图片描述

router-link 的replace

在这里插入图片描述

router

在这里插入图片描述

router缓存路由

在这里插入图片描述
在这里插入图片描述

activated 和 deactivated

在这里插入图片描述

前置路由守卫

在这里插入图片描述
在这里插入图片描述

后置路由守卫

在这里插入图片描述

在这里插入图片描述

独享路由守卫

在这里插入图片描述
在这里插入图片描述

组件内路由守卫

在这里插入图片描述

在这里插入图片描述

hash和history

在这里插入图片描述

smobee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js学习笔记--进阶之路
JackieDYH的博客
06-01 1125
框架，framework，是能够让程序开发人员更好的专注于业务逻辑的开发，而无需关心底层功能的实现。vue是一个渐进式 JavaScript 框架，Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。国人自己的开发的框架，作者是：尤雨溪vue有两大核心数据驱动页面组件化methods，用来存放用户自定义函数vue支持我们自定义一些指令来完成一定的操作。
Node.js学习笔记--进阶之路
JackieDYH的博客
05-10 1807
简介 Node 是一个软件, 可以脱离浏览器, 独立执行JS文件 Node实现了ECMAScript标准, 所以语言跟JavaScript基本一致 因为想成为全栈开发(前后端都可以的大拿) PHP等语言是阻塞的, 性能不如nodeJS node是事件驱动, 非阻塞的 Node中是大量的, 事件和回调函数 单线程（主线程单线程，后台I/O线程池） 跨平台 (Node软件可以安装在window系统/linux系统/mac系统/等等) 安装Node ...
Vue 2.0入门基础知识之内部指令详解
08-29
主要介绍了Vue 2.0入门基础知识之内部指令知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
手把手教你使用Vue2.0实现动态路由展示
你若为我繁华，我愿成你烟花
11-02 936
这里我使用了setLeftMenu来进行缓存原始菜单数据，用于左侧渲染菜单。关键代码是使用router.addRoutes来动态添加路由信息。这里需要注意下有版本关系，如果不对应会有不同的问题。当用户登录成功后，请求菜单数据。在/router/index.js文件中。实现上方效果，则表示动态路由添加成功。当页面进入后，默认进入登录页面。当点击左侧菜单后，进行跳转路由。使用Vue2实现动态路由展示。
Vue 2.0 进阶知识之学习笔记
xmfboss.科技
02-17 189
Vue2.0 进阶学习笔记
Vue2进阶篇学习笔记
热爱编程、热爱生活、热爱探索
09-07 1005
在这篇文章中，我将为你介绍Vue.js的一些进阶知识，帮助你快速入门并掌握Vue开发的一些进阶技巧。Vue.js是一个流行的JavaScript框架，被广泛用于构建现代化、交互式的Web应用程序。它采用了MVVM（Model-View-ViewModel）架构模式，通过数据驱动视图的方式实现了高效的前端开发。在这片文章中我们将学习**Vue脚手架**的使用、**组件的封装与使用**、**事件与动画**、**插槽**、**Vuex**和**VueRouter**、最后还有一些常用Vue组件库的推荐，如果你是一
SegmentFault 技术周刊 Vol.14 - 进阶 Vue 2.0
Lucky_LXG的博客
04-06 1013
SegmentFault 技术周刊 Vol.14 - 进阶 Vue 2.0   作者 SegmentFault 关注 2016.11.29 21:24* 字数 2050 阅读 692评论 1喜欢 35 优质阅读感受及更多讨论，请查看原文： https://segmentfault.com/a/1190000007638646 week
Vue.js 框架进阶笔记
qq_43645678的博客
10-24 632
Vue.js 框架进阶笔记
Vue 进阶二 | 系统性学习 | 无知的我费曼笔记
无知的人博客
12-11 383
无知的我正在复盘Vue 该笔记特点是 - 重新整理了涉及资料的一些语言描述、排版而使用了自己的描述 - 对一些地方做了补充说明。比如解释专有名词、类比说明、对比说明、注意事项 - 提升了总结归纳性。尽可能在每个知识点上都使用一句话 || 关键词概括 - 更注重在实际上怎么应用 - 提出并回答了一些问题
Vue学习笔记进阶篇之单元素过度
12-09
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript ...
Vue学习笔记进阶篇之函数化组件解析
12-09
这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个...
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
12-29
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。 <h1>{{ message }} <button @click=...
vue学习笔记之vue1.0和vue2.0的区别介绍
12-29
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板，不在支持片段代码 VUE1.0是:　 我是组件</h3><strong>我是加粗标签 VUE2.0:必须有根元素,包裹住所有的代码 我是组件 我是加粗标签 ...
vue学习笔记
小李的博客
10-11 396
思维导图 Vue：千锋Vue | ProcessOn免费在线作图,在线流程图,在线思维导图 Vue基础 Vue 用于构建用户界面的 MVVM的 渐进式框架 Vue特点 MVVM M 数据 V 视图 VM 数据改变 视图自动刷新 （通过VM来刷新 new Vue 返回实例） 渐进式 核心库：体积很小（没有把所有的功能都挂载到 核心库上面） 插件：通过插件的形式，将插件所携带的功能挂载到 Vue上 声明式 声明
Lumos学习王佩丰Excel第四讲：排序与选择
Sunshine_XX的博客
07-10 403
自定义排序演示：工资条拆分的演示：如果遇到很长的表，标题只存在于顶端，打印出来观感不好，可以这样做：有些版本的excel复制筛选数据容易把背后隐藏的所有数据都复制上去，这时可选中定位条件的“可见单元格”选项，复制粘贴即可。并排表示且，错排表示或。ctrl+shift+↓+→全选，演示说明：回头学原理，先记住一句话，要想筛选对，条件表头不要对。
ROS基础学习-ROS运行管理
周陽讀書
07-11 763
ROS运行管理。
NumPy库学习之np.random.rand函数
qq_46396470的博客
07-15 150
是 NumPy 库中的一个函数，用于生成随机数。这些随机数是从均匀分布 [0, 1) 中抽取的，即每个数都在0到1之间，但不包括1。
探索Perl语言：入门学习与实战指南
最新发布
洛秋的博客
07-15 622
Perl（Practical Extraction and Report Language）由Larry Wall于1987年创建，旨在帮助系统管理员简化日常任务。高效灵活：Perl的语法灵活多样，支持多种编程风格（过程式、面向对象等）。强大的文本处理能力：内置强大的正则表达式支持，是处理文本数据的利器。丰富的模块库：通过CPAN（Comprehensive Perl Archive Network）可以方便地获取和使用各类模块。Perl广泛应用于系统管理、Web开发、网络编程、数据库操作等领域。
尚硅谷vue2.0 vue3.0笔记
10-19
尚硅谷是一家IT培训机构，他们提供了Vue2.0和Vue3.0的笔记。其中Vue2.0的笔记包括Vue2.0的响应式、组件化开发、路由、Vuex、axios等内容；而Vue3.0的笔记则包括Vue3.0的响应式、Composition API、新的生命周期钩子、自定义hook函数等内容。此外，他们还提供了使用vue-cli和vite创建Vue项目的教程。如果你想深入学习Vue框架，可以考虑参考尚硅谷的Vue2.0和Vue3.0笔记。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值