VUE教程
文章平均质量分 93
VUE2+VUE3教程
老牛毕设
专注于大学生项目实战开发,讲解,答疑辅导等;擅长PHP、asp.net、Java、Python等语言及微信小程、VUE、UNI、Element、Bootstrap等前端框架;全栈开发;有需要可私信联系!
展开
-
【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例
将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级,其结构如下:此时我们希望基于4.4案例中的功能,实现点击侧边栏的部门管理,显示部门管理的信息,点击员工管理,显示员工管理的信息,效果如下图所示:这就需要借助我们的vue的路由功能了。原创 2024-01-08 09:30:00 · 873 阅读 · 0 评论 -
【JaveWeb教程】(9)Web前端基础:Vue组件库Element之Dialog对话框组件和Form表单组件 详细示例介绍
Dialog: 在保留当前页面状态的情况下,告知用户并承载相关操作。其企业开发应用场景示例如下图所示:首先我们需要在ElementUI官方找到Dialog组件,如下图所示:然后复制如下代码到我们的组件文件的template模块中并且复制数据模型script模块中:其完整的script部分代码如下:然后我们打开浏览器,点击按钮,呈现如下效果:那么ElementUI是如何做到对话框的显示与隐藏的呢?是通过如下的属性:具体释意如下图所示:visible属性绑定的dialogTableVisble属性一开始默原创 2024-01-08 08:30:00 · 2716 阅读 · 0 评论 -
【JaveWeb教程】(5)Web前端基础:Vue快速入门 一篇文章教你轻松搞定VUE 附v-bind、v-model、v-on、v-if、v-show、v-for详细示例代码案例
通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求 从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想,即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢?原创 2024-01-06 23:18:32 · 809 阅读 · 1 评论 -
【Vue2+3入门到实战】(23)Vue3之组合式API - 父子通信、模版引用、provide和inject、Vue3.3 新特性-defineOptions和defineModel 详细示例
可以用 defineOptions 定义任意的选项, props, emits, expose, slots 除外(因为这些可以使用 defineXXX 来做到)为了解决这一问题,引入了 defineProps 与 defineEmits 这两个宏。其中有许多重复的代码。如果我们要定义组件的 name 或其他自定义的属性,还是得回到最原始的用法——再添加一个普通的。顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件的数据。顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信。原创 2024-01-03 23:53:05 · 1232 阅读 · 6 评论 -
【Vue2+3入门到实战】(22)VUE3之组合式API - setup、reactive和ref函数、computed、watch、生命周期函数详细讲解
侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听。通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep。在setup函数中写的数据和方法需要在末尾以对象的方式return,才能给模版使用。计算属性基本思想和Vue2保持一致,组合式API下的计算属性只是修改了API写法。接收简单类型或者对象类型的数据传入并返回一个响应式的对象。接受对象类型数据的参数传入并返回一个响应式的对象。原创 2024-01-03 23:48:18 · 1343 阅读 · 0 评论 -
【Vue2+3入门到实战】(21)认识Vue3、使用create-vue搭建Vue3项目、熟悉项目和关键文件
Vue 3是Vue.js的最新版本,带来了许多新功能和改进。它在性能、开发体验和可维护性方面有很大的提升。使用create-vue搭建Vue 3项目是一种快速开始的方法。create-vue是一个命令行工具,可以帮助我们快速创建Vue 3项目的基本结构。关键文件指的是在Vue 3项目中最重要的文件,它们提供了项目的核心功能和配置。package.json:这个文件列出了项目的依赖和脚本。我们可以使用npm或yarn来管理项目的依赖,并运行一些脚本来进行开发和构建。原创 2024-01-03 23:44:34 · 1044 阅读 · 1 评论 -
【Vue2+3入门到实战】(20)VUE之Vuex状态管理器辅助函数mapMutations module模块 state getters mutations actions方法 代码实现详细讲解
mapMutations和mapState很像,它把位于mutations中的方法提取了出来,我们可以将它导入,但是请注意: Vuex中mutations中要求不能写异步代码,如果有异步的ajax请求,应该放置在actions中.state是存放数据的,mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)原创 2024-01-02 22:47:39 · 1661 阅读 · 7 评论 -
【Vue2+3入门到实战】(19)Vuex状态管理器通过辅助函数 - mapState获取 state中的数据代码实现 详细讲解
state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象,对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))原创 2024-01-02 22:39:13 · 1178 阅读 · 0 评论 -
【Vue2+3入门到实战】(18)VUE之Vuex状态管理器概述、VueX的安装、核心概念 State状态代码实现 详细讲解
目标:明确Vuex是什么,应用场景以及优势。VueX的安装、核心概念 State状态代码实现原创 2023-12-31 21:21:47 · 2000 阅读 · 10 评论 -
【Vue2+3入门到实战】(17)VUE之VueCli脚手架自定认创建项目、ESlint代码规范与修复、 ESlint自动修正插件的使用 详细示例
1.安装脚手架 (已安装)2.创建项目选项?> Manually select features 选自定义手动选择功能选择vue的版本3.x> 2.x是否使用history模式选择css预处理选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)比如:const age = 18;=> 报错!多加了分号!后面有工具,一保存,全部格式化成最规范的样子选择校验的时机 (直接回车)选择配置文件的生成方式 (直接回车)是否保存预设,下次直接使用?原创 2023-12-31 21:13:52 · 1138 阅读 · 0 评论 -
【Vue2+3入门到实战】(16)VUEVue路由的重定向、404、编程式导航、path路径跳转传参 详细代码示例
编程式导航有几种跳转方式?编程式导航,如何跳转传参?1.path路径跳转query传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'})动态路由传参this.$router.push('/路径/参数值')path: '/路径/参数值'})2.name命名路由跳转query传参name: '路由名字',query: {参数名1: '参数值1',原创 2023-12-30 23:44:01 · 2507 阅读 · 10 评论 -
【Vue2+3入门到实战】(15)VUE路由入门声明式导航的基本使用与详细代码示例
router-link是什么?router-link怎么用?router-link的好处是什么?router-link 会自动给当前导航添加两个类名,有什么区别呢?router-link的两个高亮类名 太长了,我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面?查询参数传参(多个参数)动态路由传参(一个参数,优雅简洁)原创 2023-12-30 23:37:30 · 958 阅读 · 0 评论 -
【Vue2+3入门到实战】(14)路由入门之单页应用程序、路由 、 VueRouter的基本使用 详细示例
单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现1.什么是单页面应用程序?2.单页面应用优缺点?3.单页应用场景?单页面应用程序,之所以开发效率高,性能好,用户体验好页面按需更新比如当点击【发现音乐】和【关注】时,只是更新下面部分内容,对于头部是不更新的访问路径和组件的对应关系!访问路径 和 组件的对应关系如何确定呢?路由生活中的路由:设备和ip的映射关系路径和组件的映射关系什么是路由Vue中的路由是什么。原创 2023-12-29 11:00:00 · 2253 阅读 · 8 评论 -
【Vue2+3入门到实战】(13)插槽<slot>详细示例及自定义组件的创建与使用代码示例 详解
插槽详细示例及自定义组件的创建与使用代码示例 详解原创 2023-12-29 10:00:00 · 1314 阅读 · 1 评论 -
【Vue2+3入门到实战】(12)自定义指令的基本语法(全局、局部注册)、 指令的值、v-loading的指令封装 详细示例
基本语法(全局、局部注册)指令的值v-loading的指令封装… 这都是Vue给咱们内置的一些指令,可以直接使用自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念:自己定义的指令,可以封装一些DOM操作,扩展额外的功能全局注册//在main.js中Vue.directive('指令名', {// 可以对 el 标签,扩展额外功能el.focus()})局部注册//在Vue组件的配置项中"指令名": {原创 2023-12-29 08:00:00 · 1015 阅读 · 1 评论 -
【Vue2+3入门到实战】(11)Vue基础之 v-model原理 、 v-model应用于组件、 sync修饰符 、ref和$refs 、$nextTick详细示例
1. v-model原理2. v-model应用于组件3. sync修饰符4. ref和$refs5. $nextTick原创 2023-12-28 16:24:40 · 1528 阅读 · 5 评论 -
【Vue2+3入门到实战】(10)Vue基础之一文掌握 组件通信 详细示例(组件通信语法、父传子 、 子传父、非父子通信)
一、学习目标1.组件通信2.综合案例:小黑记事本(组件版)二、组件通信1.什么是组件通信?2.组件之间如何通信3.组件关系分类4.通信解决方案5.父子通信流程6.父向子通信代码示例7.子向父通信代码示例8.总结三、什么是props1.Props 定义2.Props 作用3.特点4.代码演示四、props校验1.思考2.作用3.语法4.代码演示五、props校验完整写法1.语法2.代码实例3.注意六、props&data、单向数据流1.共同点2.区别4.代码演示5.口诀七、综合案例-组件拆分1.需求说明。原创 2023-12-28 13:48:11 · 957 阅读 · 0 评论 -
【Vue2+3入门到实战】(9)Vue基础之组件的三大组成部分(结构/样式/逻辑) 详细示例
style的默认样式是作用到哪里的?scoped的作用是什么?style中推不推荐加scoped?data写成函数的目的是什么?原创 2023-12-28 13:34:37 · 442 阅读 · 0 评论 -
【Vue2+3入门到实战】(8)Vue基础之工程化开发和脚手架Vue CLI 组件化 组件注册 详细示例
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】虽然脚手架中的文件有很多,目前咱们只需人事三个文件即可main.js 入口文件App.vue App根组件index.html 模板文件整个应用最上层的组件,包裹所有普通小组件App组件包含哪三部分?A组件内部注册的局部组件能在B组件使用吗局部注册组件的步骤是什么使用组件时 应该按照什么命名法1.全局注册组件应该在哪个文件中注册以及语法是什么?原创 2023-12-27 13:48:32 · 1702 阅读 · 10 评论 -
【Vue2+3入门到实战】(7)Vue基础之 生命周期介绍 生命周期的四个阶段 生命周期钩子 详细示例
思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来)Vue生命周期:就是一个Vue实例从创建 到 销毁 的整个过程。生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段:创建响应式数据2.挂载阶段:渲染模板3.更新阶段:修改数据,更新视图4.销毁阶段:销毁Vue实例Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码四、生命周期钩子小案例1.在created中发送数据2.在mo原创 2023-12-27 13:38:50 · 445 阅读 · 0 评论 -
【Vue2+3入门到实战】(6)Vue基础之watch侦听器(监视器) 详细示例
watch侦听器的写法有几种?1.简单写法watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。},'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。2.完整写法watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handler。原创 2023-12-26 11:05:05 · 1124 阅读 · 6 评论 -
【Vue2+3入门到实战】(5)Vue基础之Computed计算属性 详细示例
1.computed有缓存特性,methods没有缓存2.当一个结果依赖其他多个值时,推荐使用计算属性3.当处理业务逻辑时,推荐使用methods方法,比如事件的处理函数computed计算属性是Vue.js中的一个特殊属性,用于对数据进行计算和处理,并返回一个新的值。它的特点是能够根据数据的变化自动更新计算结果,并且可以缓存计算结果以提高性能。使用computed属性可以将复杂的计算逻辑分解成多个简单的步骤,使代码更加清晰和可维护。原创 2023-12-26 10:55:11 · 928 阅读 · 0 评论 -
【Vue2+3入门到实战】(4)Vue基础之指令修饰符 、v-bind对样式增强的操作、v-model应用于其他表单元素 详细示例
所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码。原创 2023-12-25 16:37:09 · 2880 阅读 · 67 评论 -
【Vue2+3入门到实战】(3)Vue基础之事件绑定指令(v-on) 属性绑定指令 (v-bind) 双向绑定指令(v-model) 列表渲染指令(v-for)详解
Vue 提供了 v-for 列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。2.点击删除按钮时,应该把当前行从列表中删除(获取当前行的id,利用filter进行过滤)需求:默认展示数组中的第一张图片,点击上一页下一页来回切换数组中的图片。(input、radio、select)使用,双向绑定数据,可以快速。**为什么加key:**Vue 的默认行为会尝试原地修改元素(**语法:**v-model=“变量”**需求:**使用双向绑定实现以下需求。比如,有一个图片,它的。原创 2023-12-25 13:58:39 · 1138 阅读 · 15 评论 -
【Vue2+3入门到实战】(2)Vue基础之Vue中的常用指令及内容渲染指令(v-html、v-text) 、 条件渲染指令(v-show、v-if、v-else、v-else-if)详解
条件判断指令,用来辅助开发者按需控制 DOM 的显示与隐藏。内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。指令是 vue 开发中最基础、最常用、最简单的知识点。为啥要学:提高程序员操作 DOM 的效率。原创 2023-12-25 13:46:01 · 589 阅读 · 0 评论 -
【Vue2+3入门到实战】(1)Vue基础之Vue简介、Vue实例创建、差值表达式、响应式特性、Vue开发者工具安装 详解
概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点所谓框架:就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上,增加功能代码即可。提到框架,不得不提一下库。库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等。原创 2023-12-25 13:35:02 · 822 阅读 · 0 评论