前端
文章平均质量分 95
理想-
越自律越自由
展开
-
一文详解Vuex
文章目录前言1、`Vuex`概述2、使用Vuex完成求和案例 前言 继我的上一篇介绍组件间通信方式的博客之后Vue组件间通信,继续分享一个在vue中实现组件通信的技术——Vuex 1、Vuex概述 Vuex是Vue团队打造的用于集中式状态管理的一款插件。它能实现多组件之间的数据共享,并且支持多个组件对于状态的处理。所谓的状态,也就是数据。VueX致力于集中的管理状态,可以很方便的实现多组件的通信。图示即为Vue官方团队提供的Vuex原理图。 下面来对上方的图示的内容加以描述: Vue Component原创 2022-05-12 17:29:48 · 820 阅读 · 37 评论 -
Vue组件间通信(props 自定义事件 全局事件总线 消息订阅与发布)
文章目录前言1、使用props在父子组件中通信2、自定义事件2.1、自定义事件的第一种实现方式2.2、自定义事件的第二种实现方式2.3、解绑自定义事件2.4、自定义事件总结3、全局事件总线3.1、全局事件总线的原理3.2、案例分析3.3、全局事件总线总结4、消息订阅与发布 前言 vue的组件化使得可以将完成一种特定功能的代码和资源分离出来,提高了复用性。但随之也产生了一些问题,组件的这种隔离性使得组件间的数据交换变得更为繁琐,因此实现组件间的通信是十分重要的。下面我就结合自己所学,整理了几种适用于组件间通信原创 2022-05-11 17:30:01 · 575 阅读 · 17 评论 -
Vue组件化:(ref, props, mixin, 插件)
文章目录1、ref属性 1、ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School> 获取:this.$refs.xxx ...原创 2022-05-07 16:39:11 · 617 阅读 · 9 评论 -
一篇文章带你搞懂Vue的生命周期
文章目录1、引入生命周期1.1、搭建页面结构2、vue的生命周期函数2.1、挂载流程2.2、更新流程2.3、销毁流程3、vue的生命周期总结 1、引入生命周期 假设有这么一个案例,打开一个页面,上面显示的内容在不断地由清晰到模糊的变化,也就是说不断地改变透明度,应该如何实现这么一个案例呢? 1.1、搭建页面结构 <div id="root"> <h2 :style="{opacity}">{{msg}}</h2> </div> <script&g原创 2022-05-07 09:18:53 · 1454 阅读 · 7 评论 -
Vue复习第三天:(条件渲染 列表渲染 收集表单数据)
1、条件渲染 Vue里提供了一种能够根据判断条件渲染页面的机制,也就是条件渲染。 条件渲染会用到两个指令,一个是v-show,另外一个是v-if。 1.1、v-show v-show可以根据判断表达式的值来决定是否渲染页面,它不会删除结点的值,底层实现是通过修改display来实现页面的渲染 <!-- 准备好一个容器--> <div id="root"> <h2>当前的n值是:{{n}}</h2> <h2 v-show="false">欢迎来到原创 2022-05-05 20:35:02 · 839 阅读 · 18 评论 -
Vue复习第二天:(事件处理 计算属性 监视属性)
1、事件处理 1.1、事件的基本使用 在vue中,事件的绑定是通过v-on指令来进行的,下面来写一个案例说明如何绑定事件。 首先搭建页面整体结构 <body> <!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <button>点我提示信息</button> </div> </body> <script type="tex原创 2022-05-05 09:47:36 · 465 阅读 · 13 评论 -
Vue复习第一天:初始Vue 模板语法 数据绑定 el与data的两种写法
前言 这篇笔记是我根据尚硅谷的前端讲师张天禹老师的尚硅谷Vue2.0+Vue3.0全套教程整理的,这个教程真的强推,是我目前看过的最好的教程,讲解细致,吐字清晰,读者们也可以体验一下。原创 2022-04-28 09:49:51 · 1176 阅读 · 16 评论