![](https://img-blog.csdnimg.cn/20190719095456603.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue系列
文章平均质量分 96
记录自己对Vue的一些理解,初次接触Vue我们一起加一偶
余光、
一旦走出舒适区,你内心的痛点才是促使你前行的动力
2022年重新出发
展开
-
Vue专题(一)聊一聊双向绑定
本篇文章,主要带大家了解一下Vue中响应式的概念,已经双向绑定原理,配合部分示例,更好的理解原创 2021-04-17 13:58:18 · 12269 阅读 · 34 评论 -
Vuex:store.commit和store.dispatch的区别
一、来源store.commit()mutation注册了一个变更状态的事件后,需要调用 store.commit()来进行状态变更例如:store.commit('aaa')store.dispatch()是dispatch是触发action的一种方法例如:store.dispatch('aaa')二、共同点:在更改状态、触发更改状态时都可以以载荷方式和对象方式进行分发....原创 2020-04-03 14:00:42 · 2971 阅读 · 0 评论 -
入门Vuex你需要知道这些!
入门Vuex你需要知道这些瞧一瞧~博健的LeetCode题解:Gitbook版本传送门博健的LeetCode题解:CSDN传送门有趣的CSS:Gitbook传送门前端进阶笔记:Gitbook传送门一、什么是Vuex?二、代码目录三、Vuex核心之state四、Vuex核心之getter五、Vuex核心之mutation六、Vuex核心之action七、Vuex核心...原创 2020-03-30 17:40:36 · 332 阅读 · 0 评论 -
Vuex核心思想之Mutation、action
Mutation——更改store的状态的唯一方法更改Vuex的store中的状态的唯一方式是提交mutation。Vuex中的mutation类似于事件每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数就是我们对状态进行操作的地方,并且他接收state作为第一个参数。const store = new Vuex.store({ state...原创 2020-03-26 17:59:58 · 1995 阅读 · 0 评论 -
Vuex核心思想之getter
Getter为了从 store 中的 state 中派生出一些状态,例如state.info、state.detailcomputed: { info () { return this.$store.state.info }}一、为什么会有getter如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。...原创 2020-03-25 19:03:47 · 551 阅读 · 0 评论 -
Vue系列 => 条件与循环
条件与循环我们抛开文档上的细节,我们先来建立条件渲染的大致框架因为数据的可操作性,让我们可以轻松的控制页面中的某一部分的显示与否。当我们控制显示的变量 showSwitch为false时,请大家看它在dom结构中的显示。v-if<div v-if="showSwitch">1234</div>特点当判断值为假时,不存在于DOM树中参与了局部编译/卸...原创 2019-07-22 19:32:02 · 737 阅读 · 0 评论 -
Vue系列 =>虚拟Dom和key属性的作用
在我刚接触前端的时候,在我还没有接触框架的时候,操作DOM最多的就是通过JQ来完成,它帮助我们减少了代码量、在逻辑不变的情况下减少了出错的可能性。但是jQ并没有在根本上解决Dom对性能的影响,或者说只要操作DOM,就一定会对性能造成影响,只不过有些影响我们可以承受,而这也催生出了Vue和React等框架,数据操作Dom。...原创 2019-07-19 20:23:39 · 1517 阅读 · 0 评论 -
Vue系列 =>双向绑定和单向数据流并不冲突
双向绑定,从字面上来看我的理解就是通过数据关联的双方总是体现出同步的状态。看下图:一提到vue,或者我们在接触vue相关的问题的时候,总是会被问到vue的双向绑定的原理是什么,或者说它是怎么做到双向绑定的。它又为什么会被设计成单向数据流?这里我们要记住一点,Vue是单项数据流,不是双向绑定。Vue所体现的双向绑定是一种语法糖。Object.defineProperty是用来做...原创 2019-07-19 09:51:45 · 678 阅读 · 0 评论 -
Vue.js文档笔记(一)=> 模版语法
这是Vue的官方网站,进入网站,点击右上角学习、教程部分首先看左侧导航栏:官网给我们提供了非常多的安装途径 在这里我们用最简单的方式,通过script标签引入的方式&amp;lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js&quot;&amp;gt;&amp;lt;/script&amp;gt; 当原创 2018-08-23 14:53:56 · 1034 阅读 · 0 评论 -
Vue的特性(二):ref的作用及适用场景
ref预期:stringref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:<!-- `vm.$refs.p` will be the DOM node --><p ref="p">hello</p>&l...原创 2019-09-11 14:39:02 · 1721 阅读 · 0 评论 -
Vue的特性(一):key的作用
keykey的特殊属性主要用在Vue的虚拟Dom算法中,在新旧nodes(元素节点)对比时辨识VNodeskey 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key ...原创 2019-09-11 14:25:13 · 1012 阅读 · 0 评论