初学VUE前端框架(二)_程序媛_文乐的博客-程序员宅基地

技术标签: 前端框架  vue  vue.js  

七、计算属性

计算属性关键词: computed。计算属性主要用在处理一些复杂逻辑。如图所示7-1
在这里插入图片描述

7.1 computed vs methods

1.computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
2.使用 computed 性能会更好,但是如果不希望缓存,可以使用 methods 属性。

八、事件处理

v-on指令可以在触发事件传递参数,v-on有以下事件修饰符,都是使用点开头的后缀
.stop .prevent .capture .self .once .passive。如图所示8-1
在这里插入图片描述
v-on指令可以使用所有js的绑定事件。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

九、表单输入绑定

使用 v-modelv-model指令,对输入框,文本框,复选框,单选框等进行操作,所获取数据的方式原理一样,但复选框checkbox可能选中多个元素,使用数组对已选中的值进行数据保存。对默认值的设定,可以通过改变data对象属性。如事例图9-1所示
在这里插入图片描述

十、组件应用

10.1、组件基础

在这里插入图片描述

10.2、组件注册

Vue.component()函数,第一个参数被称为组件名, 命名方式通过短横线分隔命名和驼峰命名法。如事例图10-2所示
在这里插入图片描述
小编在CSDN写文章,想记录自己学到的知识点,有不足之处还请各位大佬多多指教,十分感谢哈! ! !

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44665318/article/details/107110239

智能推荐

Java网络编程和NIO详解开篇:Java网络编程基础_Java技术江湖的博客-程序员宅基地

老曹眼中的网络编程基础转自:https://mp.weixin.qq.com/s/XXMz5uAFSsPdg38bth2jAA我们是幸运的,因为我们拥有网络。网络是一个神奇的东西,它改变了你和我的生活方式,改变了整个世界。 然而,网络的无标度和小世界特性使得它又是复杂的,无所不在,无所不能,以致于我们无法区分甚至无法描述。对于一个码农而言,了解网络的基础知识可能还是从...

前端那点事02[pink老师]-HTML标签(上)_codingDreamDay的博客-程序员宅基地

目标1. 标签的书写规范2. HTML骨架标签3. 超链接标签4. 写出图片标签并说出alt和title的区别5. 说出相对路径的三种形式本节博客:HTML语法规范HTML基本结构标签开发工具HTML常用标签HTML中注释和特殊字符1、HTML语法规范标签分为单标签和双标签1.1 基本语法概述1.HTML标签是由尖括号包围的关键词,如 &lt; html &gt...

JAVAweb复习-MVC_饭饭童鞋的博客-程序员宅基地

1.MVC的组成及含义M是Model的简写,意思是模型。程序员编写程序应有的功能(实现算法等等)、数据库担当者进行数据管理和数据库设计(可以实现具体的功能)。V是View的简写,意思是视图。界面设计人员进行图形界面设计。C是Controller的简写,意思是控制器。负责转发请求,对请求进行处理MVC就是Model-View-Controller的简称,即模型-视图-控制器2.model1和model2在模型2中,JSP既作为视图又作为控制器的局面不再存在了Servlet作为控制器JSP则

【错误解决】 java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINF.classes.views.index_jsp_风之画的博客-程序员宅基地

正在运行的系统突然报这个错误最后确定是因为服务器上的jdk是1.8,我们系统上配置的1.7。pom.xml文件中修改 &lt;project.build.sourceEncoding&gt;UTF-8&lt;/project.build.sourceEncoding&gt; &lt;jdk.version&gt;1.8&lt;/jdk.versio...

【译】PX、EM还是REM媒体查询?_dizheng2246的博客-程序员宅基地

原文链接:https://zellwk.com/blog/media-query-units/你有没有想过使用媒体查询的时候到底该用px、em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也还没弄明白。当我一年多以前开始建立mappy-breakpoint库的时候,我用的是rem。当我与Sam Richard聊过之后,我转用了em,因为我发现二者并无差异。除了em和rem,另一个...

Oracle密码过期以致Em连不上的解决办法_em开机一段时间后连不上_duhongsheng的博客-程序员宅基地

一段时间没有学习Oracle了,昨天打开家中的Oracle服务器,用em去连接,发现连不上,但PL/SQL工具可连上,于是在网上搜了一下,都说可重建em,我的步骤如下:先是删除一个EM资料库emca -repos drop重建一个EM资料库emca -repos recreate配置数据库的 Database Controlemca -config dbcontrol db其中要输入密码的地方...

随便推点

cesium for ue4导入学习_directx3d_beginner的博客-程序员宅基地

学习链接来自于https://www.bilibili.com/s/video/BV1Hi4y1N7zR和https://segmentfault.com/a/1190000039832845感谢。这里我的插件没有cesium sunsky,不过地形算是导进来了。

开机提示“invalid partition table”如何解决_win10开机遇到无效分区表_殇莫忆的博客-程序员宅基地

https://zhidao.baidu.com/question/444245392.html注:1、现在的电脑大部分都是支持 Windows10 系统的 ,Windows7甚至以下可能不太支持了,所以重装系统的时候,自己选择好;2、在装系统的时候,bios 系统 要做更改 , 例如华硕笔记本BIOS设置详解;3、有些电脑是,重装系统的时候做更改,昨晚系统之后要更改回去;...

insert中加入where条件判断,解决插入重复数据的问题_xml insert 判断_浮生(FS)的博客-程序员宅基地

对于会员注册,我们经常会做唯一性验证,通常情况下我们有这两种方式: 1. 数据库表设计的时候loginName增加唯一约束 2. 注册之前先查一下然后再去进行插入操作针对以上两种情况,第一种情况,增加约束的话,是最有效的,但如果表结构已经确定了,再修改起来反而不太好,所以这里不多说。我们这里就只说第二种情况,这种情况看似无懈可击,但是确实有致命的bug,如果两个人同时填好注册信息,数123一起点

跟着Datawhale学习集成学习_集成学习datawhale_hello_JeremyWang的博客-程序员宅基地

集成学习1、机器学习的主要任务1.1监督学习1.1.1回归1.1.2 分类1.2无监督学习1、机器学习的主要任务我理解的机器学习就是,如何通过设计算法使得机器掌握学习的能力,发现数据中的规律。今天主要来熟悉机器学习的主要任务。具体地说,从有无因变量的角度出发,可以将机器学习任务分为有监督学习和无监督学习。其次,在有监督学习的大框架下,我们又可以根据因变量是否连续将问题分为回归问题和分类问题。下面我们可以来看一些例子(例子代码由Datawhale团队提供)首先导入相应的包import numpy as

hdu4311 曼哈顿距离_life4711的博客-程序员宅基地

http://acm.hdu.edu.cn/showproblem.php?pid=4311Problem DescriptionIt has been ten years since TJU-ACM established. And in this year all the retired TJU-ACMers want to get together to celebrat

springcloud-nacos-seata 实现分布式事务_路西法_Lucifer的博客-程序员宅基地

分布式事务组件seata的使用demo,AT模式,集成nacos、springboot、springcloud、mybatis-plus,数据库采用mysql;ps:github代码:transaction_example1. 服务端配置1.1 Nacos-server启动命令(standalone代表着单机模式运行,非集群模式):cd binsh startup.sh ...

推荐文章

热门文章

相关标签