vue
文章平均质量分 86
vue从入门到熟练使用全篇详细教程
一个大不溜w
长风破浪会有时,直挂云帆济沧海。
展开
-
【vue2第二十一章】vuex 分模块 module核心概念
vuex module是什么?在Vuex中,module(模块)是将状态和相关逻辑封装在一起的一种方式。模块可以看作是Vuex状态的一部分,用于管理应用程序中特定的状态部分。**使用模块化的方式,可以将Vuex的状态划分为多个模块,每个模块负责管理和维护特定的状态和相关操作。可以将模块看作是Vuex状态的子集,每个模块拥有自己的state、mutations、getters和actions等。**一个模块可以包含以下内容:- state:模块的状态,类似于根状态的state,用于存储数据。原创 2023-09-25 17:49:35 · 566 阅读 · 0 评论 -
【vue2第二十章】vuex使用 (state,mutations,actions,getters)
vuex是什么?Vuex是一个用于Vue.js应用程序的状态管理模式。它允许您在应用程序中管理共享状态,并以可预测的方式进行状态更新。Vuex集成了Vue的响应式系统,使得状态的变化能够自动地更新视图。使用Vuex,您可以将应用程序的状态集中存储在一个地方,而不是分散在各个组件中。这样可以方便地跟踪、调试和管理应用程序中的状态,并且能够更好地处理复杂的应用程序逻辑和状态间的依赖关系。总之,Vuex可以帮助您更好地组织和管理Vue.js应用程序的状态。用大白话来说就是,vuex是一个插件,可以帮助我们管原创 2023-09-24 20:45:42 · 207 阅读 · 0 评论 -
【vue2第十九章】手动修改ESlint错误 和 配置自动化修改ESlint错误
**代码规范**:一套写代码的约定规则。例如:"赋值符号的左右是否需要空格","一句结束是否是要加;”等为什么要使用代码规范?在团队开发时,提高代码的可读性。原创 2023-09-22 21:38:56 · 505 阅读 · 0 评论 -
【vue2第十八章】VueRouter 路由嵌套 与 keep-alive缓存组件(activated,deactivated)
直接使用`keep-alive`包含需要缓存的组件出口,其中他有三个属性:**include** : 组件名数组,只有匹配的组件会被缓存。**exclude**:组件名数组,任何匹配的组件都不会被缓存。**max** :最多可以缓存多少组件实例。原创 2023-09-22 13:13:26 · 881 阅读 · 0 评论 -
【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)
如何在js进行跳转路由在一些需求中,我们需要不用点击a标签或者router-link,但是也要实现路由跳转,比如登陆,点击按钮搜索跳转。那么这种情况如何进行跳转呢?直接再按钮绑定的方法中写this.$router.push('路由路径')即可。如何通过 this.$router.push("/跳转路径") 或者 this.$router.push({path:"/跳转路径"})进行传参?原创 2023-09-07 12:00:00 · 1355 阅读 · 1 评论 -
【vue2第十六章】VueRouter 声明式导航(跳转传参)、路由重定向、页面未找到的提示页面404、vue路由模式设置
声明式导航(跳转传参)在一些特定的需求中,跳转路径时我们是需要携带参数跳转的,比如有一个搜索框,点击搜索的按钮需要跳转到另外一个页面组件,此时需要把用户输入的input框的值也携带到那页面进行发送请求,请求数据。路由重定向配置当访问到"/"时,就用redirect属性重定向到需要显示的页面,这样就可以解决页面进入时空白的问题也可以使用重定向做一些其他的功能不限于此,看需求。vue路由模式设置原创 2023-09-07 08:45:00 · 665 阅读 · 0 评论 -
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用(SPA)中实现页面之间的导航和路由功能。它是一种映射关系,映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载:`npm install vue-router原创 2023-09-07 01:35:33 · 1506 阅读 · 0 评论 -
【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)
插槽是什么?**在 Vue 2 中,插槽(slot)是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容,并在组件内部进行渲染。通过在组件模板中使用 `` 标签,你可以指定一个插槽的位置。这个位置可以被父组件中的任意内容所填充。父组件中的内容将被插入到插槽所在的位置,并最终与组件的其他部分一起进行渲染。原创 2023-09-05 23:21:44 · 852 阅读 · 0 评论 -
【vue2第十三章】自定义指令 自定义v-loading指令
自定义指令像 v-html,v-if,v-for都是vue内置指令,而我们也可以封装自定义指令,提升编码效率。**什么是自定义指令?**自己定义的一些指令,可以进行一些dom操作,扩展格外的功能。比如让图片懒加载,让input自动聚焦。自定义指令又分为全局注册和局部注册。原创 2023-09-05 19:25:26 · 871 阅读 · 0 评论 -
【vue2第十二章】ref和$refs获取dom元素 和 vue异步更新与$nextTick使用
Vue的异步更新是指在Vue的响应式系统中,更新组件的方式是异步的。这意味着当数据发生变化时,Vue并不立即更新组件的DOM,而是等到同一事件循环中的所有数据变化完成后,再统一进行一次更新操作。原创 2023-09-04 20:40:48 · 3118 阅读 · 0 评论 -
【vue2第十一章】v-model的原理详解 与 如何使用v-model对父子组件的value绑定 和修饰符.sync
v-model的原理详解v-model的本质就是一个语法糖,实际上就是 `:value="msg"` 与 `@input="msg = $event.target.value"` 的简写。 `:value="msg"` 从数据单向绑定到input框,当data数据中的msg内容一旦改变,而input框数据也随之改变。 `@input="msg = $event.target.value"` 是为input框绑定了input事件,内容改变则触发,而在触发时又把这个input框的value值赋值给了dat原创 2023-09-03 19:07:32 · 2011 阅读 · 0 评论 -
【vue2第十章】data数据与组件间通信
组件之间的通信首先为什么会有组件通信,因为在我们的页面中每个组件的的数据是不共享的,每个组件都拥有自己的组件数据。所有就产生了组件之间的数据通信。原创 2023-09-03 00:56:33 · 331 阅读 · 0 评论 -
【vue2第九章】组件化开发和根组件以及style上的scoped作用
组件化开发和根组件**什么是组件化开发?**一个页面可以拆分为多个组件,每个组件有自己的**样式,结构,行为**,组件化开发的好处就是,便于维护,利于重复利用,提升开发的效率。**便于维护**:页面中块出了问题,可以直接去找到这个组件,修改组件的样式逻辑结构。**利于重复使用**:组件可以重复使用,哪里需要哪里直接搬过去就可以,自然也就提升了开发的效率。原创 2023-09-02 19:06:54 · 306 阅读 · 0 评论 -
【vue2第八章】工程化开发和使用脚手架和文件结构
vue工程化开发 & 使用脚手架VUE CLI:1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。2,工程化开发。基于构建工具如(webpack)的环境中开发vue。原创 2023-09-01 17:36:46 · 620 阅读 · 0 评论 -
【vue2第七章】vue的四个生命周期与八个钩子函数
vue的四个生命周期与八个钩子函数**Vue的四个生命周期有:创建(creation)、挂载(mounting)、更新(updating)和销毁(destroying)。****钩子函数是什么:vue生命周期过程中,会自动运行一些函数,被称为生命周期钩子函数,让开发者可以在特定的周期调用自己的代码。**原创 2023-08-30 22:17:47 · 636 阅读 · 1 评论 -
【vue2第六章】watch侦听器(防抖:延迟执行)
什么是watch侦听器?在Vue.js中,watch是一种用于侦听数据变化的机制。它允许你在数据发生改变时执行相应的操作。可以简单地理解为,watch是一种侦听器,它可以监听指定的数据变化,并在该数据发生变化时执行特定的函数。在Vue实例中,你可以使用watch选项来定义一个或多个侦听器。每个侦听器都是一个对象,其中key表示要侦听的数据,value为一个函数,该函数在数据发生变化时被调用。原创 2023-08-29 23:07:22 · 882 阅读 · 0 评论 -
【vue2第五章】计算属性(computed)详解
计算属性(computed)详解什么是计算属性呢?就是一个基于现有的属性,计算出一个新的属性,依据属性的变化,自动更新。比如 现在有一个购物车数组,我们可以新增商品以及数量,我们就可以通过计算属性计算出总价。语法: 1.申明再computed配置项中,一个属性对应一个函数。 2. 使用起来和普通的属性一样{{ 计算属性名 }}原创 2023-08-27 00:10:41 · 2657 阅读 · 0 评论 -
【vue2第四章】使用v-bind操作class,style 和 v-model应用于表单属性
使用v-bind操作class,style 和 v-model对表单属性的操作.接下来是一个关于进度条的代码例子,将样式width与data中的num绑定,再通过点击事件改变num的值从而修改进度条的进度。原创 2023-08-25 23:39:31 · 233 阅读 · 0 评论 -
【vue2第三章】指令修饰符
click.stop会阻止点击事件的冒泡行为。(冒泡行为:点击子元素,触发子元素方法,在依次触发父元素的点击事件)Vue.js 的指令修饰符是在指令后面使用的特殊标记,用于改变指令的行为或者提供额外的功能。@事件名.prevent,就会阻止a标签的默认点击事件。原创 2023-08-25 22:09:15 · 76 阅读 · 0 评论 -
【vue2第二章】vue指令(v-for,v-model,v-bind,v-on....)
vue指令什么是vue指令呢? vue指令就是指带有 “v-”前缀的特殊属性,不同的属性对应不同的功能,学习不同的指令可以解决不同的业务需求.原创 2023-08-24 23:41:27 · 87 阅读 · 0 评论 -
【Vue2 第一章】vue入门(vue是什么?创建实例,模板语法,响应式特性)
概念:Vue是一个用于(构建用户界面)的(渐进式)(框架)原创 2023-08-24 00:16:53 · 73 阅读 · 0 评论