vue11.22

数据代理Object.defineproperty

ler person = {

        name:'张三',

        sex:'男',

        age:18

}

console.log(Object.keys(person))

Object.keys是把对象的属性变成数组

let person = {

            name: '张三',

            sex: '男',

            // age: 18

        }

        Object.defineProperty(person, 'age', {

            value: 18

        })

        console.log(Object.keys(person));

数据代理写的不参与枚举。

在Object.defineProperty中加上enumerable:true;就可以枚举了。

不通过数据代理,可以改变值

同样,代理中加上writable:true;就可以改变值。

configurable:true;控制删除

<script>let number = 18let person = {name: '张三',sex: '男',// age: 18}Object.defineProperty(person, 'age', {get: function () {return number;}})console.log(person);// console.log(Object.keys(person));</script>

数据代理:通过一个对象代理对另一个对象中属性的操作

    <script>let obj = {x:100}let obj2 = {y:100}Object.defineProperty(obj2,'x',{get() {return obj.x},set(value) {obj.x = value}})</script>

Vue中的数据代理

这个就是通过getter方法,调用的data的name

vm把data存储到了vm_data

这个触发了setter

总结:

vm._data中除了data,还有一些数据劫持,用来响应页面的变化值。

事件处理:

v-on:  语法糖@

<body><div id="app"><h1>欢迎来到{{ name }}学习</h1><button v-on:click="showInfo">点我提示信息</button></div>
</body><script>Vue.config.productionTip = falseconst vm = new Vue({el: '#app',data: {name: '尚硅谷',address: '北京'},methods: {showInfo: () => {alert('同学你好')}}})</script>

showInfo(event){}中  的this是vm(vue实例化对象)

showInfo()=>{ }这里面的this是window

传参时直接加小括号

 <button v-on:click="showInfo2(66)">点我提示信息2</button>

showInfo2(number) {

                console.log(number);

            }

但是用上number就把自带的event弄丢了,

解决方法: <button v-on:click="showInfo2(66,$event)">点我提示信息2</button>

showInfo2(number,a)

a用来接收event

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="app"><h1>欢迎来到{{ name }}学习</h1><button v-on:click="showInfo">点我提示信息</button><button v-on:click="showInfo2(66)">点我提示信息2</button></div>
</body><script>Vue.config.productionTip = falseconst vm = new Vue({el: '#app',data: {name: '尚硅谷',address: '北京'},methods: {showInfo: () => {alert('同学你好')},showInfo2(number) {console.log(number);}}})</script></html>

事件修饰符

prevent:

当写下面:

        <a href="http://www.sdau.edu.cn" @click="showInfo"></a>

showInfo(){

                alert('hello')

            }

提示完之后,就自动跳转,但是不想让他跳转,

加一个preventDefault

showInfo(e) {

                e.preventDefault()

                alert('hello')

            }

或者使用vue的@click.prevent来阻止默认行为

stop:

 <div class="demo1" @click="showInfo">

            <button @click="showInfo">点我跳转</button>

        </div>

上面的导致事件冒泡

使用e.stopPropagation

或给button的@click.stop

once:

只触发一次

@click.once

capture:

使用事件的捕获模式,

正常下面的代码,点击div2的时候会输出2,1

这是因为从外向内捕,然后从内向外冒泡。

   <div class="box1" @click="showMsg(1)">div1

            <div class="box2" @clcik="showMsg(22)">div2

            </div>

        </div>

 showMsg(msg) {

                console.log(msg);

            }

但是想输出1,2

使用@click.capture

self

wheel

passive

键盘事件

keydown:按下按键

keyup:按下去弹起来的时候

e.target.value显示按下的键位

e.keyCode显示ascall码,e.key显示名字

showInfo(e) {

                if (e.keyCode != 13) return

                console.log(e.target.value);

            }

回车ascall是13

在vue中,把事件后面加上.enter就可以了.

@keyup.enter="showInfo

如绑定CapsLock,得写成.caps-lock

特殊;tab键得用keydown,因为keydown自动切走光标,然后再用keyup显示的时候就失效了。

所以在keydown的时候实现两个功能。

系统修饰键ctrl,alt,shift,meat如果用keyup,得是这个按键加其他被抬起才生效,

所以基本上用keydown

自定义按键名:

@keydown.huiche="showInfo"

Vue.config.keyCodes.huiche = 13;

补充:

@click.stop.prevent修饰符可以连用,先阻止冒泡,再阻止弹窗

@keyup.ctrl.y,按下ctrl+y的时候实现功能

姓名案例:

<!-- 法一:插值 -->
<body> <div id="app"><input type="text" v-model="firstname"><input type="text" v-model="lastname"><h1>姓名:{{ firstname.slice(0,3) }}-{{ lastname }}</h1></div>
</body><script>const vm = new Vue({el: '#app',data: {firstname: '张',lastname: '三'},methods: {}})
</script>

当要处理的步骤很多,{{ firstname.slice(0,3) }}就得写一大串,

这时应该放到计算属性中。

法二:函数

methods: {

            fullName() {

                return this.firstname + '--' + this.lastname

            }

        }

<h1>姓名:{{ fullName() }}</h1>

法三:计算属性

 computed: {fullName: {get() {return this.firstname + '-' + this.lastname}}}

当有人读取fullName时,get就会被调用,返回值作为fullName的值

computed比method调用省时间,比如显示四次姓名,method要访问四次,computed有缓存,

只需要计算一次。

计算属性还有set()

当fullName被修改时,调用set

set(value) {const arr = value.split('-')this.firstname = arr[0]this.lastname = arr[1]}}

简写(只考虑读取,不考虑修改才可以简写)

fullName:function(){return this.firstname + '-' + this.lastname}
fullName(){return this.firstname + '-' + this.lastname}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1、HCIP之RSTP协议与STP相关安全配置

目录 RSTP—快速生成树协议 STP STP的缺点&#xff1a; STP的选举&#xff08;Listening状态中&#xff09;&#xff1a; RSTP P/A&#xff08;提议/同意&#xff09;机制 同步机制&#xff1a; 边缘端口的配置&#xff1a; RSTP的端口角色划分&#xff1a; ensp模拟…

新160个crackme - 102-haggar-keyme1

运行分析 用win7或win xp系统可以运行输入Serial&#xff0c;点击Check无反应 PE分析 ASM程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida找到关键字符串 在sub_401E6B处按x&#xff0c;返回上一步函数 来到关键函数&#xff0c;静态分析逻辑如下&#xff1a;…

LCR-003比特位计数

一.题目&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; 二.我的原始解法-一次性通过的python内置bin函数解法&#xff1a; 思路和题目描述一致&#xff0c;就是把0-n的每个数字转为二进制&#xff0c;计算这个二进制中1的个数添加到返回数组中&#xff0c;掌握基础函…

动态求连续区间和(线段树 树状数组)

向上更新&#xff0c;建树&#xff0c;求区间和&#xff0c;修改节点值 向上更新&#xff1a; 返回左右节点值的和 建树&#xff1a; 如果是叶子节点&#xff0c;赋值结构体的左区间&#xff0c;右区间&#xff0c;值 如果不是叶子节点&#xff0c;那么先求中点&#xff0c…

聊聊Flink:这次把Flink的window分类(滚动、滑动、会话、全局)、窗口函数讲透

一、窗口 窗口&#xff08;Window&#xff09;是处理无界流的关键所在。窗口将流分成有限大小的“桶”&#xff0c;我们可以在其上应用算子计算。Flink可以使用window()和windowAll()定义一个窗口&#xff0c;二者都需要传入一个窗口分配器WindowAssigner&#xff0c;WindowAs…

友思特新闻 | 友思特荣获广州科技创新创业大赛智能装备行业赛初创组优胜企业!

2024年11月19日&#xff0c;第十三届中国创新创业大赛&#xff08;广东广州赛区&#xff09;暨2024年广州科技创新创业大赛智能装备行业赛颁奖典礼隆重举行。 赛事奖项介绍&#xff1a;广州科技创新创业大赛智能装备行业赛 第十三届“中国创新创业大赛&#xff08;广东广州赛区…

2024强网拟态决赛-eBeepf

漏洞分析与利用 分析后面看情况吧&#xff0c;有时间再写吧&#xff0c;先贴个利用脚本&#xff1a; #ifndef _GNU_SOURCE #define _GNU_SOURCE #endif#include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <fcntl.h> #include <…

Kotlin Multiplatform 未来将采用基于 JetBrains Fleet 定制的独立 IDE

近期 Jetbrains 可以说是动作不断&#xff0c;我们刚介绍了 IntelliJ IDEA 2024.3 K2 模式发布了稳定版支持 &#xff0c;而在官方最近刚调整过的 Kotlin Multiplatform Roadmap 优先关键事项里&#xff0c;可以看到其中就包含了「独立的 Kotlin Multiplatform IDE&#xff0c;…

38_转置卷积

转置卷积也被称为&#xff08;Transposed Convolution&#xff09;&#xff0c;也被称为fractionally_strided convolution、deconvolution。 转置卷积不是卷积的逆运算。 转置卷积也是卷积 转置卷积的作用是上采样。 1. 基础概念 转置卷积&#xff08;Transposed Convolution…

【Linux】内核的编译和加载

Linux内核是操作系统的核心&#xff0c;负责管理系统的硬件资源&#xff0c;并为用户空间的应用程序提供必要的服务。内核的编译和加载是操作系统开发和维护的重要环节。本文将详细介绍Linux内核的编译过程以及如何加载内核到系统中。 1. 引言 Linux内核的编译是一个复杂的过…

Qt桌面应用开发 第七天(绘图事件 绘图设备)

目录 1.绘图事件paintEvent 2.高级绘图 3.图片绘制 4.绘图设备 4.1QPixmap 4.2QBitmap 4.3QImage 4.4QPicture 1.绘图事件paintEvent paintEvent——绘图事件 需求&#xff1a;利用QPainter绘制点、线、圆、矩形、文字&#xff1b;设置画笔改为红色&#xff0c;宽度为…

使用IDEA构建springboot项目+整合Mybatis

目录 目录 1.Springboot简介 2.SpringBoot的工作流程 3.SpringBoot框架的搭建和配置 4.用Springboot实现一个基本的select操作 5.SpringBoot项目部署非常简单&#xff0c;springBoot内嵌了 Tomcat、Jetty、Undertow 三种容器&#xff0c;其默认嵌入的容器是 Tomcat&#xff0c;…

【含开题报告+文档+PPT+源码】基于SSM的电影数据挖掘与分析可视化系统设计与实现

开题报告 随着互联网的普及和数字娱乐产业的蓬勃发展&#xff0c;电影作为一种重要的娱乐方式&#xff0c;已经深入人们的日常生活。然而&#xff0c;面对海量的电影资源&#xff0c;用户在选择观影内容时常常感到困惑和无所适从。传统的电影推荐方式&#xff0c;如人工筛选、…

C++使用minio-cpp(minio官方C++ SDK)与minio服务器交互简介

目录 minio简介minio-cpp简介minio-cpp使用 minio简介 minio是一个开源的高性能对象存储解决方案&#xff0c;完全兼容Amazon S3 API&#xff0c;支持分布式存储&#xff0c;适用于大规模数据架构&#xff0c;容易集成&#xff0c;而且可以方便的部署在集群中。 如果你已经部…

【君正T31开发记录】8.了解rtsp协议及设计模式

前边搞定了驱动&#xff0c;先不着急直接上手撸应用层的代码&#xff0c;先了解一下大致要用到的东西。 设计PC端先用vlc rtsp暂时H264编码&#xff08;vlc好像不支持h265,这个后边我试试&#xff09;的视频流&#xff0c;先需要支持上rtsp server&#xff0c;了解rtsp协议是必…

JavaScript中的this指向绑定规则(超全)

JavaScript中的this指向绑定规则&#xff08;超全&#xff09; 1.1 为什么需要this? 为什么需要this? 在常见的编程语言中&#xff0c;几乎都有this这个关键字&#xff08;Objective-C中使用的是self),但是在JavaScript中的this和常见的面向对象语言中的this不太一样 常见面…

Spring注入Map学习

Spring注入Map学习 在Spring中 在策略模式中, 会经常用到 根据Bean名称获取Bean的实例 有2个方法很好用 1. 使用Autowired注入 2. 使用构造方法注入 但是奇怪的一点是: 日志打印并没有看到结果, 第一行的 Autowired的结果 是个null 那是因为 注入时机 的问题 注入时机&…

Redis五大基本类型——Set集合命令详解(命令用法详解+思维导图详解)

目录 一、Set集合类型介绍 二、常见命令 1、SADD 2、SMEMBERS 3、SISMEMBER 4、SCARD 5、SRANDMEMBER 6、SPOP 7、SMOVE 8、SREM ​编辑 9、集合间操作 &#xff08;1&#xff09;SINTER &#xff08;2&#xff09;SINTERSTORE &#xff08;3&#xff09;SUNION…

sql 查询语句:将终端数据形式转换成insert语句

文本转换&#xff1a;sql 查询语句&#xff1a;将终端数据形式转换成insert语句 如上&#xff0c;写过后端的都知道&#xff0c;从生产或其他地方拿到的数据&#xff0c;有可能会是图一&#xff1b;但实际上&#xff0c;我们需要图二的数据&#xff1b; 不废话&#xff0c;直接…

C++数据结构与算法

C数据结构与算法 1.顺序表代码模版 C顺序表模版 #include <iostream> using namespace std; // 可以根据需要灵活变更类型 #define EleType intstruct SeqList {EleType* elements;int size;int capacity; };// Init a SeqList void InitList(SeqList* list, int capa…