- 1、本文档共19页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
Vue基础–OptionsAPI;;我们知道,在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示;
比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示;
在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算;
在模板中放入太多的逻辑会让模板过重和难以维护;
并且如果多个地方都使用到,那么会有大量重复的代码;
我们有没有什么方法可以将逻辑抽离出去呢?
可以,其中一种方式就是将逻辑抽取到一个method中,放到methods的options中;
但是,这种做法有一个直观的弊端,就是所有的data使用过程都会变成了一个方法的调用;
另外一种方式就是使用计算属性computed;;什么是计算属性呢?
官方并没有给出直接的概念解释;
而是说:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性;
计算属性将被混入到组件实例中
所有getter和setter的this上下文自动地绑定为组件实例;
计算属性的用法:
选项:computed
类型:{[key:string]:Function|{get:Function,set:Function}}
那接下来我们通过案例来理解一下这个计算属性。
;我们来看三个案例:
案例一:我们有两个变量:firstName和lastName,希望它们拼接之后在界面上显示;
案例二:我们有一个分数:score
当score大于60的时候,在界面上显示及格;
当score小于60的时候,在界面上显示不及格;
案例三:我们有一个变量message,记录一段文字:比如HelloWorld
某些情况下我们是直接显示这段文字;
某些情况下我们需要对这段文字进行反转;
我们可以有三种实现思路:
思路一:在模板语法中直接使用表达式;
思路二:使用method对逻辑进行抽取;
思路三:使用计算属性computed;
;思路一的实现:模板语法
缺点一:模板中存在大量的复杂逻辑,不便于维护(模板中表达式的初衷是用于简单的计算);
缺点二:当有多次一样的逻辑时,存在重复的代码;
缺点三:多次使用的时候,很多运算也需要多次执行,没有缓存;
;思路二的实现:method实现
缺点一:我们事实上先显示的是一个结果,但是都变成了一种方法的调用;
缺点二:多次使用方法的时候,没有缓存,也需要多次计算;
;思路三的实现:computed实现
注意:计算属性看起来像是一个函数,但是我们在使用的时候不需要加(),这个后面讲setter和getter时会讲到;
我们会发现无论是直观上,还是效果上计算属性都是更好的选择;
并且计算属性是有缓存的;
;在上面的实现思路中,我们会发现计算属性和methods的实现看起来是差别是不大的,而且我们多次提到计算属性有缓存的。
接下来我们来看一下同一个计算多次使用,计算属性和methods的差异:
;这是什么原因呢?
这是因为计算属性会基于它们的依赖关系进行缓存;
在数据不发生变化时,计算属性是不需要重新计算的;
但是如果依赖的数据发生变化,在使用时,计算属性依然会重新进行计算;
;计算属性在大多数情况下,只需要一个getter方法即可,所以我们会将计算属性直接写成一个函数。
但是,如果我们确实想设置计算属性的值呢?
这个时候我们也可以给计算属性设置一个setter的方法;
;你可能觉得很奇怪,Vue内部是如何对我们传入的是一个getter,还是说是一个包含setter和getter的对象进行处理的呢?
事实上非常的简单,Vue源码内部只是做了一个逻辑判断而已;
;什么是侦听器呢?
开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中;
当数据变化时,template会自动进行更新来显示必威体育精装版的数据;
但是在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用侦听器watch来完成了;
侦听器的用法如下:
选项:watch
类型:{[key:string]:string|Function|Object|Array}
;举个栗子(例子):
比如现在我们希望用户在input中输入一个问题;
每当用户输入了必威体育精装版的内容,我们就获取到必威体育精装版的内容,并且使用该问题去服务器查询答案;
那么,我们就需要实时的去获取必威体育精装版的数据变化;
;我们先来看一个例子:
当我们点击按钮的时候会修改info.name的值;
这个时候我们使用watch来侦听info,可以侦听到吗?答案是不可以。
这是因为默认情况下,watch只是在侦听info的引用变化,对于内部属性的变化是不会做出响
您可能关注的文档
- LoRa智慧停车系统开发.pptx
- LS_951Q尾气加氢催化剂在镇海炼化的工业应用.pdf
- DEFORM挤型工艺仿真及模具寿命分析技术.pdf
- DEFORM密封及紧固件制造、安装工艺仿真技术.pdf
- eclipse+weblogic使用手册说明.doc
- ERP应用与实践中的关键问题-现代物流与供应链管理.ppt
- EXCEL基本操作指南.docx
- FSAE赛车的悬架转向及制动系统设计.ppt
- HAZOPkit软件分析报告.pdf
- I.C.E.速冷袋创业商业计划书.ppt
- 山东滕州实验高中2025届高三下学期期中测试历史试题含解析.doc
- 2024年河南省濮阳市濮阳县郎中乡招聘社区工作者真题带答案详解.docx
- 广东省韶关市新丰县一中2024-2025学年高三入学考试生物试题含解析.doc
- 汉中市农业生态系统服务时空特征及权衡与协同关系研究.docx
- 随州职业技术学院《公路客运站建筑设计》2023-2024学年第二学期期末试卷.doc
- 洋县2025年数学五下期末经典模拟试题含答案.doc
- 热电子-碟式斯特林联合发电系统的3E分析.docx
- 潞安职业技术学院《信息安全与云计算》2023-2024学年第一学期期末试卷.doc
- 稀土功能化共价有机框架荧光传感器的构筑及应用.docx
- 遵义医科大学《药品与生物制品检测》2023-2024学年第一学期期末试卷.doc
最近下载
- 学生公寓管理年终总结.pptx
- 信息学奥赛一本通·初赛真题解析 第1章:计算机基础知识.docx VIP
- 2023《浅析徐福记食品公司的财务状况》.docx VIP
- 中级java工程师面试题及答案.doc VIP
- java中级工程师面试题及答案.doc VIP
- 冰雪旅游服务规范 .pdf VIP
- DB22_T 3073-2019 旅行社冰雪旅游接待安全管理规范.docx VIP
- 导游在冰雪旅游中的安全要求与服务技巧.pptx VIP
- 三年(2022–2024)高考数学真题分类汇编(全国通用)专题05 平面解析几何(选择题、填空题)(解析版) .pdf VIP
- DB22_T3073-2019_旅行社冰雪旅游接待安全管理规范_吉林省.docx VIP
文档评论(0)