位置: 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产品密钥)

  • 怎样利用QQ群推广自己的网店?(怎么在qq群里推荐好友)

    怎样利用QQ群推广自己的网店?(怎么在qq群里推荐好友)

  • 小米手机怎样解除桌面布局已锁定(小米手机怎样解锁)

    小米手机怎样解除桌面布局已锁定(小米手机怎样解锁)

  • qq扩列为什么不可以匹配(QQ扩列为什么不能用了)

    qq扩列为什么不可以匹配(QQ扩列为什么不能用了)

  • 微信号打标了怎么取消(微信号打标怎么申诉)

    微信号打标了怎么取消(微信号打标怎么申诉)

  • 什么软件可以美颜视频(什么软件可以美颜照片)

    什么软件可以美颜视频(什么软件可以美颜照片)

  • 显示器连接主机的线叫什么(显示器连接主机显示无信号怎么回事)

    显示器连接主机的线叫什么(显示器连接主机显示无信号怎么回事)

  • 呼叫失败是对方挂了吗(呼叫失败是对方的问题还是我的问题)

    呼叫失败是对方挂了吗(呼叫失败是对方的问题还是我的问题)

  • 充电插口充不上电的时候怎么办(插口充不了电)

    充电插口充不上电的时候怎么办(插口充不了电)

  • ipad2系统最高到多少(ipad2 最高系统)

    ipad2系统最高到多少(ipad2 最高系统)

  • 怎样连续选择多个文件(怎样连续选择多张幻灯片)

    怎样连续选择多个文件(怎样连续选择多张幻灯片)

  • 淘宝直登号和自定义号有什么区别(淘宝直登号安全吗)

    淘宝直登号和自定义号有什么区别(淘宝直登号安全吗)

  • thinkpadt440哪一年的(thinkpadt440哪一年停售的)

    thinkpadt440哪一年的(thinkpadt440哪一年停售的)

  • nfc需要一直打开吗(nfc要常开吗)

    nfc需要一直打开吗(nfc要常开吗)

  • 电视上可以安装咪咕视频吗(电视上可以安装酷狗音乐吗)

    电视上可以安装咪咕视频吗(电视上可以安装酷狗音乐吗)

  • 手机上面显示hd怎么关(手机上面显示hd1是什么意思)

    手机上面显示hd怎么关(手机上面显示hd1是什么意思)

  • 华为畅享10带指纹吗(华为畅享10带指纹锁吗)

    华为畅享10带指纹吗(华为畅享10带指纹锁吗)

  • 苹果a2197平板是几代(苹果a2197平板是几英寸的)

    苹果a2197平板是几代(苹果a2197平板是几英寸的)

  • 爱奇艺怎么关注用户(爱奇艺怎么关注其他用户)

    爱奇艺怎么关注用户(爱奇艺怎么关注其他用户)

  • 华为手机share怎么隐藏(华为手机share怎么用)

    华为手机share怎么隐藏(华为手机share怎么用)

  • 淘宝不支持7天能退款吗(淘宝不支持7天无理由退换)

    淘宝不支持7天能退款吗(淘宝不支持7天无理由退换)

  • 蓝牙充电仓怎么充电(蓝牙充电仓怎么拆开)

    蓝牙充电仓怎么充电(蓝牙充电仓怎么拆开)

  • 微信投票失败5怎么解决(微信投票失败5是什么原因)

    微信投票失败5怎么解决(微信投票失败5是什么原因)

  • x27vivo面部解锁在哪里(vivox27不可以面部解锁吗?)

    x27vivo面部解锁在哪里(vivox27不可以面部解锁吗?)

  • oppo虚拟键在哪里设置(oppo虚拟键在哪里)

    oppo虚拟键在哪里设置(oppo虚拟键在哪里)

  • ppt每页时间怎么设置

    ppt每页时间怎么设置

  • 联想e430c安装设置u盘启动盘以及bios设置办法图文教程(联想e430安装win7)

    联想e430c安装设置u盘启动盘以及bios设置办法图文教程(联想e430安装win7)

  • aptezbp.exe是安全的进程吗 aptezbp进程信息查询(apkpure 安全)

    aptezbp.exe是安全的进程吗 aptezbp进程信息查询(apkpure 安全)

  • win11系统华硕电脑的指纹没办法使用了怎么添加? 华硕电脑指纹识别添加技巧(华硕11代笔记本装win10)

    win11系统华硕电脑的指纹没办法使用了怎么添加? 华硕电脑指纹识别添加技巧(华硕11代笔记本装win10)

  • 企业所得税当年销售收入
  • 夏天单位发防暑物品的通知
  • 返点的保险费应计入哪里
  • 劳务服务公司不含派遣,能接外包吗
  • 减税后含税单价计算公式
  • 预收账款负数重分类调整
  • 税务局登录账号是多少
  • 小型微利企业申请
  • 应交城建税和教育费附加计算分录
  • 公益性捐赠税前扣除资格认定
  • 计提坏账准备确认的信用减值损失累计金额
  • 公司交的拍卖费计入哪个会计科目?
  • 一般纳税人交增值税会计科目
  • 用支票结清运杂费的会计分录
  • 船舶吨税范围
  • 车间固定资产折旧属于什么科目
  • 个人借款到期未还诉讼时效
  • 公积金抵扣个税上限
  • 股权转让个人所得税会计分录
  • 企业创业初期能干什么
  • 预收账款怎么冲减应收账款
  • 所得税亏损财务处理办法
  • 公司必须购买税控设备吗
  • 仓库多入库怎么退
  • 一般企业可以开检测费吗
  • 公积金提前扣下个月
  • 企业向个人借款是否交印花税
  • 行政事业单位职工体检依据
  • 季节性停工是什么
  • 物权请求权如何行使
  • php中表单的使用
  • win7如何禁用wifi
  • 备用金怎么填写记账凭证
  • 长期股权投资投资收益计算
  • php数组数据结构
  • 纺织企业成本核算方案
  • vue3的unplugin-auto-import自动引入
  • php删除数据
  • 小微企业免征增值税优惠
  • 开了张增值税发票能退吗
  • 其他应付款个人在贷方表示什么
  • python中排序
  • mongodb分页查询count太慢
  • 费用分割单使用范围
  • 印花税步骤
  • sql查询语句怎么用
  • 普票不能抵扣为什么有税率
  • 成本结账是什么意思
  • 混凝土增值税发票税率
  • 注册资本一般为多少
  • 上一年度主营业务成本多计提了
  • 经营利润所得税费用
  • 积分换购怎么做账
  • 对方要求先开发票怎么办
  • 收取履约保证金的作用
  • 中标违约保证金怎么退
  • 教育类退费
  • 航天信息何去何从
  • 建筑公司直接把钱打到个人账户怎么走账
  • sql语句实现分页
  • mysqli查询
  • mysql id in
  • airdrop怎么用?
  • 加入黑名单后对方发信息显示什么
  • win10重大更新
  • windows无法更改设置
  • 如何将win7系统装进移动硬盘
  • windows10不能装windows7
  • linux内存耗尽怎么解决
  • android工程目录
  • 彻底弄懂js中的this指向
  • android studio ndk编程 配置
  • unity 接入sdk
  • shell脚本编写简单计算器
  • android pipepline
  • 基于javascript的毕业设计选题
  • 使用jQuery制作动画与特效及插件的应用
  • 土地增值税法定扣除项目
  • 国家医保平台查不到住院记录
  • 税务年报截止日期2022
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设