
vue
文章平均质量分 92
Vue是一个独立的社区驱动的项目,它是由尤雨溪在2014年作为其个人项目创建, 是一个成熟的、经历了无数实战考验的框架,它是目前生产环境中使用最广泛的JavaScript框架之一,可以轻松处理大多数web应用的场景,并且几乎不需要手动优化,并且Vue完全有能力处理大规模的应用。
赵广陆
优快云认证博客专家、优快云的Java领域优质创作者、全网30w+粉丝、超300w访问量、专注于大学生项目实战开发、讲解和答疑辅导、以及产品测评宣传、工具推广等合作。同时招收学生代理、校园代理,对于专业性数据证明一切!
展开
-
Vue2向Vue3过度Vuex核心概念module模块
目录1 核心概念 - module1.目标2.问题3.模块定义 - 准备 state2 获取模块内的state数据1.目标:2.使用模块中的数据3.代码示例3 获取模块内的getters数据1.目标:2.语法:3.代码演示4 获取模块内的mutations方法1.目标:2.注意:3.调用方式:4.代码实现5 获取模块内的actions方法1.目标:2.注意:3.调用语法:4.代码实现6 Vuex模块化的使用小结1.直接使用2.借助辅助方法使用原创 2023-08-26 12:20:36 · 1057 阅读 · 0 评论 -
Vue2向Vue3过度Vuex核心概念actions
目录1 核心概念 - actions1.定义actions2.组件中通过dispatch调用2 辅助函数 -mapActions1 核心概念 - actionsstate是存放数据的,mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化),actions则负责进行异步操作原创 2023-08-26 12:11:50 · 241 阅读 · 0 评论 -
Vue2向Vue3过度Vuex核心概念mutations
目录1 核心概念-mutations1.定义mutations2.格式说明3.组件中提交 mutations4.练习5.总结2 带参数的 mutations1.目标:2.语法2.1 提供mutation函数(带参数)2.2 提交mutation3 练习-mutations的减法功能1.步骤2.代码实现4 练习-Vuex中的值和组件中的input双向绑定1.目标2.实现步骤3.代码实现5 辅助函数- mapMutations原创 2023-08-26 12:07:54 · 831 阅读 · 0 评论 -
Vue2向Vue3过度Vuex核心概念state状态
目录1 核心概念 - state 状态1.目标2.提供数据3.访问Vuex中的数据4.通过$store访问的语法5.代码实现5.1模板中使用5.2组件逻辑中使用5.3 js文件中使用2 通过辅助函数 - mapState获取 state中的数据1.第一步:导入mapState (mapState是vuex中的一个函数)2.第二步:采用数组形式引入state属性3.第三步:利用**展开运算符**将导出的状态映射给计算属性3 开启严格模式及Vuex的单项数据流1.目标2.直接在组原创 2023-08-26 12:04:32 · 269 阅读 · 0 评论 -
Vue2向Vue3过度核心技术综合案例
目录1 面经基础版-案例效果分析1.面经效果演示2.功能分析3.实现思路分析:配置路由+功能实现2 面经基础版-一级路由配置3 面经基础版-二级路由配置1.使用场景2.语法3.代码实现4 面经基础版-二级导航高亮1.实现思路2.代码实现5 面经基础版-首页请求渲染1.步骤分析2.代码实现6 面经基础版-查询参数传参1.说明2.查询参数传参实现7 面经基础版-动态路由传参1.实现步骤2.代码实现3.额外优化功能点-点击回退跳转到上一页8 面经基础版-详情页渲染原创 2023-08-26 10:44:31 · 275 阅读 · 0 评论 -
Vue2向Vue3过度核心技术编程式导航
目录1 编程式导航-两种路由跳转方式1.问题2.方案3.语法4.path路径跳转语法5.代码演示 path跳转方式6.name命名路由跳转7.代码演示通过name命名路由跳转8.总结2 编程式导航-path路径跳转传参1.问题2.两种传参方式3.传参4.path路径跳转传参(query传参)5.path路径跳转传参(动态路由传参)3 编程式导航-name命名路由传参1.name 命名路由跳转传参 (query传参)2.name 命名路由跳转传参 (动态路由传参)3.总结原创 2023-08-26 10:18:17 · 292 阅读 · 0 评论 -
Vue2向Vue3过度核心技术声明式导航
目录1 声明式导航-导航链接1.需求2.解决方案3.通过router-link自带的两个样式进行高亮4.总结2 声明式导航-两个类名1.router-link-active2.router-link-exact-active3.在地址栏中输入二级路由查看类名的添加4.总结3 声明式导航-自定义类名1.问题2.解决方案3.代码演示4.总结4 声明式导航-查询参数传参1.目标2.跳转传参3.查询参数传参4.代码演示5 声明式导航-动态路由传参1.动态路由传参方式原创 2023-08-26 10:14:10 · 202 阅读 · 0 评论 -
Vue2向Vue3过度核心技术路由
目录1 路由介绍1.思考2.路由的介绍3.总结2 路由的基本使用1.目标2.作用3.说明4.官网5.VueRouter的使用(5+2)6.代码示例7.两个核心步骤8.总结3 组件的存放目录问题1.组件分类2.存放目录3.总结4 路由的封装抽离5 Vue路由-重定向1.问题2.解决方案3.语法4.代码演示6 Vue路由-4041.作用2.位置3.语法4.代码示例7 Vue路由-模式设置1.问题2.语法原创 2023-08-26 10:05:19 · 555 阅读 · 0 评论 -
Vue2向Vue3过度核心技术插槽
目录1 插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结2 插槽-后备内容(默认值)1.问题2.插槽的后备内容3.语法4.效果5.代码示例3 插槽-具名插槽1.需求2.具名插槽语法3.v-slot的简写4.总结4 作用域插槽1.插槽分类2.作用3.场景4.使用步骤5.代码示例6.总结5 综合案例 - 商品列表-MyTag组件抽离1.需求说明2.代码准备3.my-tag组件封装-创建组件原创 2023-08-26 10:00:33 · 743 阅读 · 0 评论 -
Vue2向Vue3过度核心技术自定义指令
目录1 自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项介绍5.代码示例6.总结2 自定义指令-指令的值1.需求2.语法3.代码示例3 自定义指令-v-loading指令的封装1.场景2.需求3.分析4.实现5.准备代码原创 2023-08-26 09:53:56 · 549 阅读 · 0 评论 -
Vue2向Vue3过度核心技术进阶语法
目录1 v-model简化代码1.目标:2.如何简化:3.代码示例2 sync修饰符1.作用2.场景3.本质4.语法5.代码示例6.总结3 ref和$refs1.作用2.特点:3.语法4.注意5.代码示例4 异步更新 & $nextTick1.需求2.代码实现3.问题4.解决方案原创 2023-08-25 23:57:01 · 379 阅读 · 0 评论 -
Vue2向Vue3过度核心技术组件通信
目录1 组件基础知识scoped解决样式冲突1.1 默认情况:1.2 代码演示1.3 scoped原理1.4 总结2 组件基础知识data必须是一个函数2.1 data为什么要写成函数2.2 代码演示2.3 总结3 组件通信3.1 什么是组件通信?3.2 组件之间如何通信3.3 组件关系分类3.4 通信解决方案3.5 父子通信流程3.6 父向子通信代码示例3.7 子向父通信代码示例3.8 总结4 什么是props4.1.Props 定义4.2.Props 作用原创 2023-08-25 23:50:09 · 334 阅读 · 0 评论 -
Vue2向Vue3过度核心技术工程化开发和脚手架
目录1 工程化开发和脚手架1.1 开发Vue的两种方式1.2.脚手架Vue CLI2 项目目录介绍和运行流程2.1 项目目录介绍2.2 运行流程3 组件化开发4 根组件 App.vue4.1 根组件介绍4.2 组件是由三部分构成4.3 总结5 普通组件的注册使用-局部注册5.1 特点:5.2 步骤:5.3 使用方式:5.4 注意:5.5 语法:5.6 练习5.7 总结6 普通组件的注册使用-全局注册6.1 特点:6.2 步骤6.3 使用方式6.4 注意原创 2023-08-25 23:05:24 · 1253 阅读 · 0 评论 -
Vue2向Vue3过度核心技术生命周期
目录1 Vue生命周期2 Vue生命周期钩子3 生命周期钩子小案例1.1 在created中发送数据1.2 在mounted中获取焦点4 案例-小黑记账清单4.1 需求图示:4.2 需求分析3.思路分析4.代码准备原创 2023-08-25 22:58:27 · 295 阅读 · 0 评论 -
Vue2向Vue3过度核心技术watch侦听器
目录1 watch侦听器1.1 作用:1.2 语法:1.3 侦听器代码准备2 翻译案例-代码实现3 watch侦听器3.1 语法3.2 需求3.3 代码实现3.4 总结原创 2023-08-25 22:44:09 · 255 阅读 · 0 评论 -
Vue2向Vue3过度核心技术computed计算属性
目录1 computed计算属性1.1 概念1.2 语法1.3 注意1.4.案例1.5.代码准备2 computed计算属性 VS methods方法2.1 computed计算属性2.2 methods计算属性2.3 计算属性的优势2.4 总结3 计算属性的完整写法原创 2023-08-25 22:42:11 · 408 阅读 · 0 评论 -
Vue2向Vue3过度核心技术指令补充
目录1 指令修饰符1.1 什么是指令修饰符?1.2 按键修饰符1.3 v-model修饰符1.4 事件修饰符2 v-bind对样式控制的增强-操作class2.1 语法:2.2 对象语法2.3 数组语法2.4 代码练习3 京东秒杀-tab栏切换导航高亮3.1 需求:3.2 准备代码:3.3 思路:4 v-bind对有样式控制的增强-操作style4.1 语法4.2 代码练习4.3 进度条案例5 v-model在其他表单元素的使用5.1 讲解内容:5.2 代码准备原创 2023-08-25 22:39:36 · 221 阅读 · 0 评论 -
Vue2向Vue3过度核心技术快速入门
目录1 为什么要学习Vue2 什么是Vue1.1 什么是构建用户界面1.2 什么是渐进式1.3 什么是框架总结:什么是Vue?3 创建Vue实例4 插值表达式 {{}}4.1 作用:利用表达式进行插值,渲染到页面中4.2 语法4.3 错误用法4.4 总结5 响应式特性5.1 什么是响应式?5.2 如何访问 和 修改 data中的数据(响应式演示)5.3 总结6 Vue开发者工具安装7 Vue中的常用指令8 内容渲染指令9 条件渲染指令10 事件绑定指令原创 2023-08-24 23:31:27 · 441 阅读 · 0 评论 -
Vue高级与前端项目架构
目录1 NPM包管理器1.1 简介1.1.1 什么是NPM1.2 使用npm管理项目1.2.1 项目初始化1.2.2 修改npm镜像1.2.3 npm install命令的使用1.2.4 其它命令(一般不用)2 模块化2.1 模块化简介2.1.1 模块化产生的背景2.1.2 模块化规范2.2 ES6模块化规范2.2.1 导出模块2.2.2 导入模块2.2.3 运行程序2.3 使用Babel转码2.3.1 安装2.3.2 初始化项目2.3.3 配置.babelrc2.3.4 安装转码器2.3.5 转码2.3原创 2021-01-29 14:53:53 · 1308 阅读 · 0 评论 -
Vue项目启动和常见错误
目录1 安装node环境2 安装taobao的npm镜像3 Vue项目4 前台开发工具5 安装依赖:6 修改路径和地址7 常见错误:7.1 cnpm报错7.2concurrently不是内部或外部命令7.3 Failed to compile scss 无法编译scss1 安装node环境后端人员:没办法虽然前后端分离不用管前端这些东西,但是启动测试还是要会的,虽然postman可以测试返回数据和发送前端数据,但是最终还是要落在和前端页面交互.以后遇到...原创 2021-01-16 17:39:54 · 6394 阅读 · 0 评论