Vue新手村(二)

目录

1、计算属性

2、事件修饰符

2.1、stop事件修饰符

2.2、prevent事件修饰符

2.3、self事件修饰符

2.4、once事件修饰符

3、按键修饰符

3.1、enter回车键


1、计算属性

计算属性:

  • computed:vue官方提供一个计算属性
  • 作用:在完成某种业务时,往往页面结果需要经过多次计算才能获取,computed属性就是用来完成页面结果多次计算
  • 好处:在完成计算同时也会将计算结果进行缓存,如果数据没有发生变化,在页面中多次使用,计算方法仅执行一次
  • 使用:{{ }},在里面填写方法名即可

代码举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{count}}</h1>
        <h2>总数:{{test2}}</h2>
        <h2>总数:{{test2}}</h2>
        <h2>总数:{{test2}}</h2>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue ({
        el:"#app",
        data:{
            count:1
        },
        methods:{
            test() {

            }
        },
        computed:{
            test2() {
                console.log("调用了computed方法")
                return 3*this.count
            }
        }
    })
</script>

重点代码:

效果:


2、事件修饰符

修饰符:用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制~

2.1、stop事件修饰符

.stop:用来阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 对冒泡事件不处理 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div>
        </div>
        <hr>
        <!-- 阻止事件冒泡了 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click.stop="child"></div>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            parent() {
                alert('parent')
            },
            child() {
                alert('child')
            }
        }
    })
</script>

主要代码:

 效果:

  • 当你点击第一个父div下的子div时,会连续有两个alert弹框,这就叫做冒泡
  • 当你点击第二个父div下的子div时,只会有一个alert弹框,这就是阻止了冒泡

2.2、prevent事件修饰符

.prevent:用来阻止标签的默认行为

主要代码:

        没有添加.prevent时,点击后,会有alert弹框,然后跳转至百度。当我们不想让他执行默认行为(跳转)时,就可以使用.prenvent来控制

2.3、self事件修饰符

.self:用来针对当前标签的事件触发——只触发自己标签上的特定动作,只关心自己标签上触发的事件,不监听事件冒泡

主要代码:

        此时,我们点击子div,也不会触发父div的alert,因为添加了.self,他只关心自己标签上的事件

2.4、once事件修饰符

.once:一次作用——就是让指定事件只触发一次

主要代码:

        不管是点击子div,冒泡触发的,还是点击父div自己触发的,一共只触发一次~


3、按键修饰符

作用:用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

例如下面的例子【其他:.tab  .delete   .esc   .space  .up   .down   .left   .right】

3.1、enter回车键

enter回车回车键修饰符,用来在触发回车按键之后触发的事件

主要代码:

如上述,我们enter后就会触发提交函数

好啦,我们先学到这里哦,下期继续

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/311349.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

文件上传进阶绕过技巧(一)和靶场实战

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 0、环境准备 请移步《文件上传靶场实战&#xff1a;upl…

【C语言刷题每日一题#牛客网HJ73】——计算日期到天数转换(给定日期,计算是该年的第几天)

目录 问题描述 思路分析 数据结构构建部分 计算部分 代码实现 结果测试 此问题解决方法不唯一&#xff0c;这里介绍的是一种使用数组和循环实现的简单办法 问题描述 思路分析 问题的要求是输入一个日期&#xff0c;计算这是当年的第几天——要解决这个问题&#xff0c;逻…

S7-200SMART实例之冒泡法排序子程序

需求分析 编写程序实现冒泡法排序的算法。 冒泡法排序是一种简单的排序算法。因其过程如同水中气泡最终会上浮到水面一样&#xff0c;故被形象地称为“冒泡法排序”。 实现原理 根据以上需求分析可以按以下步骤实现算法&#xff1a; 1.比较相邻的元素。如果第一个比第二个…

Java面试题之JVM

Java面试题之JVM 1. JVM的组成部分及其作用&#xff1f;2. JVM的堆和栈的区别&#xff1f;3. 简述一下垃圾回收机制&#xff1f;(垃圾回收的原理&#xff1f;)4. 垃圾回收器都有什么&#xff1f;该怎么选择&#xff1f;5. 如何判断垃圾可以回收了&#xff1f;6. 垃圾回收算法有…

c++学习笔记-STL案例-机房预约系统1-准备工作

前言 准备工作包括&#xff1a;需求分析、项目创建、主菜单实现、退出功能实现 目录 1 机房预约系统需求 1.1 简单介绍 1.2 身份介绍 1.3 机房介绍 1.4 申请介绍 1.5 系统具体要求 1.6 预约系统-主界面思维导图 2 创建项目 2.1 创建项目 2.2 添加文件 ​编辑 3 创建…

小程序基础学习(事件处理)

概述&#xff1a;点击某一个标题&#xff0c;使标题选中增加不同颜色。 <!--pages/four/four.wxml--> <navigation-bar title"牧原" back"{{false}}" color"black" background"#FFF"></navigation-bar> <view c…

讲讲关于跨域的问题,什么是跨域?怎么办?

文章目录 什么是跨域如果非同源&#xff0c;共有三种行为受到限浏览器客户端和向服务器跨域请求的判定流程 跨域问题演示参考 以下内容为我结合他人知识进行的自我总结, 如有错误欢迎指出~ 什么是跨域 跨域就是不同的域名下的资源访问&#xff0c;会被浏览器的本地安全策略阻…

CISP-DSG证书含金量分析

CISP-DSG证书的含金量主要体现在以下几个方面&#x1f447; 1️⃣专业知识 CISP-DSG认证要求持有者具备深入的数据an全治理知识&#xff0c;包括数据分类、数据隐私、合规性、风险管理等。&#x1f4d2;这些知识对于处理和保护组织的敏感数据至关重要&#xff0c;因此具有高含金…

ubantu中的docker安装

1.Ubuntu Docker 安装 | 菜鸟教程 (runoob.com) 我就是看这个教程进行操作的 2.执行下面两步&#xff0c;就算是安装完成了 3.启动&#xff0c;并检查是否安装成功&#xff1a; 4.安装之后&#xff0c;怎么用&#xff0c;那就是自己随便探索咯&#xff0c;可以看博客&#xf…

【已解决】c语言编写的lib如何调用

本博文源于笔者在vs2015正在编写的lib想要调用的问题&#xff0c;正常的操作是将项目生成lib&#xff0c;但是然后又如何操作呢&#xff0c;本博文就是解决这样的问题 文章目录 问题再现步骤1&#xff1a;编写lib.h与lib.c步骤2&#xff1a;生成lib步骤3&#xff1a;添加用得到…

【昕宝爸爸小模块】HashMap用在并发场景存在的问题

HashMap用在并发场景存在的问题 一、✅典型解析1.1 ✅JDK 1.8中1.2 ✅JDK 1.7中1.3 ✅如何避免这些问题 二、 ✅HashMap并发场景详解2.1 ✅扩容过程2.2 ✅ 并发现象 三、✅拓展知识仓3.1 ✅1.7为什么要将rehash的节点作为新链表的根节点3.2 ✅1.8是如何解决这个问题的3.3 ✅除了…

c#图片作为鼠标光标

图片转换为鼠标光标代码如下&#xff1a; private void Form1_Load(object sender, EventArgs e) {//button1.Cursor System.Windows.Forms.Cursors.Hand;Bitmap bmp new Bitmap("780.jpg");Cursor cursor new Cursor(bmp.GetHicon());button1.Cursor cursor;} …

黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(4)员工管理|修改员工、配置文件

指路&#xff08;1&#xff09;&#xff08;2&#xff09;&#xff08;3&#xff09;&#x1f447; 黑马程序员JavaWeb开发|案例&#xff1a;tlias智能学习辅助系统&#xff08;1&#xff09;准备工作、部门管理_tlias智能学习辅助系统的需求分析-CSDN博客https://blog.csdn.n…

可狱可囚的爬虫系列课程 11:Requests中的SSL

一、SSL 证书 SSL 证书是数字证书的一种&#xff0c;类似于驾驶证、护照、营业执照等的电子副本。SSL 证书也称为 SSL 服务器证书&#xff0c;因为它是配置在服务器上。 SSL 证书是由受信任的数字证书颁发机构 CA 在验证服务器身份后颁发的&#xff0c;其具有服务器身份验证和…

Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

DOM和BOM的区别 我们都指代&#xff0c;javascript由三个部分组成&#xff1a; ECMAScript&#xff1a;描述了JS的语法和基本对象 BOM(浏览器对象)&#xff1a;与浏览器交互的方法和对象 DOM(文档对象模型)&#xff1a;处理网页内容的方法和接 ps&#xff1a;根据宿主&#x…

桌面微信多开小工具正式发布

本博客站点已全量迁移至 DevDengChao 的博客 https://blog.dengchao.fun , 后续的新内容将优先在自建博客站进行发布, 欢迎大家访问. 社牛: 我需要同时登录多个微信, 一个微信已经满足不了我了! Android: 让我看看系统里有没有自带的多开功能, 不行的话去应用市场下一个多开软…

DLT:dlt-daemon示例解析2

DLT&#xff1a;dlt-daemon示例解析 回顾一下上期第一个示例打印DLT日志的流程。 这次来分析第二个示例。 目录dlt-daemon/examples/example2/下有以下文件 CMakeLists.txt dlt_id.h example2.c example2.xml 其中example2.xml编译用不到&#xff0c;里面描述了一些程序的…

代码随想录算法训练营第二天|977 有序数组的平方、209长度最小的子数组、59 螺旋矩阵||

977 有序数组的平方 题目链接&#xff1a;有序数组的平方 思路 暴力解法 很容易想到的就是按照题目的说明&#xff0c;先给非递减数组中的每个元素做平方&#xff0c;然后使用一个排序函数对齐进行排序即可。 class Solution { public:vector<int> sortedSquares(ve…

第3章:python的判断语句

学一门语言&#xff0c;无外乎多敲&#xff0c;多用&#xff0c;记得回顾昨天写过的代码呀 布尔类型和比较运算符 布尔类型的定义 使用比较运算符进行比较运算得到布尔类型的结果 比较运算符 """ 演示布尔类型的定义 以及比较运算符的应用 ​ """…

基于OpenMV与STM32的数据通信项目(代码开源)

前言&#xff1a;本文为手把手教学 OpenMV 与 STM32 的数据通信项目教程&#xff0c;本教程使用 STM32F103C8T6 与 OpenMV 进行操作。 OpenMV 是非常强大的计算机视觉实现工具&#xff0c;自身提供了非常多的视觉项目案例&#xff0c;编程与使用门槛极低。为了进一步增强作品的…