首页 > vue里的数据

vue里的数据

背景:


一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅,
会涉及到我所运用到的vue相关知识,需要一定的js基础。
默认vue的single-file-components(单文件组件开发)既sfc。

本文主题

vue里数据的处理

存放数据

我们先看vue里哪里能存放数据:

1.单个vue文件里。

2.官方插件vuex,作为一个集中管理经常复用的数据很有用。

3.直接声明在vue实例上,用$号标识。

第一种情况下存放数据对于单个文件又分这几种属性

1.1 data(常规使用,默认函数返回:忘记为啥了)

1.2 computed(计算,也就说,这是一个基于其他属性的属性)

1.3 watch(监听属性,官方推荐在此分类下的属性用于触发异步函数)

1.4 props(特殊,用来接收父组件向子组件传递的属性)

1.5 propsData(特殊,貌似是用来测试的)

第二种情况下数据存放都在state里

第三种情况是特别特别特别的,不讨论(都有vux,还用什么$号啊)。


数据传递

数据传递也分几种情况

1.全局传递。

2.父向子传递。

3.子向父传递。

第一种情况,请使用vuex,注意刷新会清空

第二种情况,子声明props,父在子组件上声明这个属性,就能传递下去

第三种情况,一般情况就用事件提交,父监听子声明的事件,然后就能接收到了

这里对props和事件做个特殊说明,假如运用了第三方的vue框架,你可能就是封装一下

对方的组件使其变成专用的子组件,这个时候,方法啊,属性啊,都在第三方组件上

而你封装的木有。如果一个个在去声明,第三方组件的props或者event着实累,自然有

简便的api啦。vm.$attrs,vm.$listener,然后你封装的子组件就把所有事件和属性都会被

第三方的组件所监听。vm.$listener,除法你开发了特殊的指令,否则,不用官网那样声明,第三方声明的事件都会被监听。


数据的修改

有以下几个note:

1.computed


别去修改,本身就是基于依赖,但是computed是个很好的展示数据容器。它原本是只有get方法,但是可以声明set方法。

2.watch


有两个属性,deep和immediate,一个是深度检测,一个是立即执行,相当于任务队列的第一个触发,deep不如直接用"foo.bar"的形式来监视.

如果同时监视N个属性,而这几个属性又都有关联性,个人推荐,这个时候,不要用watch,不如去监听事件,用switch语句更加方便,尤其是在有异步方法存在的时候,异步队列搞得心都碎了。

3.props


最好有默认值

4.比较简单便捷的方式,是引用某个组件,参开api里的ref。

            原文地址:https://segmentfault.com/a/1190000016820628

转载于:https://www.cnblogs.com/lalalagq/p/9900945.html

更多相关:

  • kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间、朋友圈、QQ、微信、微博等分享;联系按钮组包含了 微信、QQ、旺旺、Skype、电话等快捷沟通方式。演示地址 跨屏UI框架-响应式前端框架_基于Bootstrap的大组件UI框架​ui.kuapi...

  • 本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。#Vue 实现组件信息的缓存当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-a...

  • 2020年Vue面试题Interview●●●●作者:@烦恼会解决烦恼vue核心知识——理论篇1、对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少。Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开...

  • app.component.html

    父组件字号:{{fontSizePx}}px

    app.component.ts ...fontSizePx=12...

  • app.component.html  app.component.ts import { Component } from '@angular/core'; @Component({selector: 'a...

  • 文档树Document Object Model (DOM) 为文档对象模型, 它使用对象的表示方式来表示对应的文档结构及其中的内容。下面为一个样例 p 元素在文档中的对象所包含的所有属性。控制台:p#domaccessKey: ""align: ""assignedSlot: nullattributeStyleMap: Style...

  • 1、封装 什么是封装?   1.对外部隐藏内部的属性,以及实现细节,给外部提供使用的接口     注意:封装有隐藏的意思,但不是单纯的隐藏     学习封装的目的:就是为了能够限制外界对内部数据的访问   python中属性的权限分为两种:   1.公开的     没有任何限制,谁都可以访问   2.私有的     只有当前类本身能狗...

  • jquery:js框架; 主要区别在dom的操作 jq需要引入文件并且引入顺序在最上面; 找元素 操作元素 js:doucument.getElementById..classname,tagname,name jq:$(选择器) dom是js对象 jqDom是jquery对象 操作内容 js:dom.innerHTML(非表单元素)...

  • Mock.js 的语法规范包括两部分: 数据模板定义规范(Data Template Definition,DTD)数据占位符定义规范(Data Placeholder Definition,DPD)1.数据模板定义规范 DTD 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: // 属性名 name // 生...

  • vue   vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架,Vue.j...

  • 本文是西门子开放式TCP通信的第2篇,上一篇我们讲了使用西门子1200PLC作为TCP服务器的程序编写,可以点击下方链接阅读:【公众号dotNet工控上位机:thinger_swj】基于Socket访问西门子PLC系列教程(一)在完成上述步骤后,接下来就是编写上位机软件与PLC之间进行通信。上位机UI界面设计如下图所示:从上图可以看出...

  • 我有一个大型数据集,列出了在全国不同地区销售的竞争对手产品。我希望通过使用这些新数据帧名称中的列值的迭代过程,根据区域将该数据帧分成几个其他区域,以便我可以分别处理每个数据帧-例如根据价格对每个地区的信息进行排序,以了解每个地区的市场情况。我给出了以下数据的简化版本:Competitor Region ProductA Product...

  • 作为一名IT从业者,我来回答一下这个问题。首先,对于具有Java编程基础的人来说,学习Python的初期并不会遇到太大的障碍,但是要结合自己的发展规划来制定学习规划,尤其要重视学习方向的选择。Java与Python都是比较典型的全场景编程语言,相比于Java语言来说,当前Python语言在大数据、人工智能领域的应用更为广泛一些,而且大...

  • 这段时间通过学习相关的知识,最大的变化就是看待事物更加喜欢去了解事物后面的本质,碰到问题后解决问题思路也发生了改变。举个具体的例子,我在学习数据分析,将来会考虑从事这方面的工作,需要掌握的相关专业知识这个问题暂且按下不表,那哪些具体的问题是我需要了解的呢,以下简单罗列:1、了解数据分析师这个岗位在各个地区的需求情况?2、数据分析师的薪...

  • 这一节将开始学习python的一个核心数据分析支持库---pandas,它是python数据分析实践与实战的必备高级工具。对于使用 Python 进行数据分析来说,pandas 几乎是无人不知,无人不晓的。今天,我们就来认识认识数据分析界鼎鼎大名的 pandas。目录一. pandas主要数据结构 SeriesDataFrame二...