位置: IT常识 - 正文

【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用(vue快速入门与实战开发)

编辑:rootadmin
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用 文章目录一、本地存储1.概念2.接口3.实际操作二、自定义事件绑定1.自定义事件使用过程2.绑定自定义事件的语法3.其他注意事项三、全局事件总线1.全局事件总线概念2.全局事件总线的使用方式3.原理剖析四、$nextTick小技巧一、本地存储1.概念

推荐整理分享【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用(vue快速入门与实战开发),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue入门教程简书,vue从入门到精通教程,vue详细教程,vue快速入门与实战开发,vue入门视频教程,vue怎么入门,vue入门教程,vue怎么入门,内容如对您有帮助,希望把文章链接给更多的朋友!

可以将数据临时存储到本地浏览器,一般大小最大为5M,存储的时候形式是字符串,早期可以做网站搜索记录的存储,随着云原生的不断发展,搜索记录,浏览记录不断转向了云端存储方式。

分类:

永久存储 使用localStorage临时存储 使用sessionStorage2.接口

(上面两种存储方式接口名称一样):

window.localStorage.setItem() 存数据,传入的应是一个JSON串window.localStorage.getItem() 获取数据。接受到后应进行解析,为防止没有数据应加一个|| “”window.localStorage.removeItem() 删除数据。传入的是一个键window.localStorage.clear()

读取与写入的时候可以使用JSON进行解析,写入的时候如果不解析,会导致存储异常 读取的时候不解析,读到的将是一个字符串。JSON解析null结果还是null

JSON.stringify()JSON.parse()

存储的时候使用的是键值对的形式,对一个键进行多次存储以最后一次为准

3.实际操作<script>//存数据 function addStorage(){ localStorage.setItem("users",JSON.stringify([{"name":"张三","age":"18"},{"name":"张三1","age":"188"}])) } //取数据 function alertStorage(){ let i=JSON.parse(localStorage.getItem("users")) console.log(i) } //删除数据 function delStorage(){ localStorage.removeItem("users") } //清空数据 function delAllStorage(){ localStorage.clear() }</script>

如图所示(存储的一条用户数据):

二、自定义事件绑定【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用(vue快速入门与实战开发)

这种方法信息流向为 子组件===>父组件

1.自定义事件使用过程进行事件的绑定使用$emit触发事件(可以对$emit传多个参数,能接受几个看绑定的回调函数)2.绑定自定义事件的语法方法① 直接使用v-on:事件名=“回调函数”或者@+事件名+“回调函数”(事件名与回调函数名可以一样)方法② 通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!(ref在父组件的标签上)一般事件绑定与解除使用时机如下:mounted函数中进行事件绑定beforeDestroy函数中进行事件的解除mounted(){ this.$bus.$on("alertDone",this.alertDone)},beforeDestroy(){ this.$bus.$off("alertDone")}3.其他注意事项在组件中没办法直接使用系统给定的事件,例如@click他会当做一个自定义事件处理,想要作为系统自带的事件需要使用@click.native,其余系统自带属性亦是如此。如果想让事件只触发一次,就需要使用once或$once进行修饰触发自定义事件,需要使用$emit(“事件名”,事件需要的参数)解绑事件使用$off(“事件名”)事件回调函数可以使用省略传参方式进行传参

结合一个实例看看如何使用: 以下实例实现了将子组件的数据传送到父组件,传送之后并重新渲染模板,只给出了核心代码注释。 App.vue 父组件

<template><div class="demo"> <!-- 第一种测试方式 ref--> <h3>这里是父组件,子组件传过来的数据为:{{schname}}</h3> <School ref="school"></School> <!-- 第二种测试方式 @ or v-on --> <h3>这里是父组件,子组件传过来的数据为:{{stuname}}</h3> <Student @getstuname="getstuname"></Student> <h3>以下组件只会触发一次事件,因为使用了once属性</h3> <Student @getstuname.once="getstuname"></Student></div></template><script>import Student from "./components/Student.vue"import School from "./components/School.vue"export default { name:"App", components:{ Student, School }, data(){ return{ stuname:"", schname:"" } }, methods:{ //回调函数 getstuname(name){ this.stuname=name console.log(name) }, getschname(name){ this.schname=name console.log(name) } }, mounted(){ // 第二种进行事件的绑定的方法(将事件名与回调函数绑定起来) this.$refs.school.$on("getschname",this.getschname) }}</script><style> .demo{ background-color:grey; }</style>

School.vue子组件

<template> <div class="demo"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <button @click="sendschoolname">点我给把学校名给App</button> </div></template><script>export default { // eslint-disable-next-line vue/multi-word-component-names name:"School", data(){ return { name:"南阳理工学院", address:"长江路80号" } }, methods:{ sendschoolname(){ //触发事件,并传递参数 this.$emit("getschname",this.name) } }}</script><style scoped>.demo{ background-color: #ddd;}</style>

Student.vue子组件

<template> <div class="demo"> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> <button @click="sendstuname">点我发送学生姓名给App</button> </div></template><script>export default { // eslint-disable-next-line vue/multi-word-component-names name:"Student", data(){ return { name:"张三", age:18 } }, methods:{ sendstuname(){ //触发事件,并传递参数 this.$emit("getstuname",this.name) } }}</script><style scoped>.demo{ background-color: #ddd;}</style>三、全局事件总线

可用于父子、兄弟之间等等任意组件间相互通信

1.全局事件总线概念全局事件总线可以用于同一层的组件进行通信全局事件总线利用的是vue运行底层原理(在自己身上找不到数据是向上级找,直到原型)在使用全局事件总线的时候需要先定义(安装),安装的时机是在vm对象创建但数据代理等没有创建之前。使用事件总线的时候需要先明白哪里接受数据,哪里发送数据接受数据的地方绑定事件,发送数据的地方触发事件,绑定事件一般写在就是mounted函数内在销毁对象的时候最好将之前绑定的事件解绑掉,解绑的时候还是用$off()

通俗点来说,全局事件总线就像一个公交车或者说邮差,游走在兄弟组件、父子组件、不相关组件之间,虽然组件之间相互不知道有什么,但可以将信息传递到很远的地方,原因就是在Vue原型对象上挂载了一个全局变量,大家都知道有这么一个东西的存在。

2.全局事件总线的使用方式安装全局事件总线new Vue({......beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm}, ......}) 使用全局事件总线接受数据(绑定事件):A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。methods(){ demo(data){......}}......mounted() {//第一个参数是事件名,第二个参数是回调函数 this.$bus.$on('xxxx',this.demo)}发送数据(触发事件)this.$bus.$emit('xxxx',数据)3.原理剖析

解释一下为啥要将Vue.prototype.$bus = this放在beforeCreate内

全局事件总线利用的就是一个大家都知道的对象进行通信 全局事件总线的调用过程就是绑定事件、触发事件如果没在自己身上就向上级找、上级找不到就在原型上找 将一个大家都知道的对象挂在原型上在该对象上搭建事件,这个对象无疑最好的是使用vue对象(vm)。 在给Vue.prototype上挂载vm时,如果new vm 写在前面会报出模板中找不到Vue.prototype.$bus等信息 如果Vue.prototype.$bus写前面。vm对象还没有创建完毕,所以将他写在beforeCreate函数中恰到好处

四、$nextTick小技巧语法:this.$nextTick(回调函数)作用:在下一次 DOM 更新结束后执行其指定的回调。什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。常用于页面加载完毕后输入框聚焦等操作。

eg:这是一个触发编辑功能的函数,在触发之后等待模板渲染完毕,直接将鼠标聚焦在指定的输入框

editThisTodo(id){ this.$bus.$emit("editSomeTodo",id) this.$nextTick(function(){ this.$refs.inputTitle.focus() })},

这四种操作的基础语法已经介绍完了,接下来会根据这四种操作的语法实现一个记事本小案例。

本文链接地址:https://www.jiuchutong.com/zhishi/300686.html 转载请保留说明!

上一篇:tokenizer.encode、tokenizer.tokenize、tokenizer.encode_plus的用法差异

下一篇:【Windows Server 2019】Web服务 IIS 配置与管理—— IIS 的安装与基本配置 Ⅲ(windowsserver2019产品密钥)

  • 所得税退税账务处理
  • 财务软件怎么样才能用
  • 农村信用社可计息贷款吗
  • 一般纳税人登记证明
  • 企业所得税几大税种
  • 专票抵扣进项税可以省钱吗
  • 无形资产一般包括专利权
  • 房地产小规模纳税人预缴税款如何填申报表
  • 闲置固定资产如何做账
  • 集团内部资产无偿划转是否纳税增值税
  • 纳税人等级怎么划分
  • 实收资本印花税税率
  • 支付外币投资会计处理
  • 权益法下股权投资
  • 向公司一般户的银行借款怎么做账?
  • 货款为现金如何做记账账款凭证?
  • 进项票不足
  • 现汇账户和现钞账户可以转账吗
  • 没有建筑资质能办安全生产许可证吗
  • 补去年的税款怎么做账
  • 工商年报中的纳税总额是所属期应交还是实交税额
  • 支票存根没有进账怎么办
  • 公转私开票可以转吗
  • 用后期进项抵欠怎么做账
  • 事业单位授权支付一体化退库
  • 先入费用后来发票怎么做账
  • 生产成本结转库存商品的数量
  • php在apache中有哪些工作方式
  • 银行多收的开户费怎么办
  • windows10护眼色设置
  • 一般纳税人取得普票会计分录
  • 触电了该怎么做
  • oawrapper.exe是什么
  • 冷门暴利行业
  • 交易性金融资产包括哪些项目
  • 开发商违法
  • vue 查询
  • 阿布鲁佐的特点
  • Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
  • 微信小程序开发平台
  • 货币盘盈盘亏账怎么算
  • 上个月的发票未上传成功可以删除吗
  • 无偿划转法律意见
  • mongodb4.4安装
  • 车辆购置税可以网上缴纳吗
  • 医院累计折旧会计分录
  • 一般纳税人应交增值税
  • 自己动手把桌子改窄
  • SQLServer 2008中通过DBCC OPENTRAN和会话查询事务
  • 可以假设两种情形吗
  • 单位开具技术维护发票
  • 银行存款会计分录需要输入哪些内容
  • 销售产品产生的运输费计入什么科目
  • 辅导期一般纳税人标准
  • 供应商质量索赔流程
  • 营业外支出可以抵扣进项税吗
  • 摊余成本计入哪里
  • 净资产收益率怎么算出来的
  • 会计往来账怎么用excel做更快
  • 无建账能力的纳税人是什么意思
  • 注册表修改数据
  • win10 impact
  • Linux JDK,TOMCAT安装及环境设置
  • Win10 Mobile 10572快速配置更新推送 Win10 Mobile 10572升级体验
  • windowsxp服务在哪里
  • linux禁止ping的命令
  • xp桌面浏览器图标不见了
  • 果粉必修课 盘点Mac OS X系统发展史
  • Win10打开或关闭系统图标里开怎么灰色的
  • win8操作系统如何安装
  • win7鼠标突然不能用了
  • 开发者学校
  • vuex状态机
  • 自动寻路小说
  • js创建一个对象,里面有属性和方法
  • 社保欠费税务催缴
  • 担保费属于什么服务
  • 不能抵扣消费税口诀
  • 如何推进社会治理
  • 山东地税局网上办税平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设