![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 64
讨厌走开啦
这个作者很懒,什么都没留下…
展开
-
Vuex的使用(十二)——module引入的衍生问题及验证结果
参考文档:https://vuex.vuejs.org/zh/guide/在上一章里我们了解到可以从业务功能角度把Vuex拆分为多个module(每个module都有一套自己的state、getters、mutations和actions),这样每个业务模块都可以拥有一份属于自己的子Vuex对象(即module)。但这样做同样也会带来一些问题:如果module想要引用根Vuex对象的state、getters、mutations或actions该怎么操作?module之间需要互相引用该怎么操作,哪些原创 2021-09-14 21:43:30 · 252 阅读 · 0 评论 -
Vuex的使用(十一)——module的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/在前面的文章里介绍actions时提到我们可以把actions的定义部分从Vuex拆出来,避免Vuex的定义文件过度膨胀,这可以视为从功能角度拆分Vuex。但实际项目开发中更常见的情况是需要从业务角度来拆分Vuex,如希望某一功能模块可以共享一份state、getters、mutations和actions,这时就轮到module上场了。首先定义一个module(新增文件路径为src\store\moduleA\index.js)原创 2021-09-14 21:38:57 · 531 阅读 · 0 评论 -
Vuex的使用(十)——mutations和actions的返回值测试
参考文档:https://vuex.vuejs.org/zh/guide/在官方网站中有关于actions返回结果的例子,但却没有mutations返回结果的例子,首先把结论说明一下:actions允许返回结果,mutations不允许返回结果(即使写了return也不生效)。首先在Vuex中补充返回结果的mutations(mutation3方法,修改文件路径为src\store\index.js),下面上代码:import Vue from “vue”;import Vuex from “vu原创 2021-09-14 21:35:32 · 3261 阅读 · 0 评论 -
Vuex的使用(九)——actions的其他用法
参考文档:https://vuex.vuejs.org/zh/guide/在上一章的例子中介绍了actions可以在内部发起异步请求,且能够在内部调用mutation,下面介绍一下actions的其他用法:actions和mutations一样允许传一个自定义参数;actions支持互相调用(mutations不支持);actions允许返回结果。在上一章的独立actions文件中扩展定义(修改文件路径为src\store\action.js),代码如下:export default {/原创 2021-09-09 23:05:34 · 1591 阅读 · 0 评论 -
Vuex的使用(八)——actions和mapActions的用法
参考文档:https://vuex.vuejs.org/zh/guide/actions功能与mutations相近,区别主要有以下两点:actions不能直接改变state,只能通过调用mutation来改变state(mutation不能调用mutation,但是actions可以);mutation只能执行同步操作,actions可以执行异步操作。如果我们把state、getters、mutations和actions一股脑全部定义在一个文件里,会导致Vuex的定义文件非常臃肿,因此在下面原创 2021-09-09 22:52:25 · 4684 阅读 · 0 评论 -
Vuex的使用(七)——mapMutations的用法
参考文档:https://vuex.vuejs.org/zh/guide/mapMutations的定义可以对标mapState和mapGetters,就不赘述了,下面直接上示例代码。首先在Vuex中补充mutations的其他几种用法(修改文件路径为src\store\index.js),代码如下:import Vue from “vue”;import Vuex from “vuex”;Vue.use(Vuex);const store = new Vuex.Store({state: {原创 2021-09-08 21:56:35 · 7710 阅读 · 0 评论 -
Vuex的使用(六)——mutations的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/state是在整个前端应用中需要共享和维护的状态,而在之前的几章里主要介绍了state及其衍生概念的共享和使用,下面重点介绍一下state的维护方式——mutations。官网对mutation的定义:更改Vuex的store中的状态的唯一方法是提交mutation。笔者对mutations的理解是:Vuex需要对state进行管理,则必须把控state的维护入口,因此所有对state的变更请求都必须通过mutations来完成。原创 2021-09-08 21:45:14 · 7232 阅读 · 0 评论 -
Vuex的使用(五)——mapGetters的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/当需要在组件中使用多个getters时,可以利用mapGetters批量生成计算属性(新增文件路径为src\components\componentE.vue),代码如下: mapGetters用法 getters in vuex:{{param2}} 引用上面创建的component-e查看效果(修改文件路径为src\main.js),代码如下:imp原创 2021-09-08 21:36:45 · 5814 阅读 · 0 评论 -
Vuex的使用(四)——mapState的简化写法
参考文档:https://vuex.vuejs.org/zh/guide/按上一章的说明,可以在mapState的参数对象里定义多个属性来批量声明state,如果不需要对state进行额外处理的话,写法还可以进一步简化(新增文件路径为src\components\componentC.vue),代码如下: mapState简化写法 stete in vuex:{{param1}} 如果想定义组件自己的局部计算变量,则需要调整一下原创 2021-09-08 07:40:05 · 864 阅读 · 0 评论 -
Vuex的使用(三)——mapState的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/当需要在组件中使用多个state时,可以利用mapState批量生成计算属性原创 2021-09-06 18:39:34 · 1769 阅读 · 0 评论 -
Vuex的使用(二)——state和getters的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/首先澄清一下笔者对state和getters的理解:state即在整个前端应用中需要共享和维护的状态,但这个状态并没有持久化(刷新就会丢失,好处是不同在所有的组件中都写一次派生算法);getters是基于state派生出的状态(其作用类似于计算变量)。state的用法比较简单,具体可以参考上一篇文章,下面主要介绍一下getters的集中常见用法。原创 2021-09-04 08:43:51 · 1022 阅读 · 0 评论 -
Vuex的使用(一)——在项目中引入Vuex
参考文档:https://vuex.vuejs.org/zh/guide/如果当前没有项目代码,可以访问传送门搭建一个,以下Vuex相关功能都是在传送门搭建项目的基础上开发的。首先是Vuex的创建(文件路径为src\store\index.js),代码如下:import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const store = new Vuex.Store({ state: { param1:原创 2021-08-31 17:21:02 · 803 阅读 · 0 评论 -
Vue学习笔记(二十)——Vue为什么不推荐直接操作dom
Vue不推荐开发者直接操作dom(当然这并不表示不能这么做),有以下几个原因:破坏了代码模块化结构导致代码腐化:组件原本可以控制哪些dom操作可以对外暴露(即对应methods中的方法),但直接操作dom跳过了这个控制,这会导致不可预料的后果。例如组件A中有一个输入框,且组件A没有暴露可以删除输入框的方法,此时组件A会认为输入框是必定存在的,可以放心获取输入框的信息,但在其他组件中通过直...原创 2019-07-10 11:54:31 · 7409 阅读 · 1 评论 -
Vue学习笔记(十九)——组件props信息的修改
组件props信息的修改原创 2019-07-09 11:02:10 · 5853 阅读 · 0 评论 -
Vue学习笔记(十八)——Vue数据双向绑定原理解析
参考文档:https://www.cnblogs.com/zhenfei-jiang/p/7542900.htmlVue的数据双向绑定的基础是通过Object.defineProperty()劫持作用域中变量的get和set方法实现的,示例如下:示例中数据双向绑定的实现:js对象变更触发dom变更:当执行virtualData.data = “default”;时输入框的信息同步更新为def...原创 2019-07-08 16:11:25 · 449 阅读 · 0 评论 -
Vue学习笔记(十七)——$nextTick()的使用场景
尽管Vue不建议开发者去操作真实dom,但在实际开发中仍然会有部分操作真实dom的场景。初学者在操作真实dom的时候一定会遇到下面这样的问题:页面使用了Vue的某个变量,希望在变量更新后立即操作变量映射的dom,但是发现查询到的dom信息是更新之前的。解决方案:这个问题是由于更新Vue的变量后不会立即更新变量映射的dom,但是Vue提供了$nextTick()方法,我们可以把希望在真实dom更...原创 2019-06-24 11:04:08 · 2100 阅读 · 0 评论 -
Vue学习笔记(十六)——组件的懒加载
参考文档一:https://cn.vuejs.org/v2/guide/参考文档二:https://www.cnblogs.com/zhanyishu/p/6587571.html懒加载实质是让页面非必须资源延迟加载,减少页面加载用时,从而达到页面性能优化的目的。注意:本文涉及的懒加载配置都是基于webpack4.6.0,如果示例代码有错误,请先检查webpack版本。在vue工程中,懒加...原创 2019-06-17 22:36:44 · 6024 阅读 · 0 评论 -
Vue学习笔记(三)——比较计算属性和方法
计算属性和方法唯一的区别在于计算属性有缓存而方法没有,也就是说,只要计算属性的依赖属性没有发生变化,计算属性就不会重新计算,而方法则每次调用都会重新计算。如果计算属性没有在任何地方被使用,即使计算属性的依赖属性发生变化,计算属性也不会重新计算,直到计算属性被使用时才会触发重新计算;但如果计算属性有被使用(可以是在页面上显示也可以是在方法中被使用),则计算属性的依赖属性发生变化后,计算属性会立刻重新计算。原创 2019-02-28 17:39:48 · 756 阅读 · 0 评论 -
Vue学习笔记(二)——比较计算属性和侦听属性
如果导致计算属性发生变化的变量是某个对象的属性,计算属性不会监听整个对象(但侦听属性会,故有浅监听和深度监听的配置),而只会监听对象中会导致计算属性发生变化的属性。所以,当可以用计算属性替代侦听属性,尽量使用计算属性,计算属性监听的精准性和缓存机制会大大提升代码的性能。原创 2019-02-25 14:14:26 · 333 阅读 · 0 评论 -
Vue学习笔记(四)——v-for的key
参考文档:https://cn.vuejs.org/v2/guide/当使用v-for遍历数组时,如果没有指定key,则当数组元素顺序发生变更时,dom绑定的数据会更新,而dom本身的顺序不会变化;如果指定了key,则当数组元素顺序发生变更时,dom会和数据同步更新。下面用一个简单的例子来说明:<!DOCTYPE html><html lang="en"><h...原创 2019-03-18 23:34:16 · 4902 阅读 · 0 评论 -
Vue学习笔记(六)——解析v-model(PART1)
参考文档一:https://cn.vuejs.org/v2/guide/参考文档二:https://segmentfault.com/a/1190000010744545?utm_source=tag-newest在官网上关于v-model的用法是这么说的:一个组件上的v-model默认会利用名为value的prop和名为input的事件。实际上v-model相当于传递了一个名称为value...原创 2019-03-30 08:16:43 · 287 阅读 · 0 评论 -
Vue学习笔记(九)——sync修饰符
参考文档:https://cn.vuejs.org/v2/guide/sync修饰符用于简化子组件通知父元素更新传入参数这个动作的代码逻辑,可以参考如下示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sync修饰符<...原创 2019-04-05 09:30:54 · 1321 阅读 · 0 评论 -
Vue学习笔记(五)——组件与实例
组件与实例原创 2019-03-27 18:36:29 · 294 阅读 · 0 评论 -
Vue学习笔记(七)——解析v-model(PART2)
参考文档一:https://cn.vuejs.org/v2/guide/参考文档二:https://segmentfault.com/a/1190000010744545?utm_source=tag-newest上一篇博客介绍了v-model的基础应用场景和注意点,本文将重点说明几个特殊的应用场景。当需要重构组件(新增v-model),但组件已经包含了value变量时(或者待应用的元素的v...原创 2019-04-01 09:37:54 · 190 阅读 · 0 评论 -
Vue学习笔记(八)——router绑定事件不生效的解决方案
参考文档一:https://cn.vuejs.org/v2/guide/参考文档二:https://www.cnblogs.com/minghui007/p/7263177.html对初学者来说,使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数,但是发现路由跳转时函数没有执行,类似下面这样的代码:<!DOCTYPE html><html lang="en"&...原创 2019-04-02 20:25:54 · 2873 阅读 · 0 评论 -
Vue学习笔记(十)——slot插槽(PART1)
参考文档:https://cn.vuejs.org/v2/guide/首先简单说明一下slot插槽的应用场景:父元素可以通过solt插槽来控制子组件内嵌入的html模版或孙子组件(在之前给出的例子中,通常都是由子组件自己来控制嵌入的孙子组件,如https://blog.csdn.net/lqlqlq007/article/details/88971556内组件嵌套的例子)。在使用插槽时有以下几...原创 2019-04-08 21:35:07 · 1123 阅读 · 0 评论 -
Vue学习笔记(十一)——slot插槽(PART2)
如果声明了2个插槽 但是实际使用中有3个template 那么额外的template会如何处理(考虑会被丢弃?)可以像给组件传递参数那样给插槽传递数据(即使这个插槽不是组件也可以,但未传递的话则不能直接使用)当只有一个默认插槽时,可以用以下缩写来传递数据//在组件test中可以使用传入的参数item1<test :item1="data1" v-slot:item2="data2"&...原创 2019-04-22 12:53:20 · 184 阅读 · 0 评论 -
Vue学习笔记(十四)——keep-alive标签用法
参考文档:https://cn.vuejs.org/v2/guide/本文主要介绍keep-alive标签的用法。keep-alive标签用于切换组件时保留隐藏组件的状态。例如当组件a显示时,变更了组件a的data,然后把组件a切换为组件b,再切回组件a:如果组件被keep-alive包裹,则组件a的data为变更后的状态;如果组件未被keep-alive包裹,则组件a的data为初始化状态。...原创 2019-04-26 22:58:49 · 4199 阅读 · 1 评论 -
Vue学习笔记(十二)——slot插槽(PART3)
参考文档:https://cn.vuejs.org/v2/guide/非组件插槽的几个注意点:1.当有多个参数需要传递给插槽时,可以用v-slot:插槽名="slotProps"的方式以参数集合对象的方式来传递(如果插槽是唯一的,则插槽名可以写为default或者直接省略);2.如果插槽是唯一的,可以省略template元素,把v-slot定义在父元素上;3.如果插槽是不唯一的,则不能省略...原创 2019-04-23 13:40:51 · 187 阅读 · 0 评论 -
Vue学习笔记(十三)——slot插槽(PART4)
参考文档:https://cn.vuejs.org/v2/guide/本文主要介绍插槽的缩写和复用。插槽的缩写:v-slot:可以缩写为#(类似v-on:可以缩写为@,v-bind:可以缩写为:),例:v-slot:default="slotProps"可以缩写为#default=“slotProps”,但不能写为#=“slotProps”(即缩写时缺省插槽名不能省略)。以下为示例代码:...原创 2019-04-25 14:22:31 · 397 阅读 · 0 评论 -
Vue学习笔记(十五)——搭建基于webpack的vue开发环境
参考文档:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest依次执行文档贴出的命令即可完成基于webpack的vue开发环境的搭建,如果无法成功搭建(如某一步骤发生错误)请在文档下留言以便笔者更正。环境准备(首先搭建webpack环境,故vue会在后面的步骤安装)1.初始化工程:npm init2.安装we...原创 2019-06-14 18:44:58 · 502 阅读 · 0 评论 -
Vue学习笔记(一)——Vue与angularJS比较分析
参考文档:https://cn.vuejs.org/v2/guide/虚拟dom映射到真实dom的机制不同angularJS通过脏检查来实现,当作用域内变量发生变化时会触发脏检查,脏检查会遍历当前虚拟dom树下所有的变量检查是否变化,如果变化则更新对应的真实dom,这个检查动作会执行多次,直到没有变量改变为止。要注意的是,这个遍历动作不会区分变量是否改变,即所有的变量在每次遍历过程中都会检查,...原创 2019-02-21 15:49:33 · 1081 阅读 · 0 评论