当前位置： 首页 > news >正文

Vue(10-20)

news 2026/2/8 23:13:01

1Vue赋值方式

Object.defineProperty

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body><script>let person = {name:'tony teacher',sex:'male',//age:19}Object.defineProperty(person,'age',{value:19,enumerable:true, //可以枚举writable:true,  //可以被修改configurable:true,  //可以被删除})console.log(person)</script>
</body>
</html>

一般赋值方式一旦number变化不会同步到age

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body><script>let number = 18let person = {name:'tony teacher',sex:'male',age:number}console.log(person)</script>
</body>
</html>

getter实现常态化赋值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body><script>let number = 10let person = {name:'tony teacher',sex:'male',}Object.defineProperty(person,'age',{get:function(){return number}})console.log(person)</script>
</body>
</html>

result
在这里插入图片描述

2数据代理

通过一个对象代理 另一个对象属性的操作（读写）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><script>let obj1 = {x:100}let obj2 = {y:200}Object.defineProperty(obj2,'x',{get(){return obj1.x},set(value){obj1.x=value}})</script>
</body>
</html>

在这里插入图片描述

3Vue中的数据代理

Vue数据代理示意图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h2>school:{{name}}</h2><h2>addreee:{{address}}</h2></div><script>const vm = new Vue({el:'#root',data:{name:'某硅谷',address:'某科技园'}})</script>
</body>
</html>

conclude:
1vue数据代理通过vm代理data对象属性的读写操作
2代理好处：方便操作data里面的数据

4事件处理(需要重试)

methods

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h2>欢迎来到{{name}},welcom</h2><button v-on:click=showInfo()>电击我,告诉你情报是什么</button></div><script>new Vue({el:'#root',data:{name:'某硅谷'},method:{showInfo(){alert('什么都没有')console.log(event.target.innerText)console.log(this)//显示vm}}})</script>
</body></html>

v-on: <==> @

在这里插入图片描述

5事件修饰符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的基本用法</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2>hello,{{name}}</h2><button v-on:click="showInfo1">点我提示信息1</button><button @click="showInfo2($event,66)">点我提示信息2</button></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{name:'JOJO'},methods:{showInfo1(event){console.log(event)},showInfo2(evnet,num){console.log(event,num)}}})</script>
</body>
</html>

事件修饰符：
1prevent:阻止默认事件
2stop阻止事件冒泡
3once事件只触发一次
4capture使用事件的捕获模式
5self:只有event.target是当操作的元素才是触发事件
6passive:事件的而默认行为立即实行，无需等待事件回调执行完毕

6键盘事件

vue按键别名
回车enter,
删除delete
退出esc
空格space
换行tab
上up
下down
left.right

注意：

系统修饰键（用法特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用

Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

8姓名案例
9计算属性

拿已经写完的属性加工成计算生成全新属性
data写属性
computed计算新属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root">姓：<input type="text" v-model="firstname"><br>名: <input type="text" v-model="lastname"><br>全名：<span>{{fullname}}</span></div><script>const vm = new Vue({el:'#root',data:{firstname:'张',lastname:'san'},computed:{fullname:{ //只要调用fullname就会执行get(){console.log('调用了getter')return this.firstname+'-_-'+this.lastname}}}})</script>
</body>
</html>

10计算属性简写

相关文章：

Vue(10-20)

1Vue赋值方式 Object.defineProperty <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" conten…...

编程日记 2023/3/10 10:37:34

C++-对四个智能指针：shared_ptr,unique_ptr,weak_ptr,auto_ptr的理解

回答如下&#xff1a; C的智能指针是一种特殊类型的“指针”&#xff0c;其主要目的是自动跟踪内存分配和释放&#xff0c;以避免程序中出现内存泄露或空悬指针等问题&#xff0c;主要采用的技术是&#xff1a;借助于类的生命周期&#xff0c;当超出了类的作用域时&#xff0c…...

编程日记 2023/3/10 10:36:29

uni-app中使用vue3语法详解

全局创建 app.use(createPina()).mount 全局方法 通过app.config.globalProperties.xxx可以创建 这里我们写了一个字符串翻转的全局方法 main.js里面添加一个全局方法 不要忘了加$ 否则会报错 // #ifdef VUE3 //导入创建app import { createSSRApp } from vue //导入创建ap…...

编程日记 2023/3/10 10:35:23

三十四、MongoDB PHP

PHP 语言可是使用 mongo.so ( Windows 下是 mongo.dll ) 扩展访问 MongoDB 数据库 MongoDB PHP 在各平台上的安装及驱动包下载请查看: PHP 安装 MongoDB 扩展驱动 如果你使用的是 PHP7&#xff0c;请移步&#xff1a; PHP7 MongoDB 安装与使用 PHP 连接 MongoDB 和 选择一个…...

编程日记 2023/3/10 10:34:21

浅拷贝和深拷贝的区别

浅拷贝和深拷贝 总结&#xff1a;浅拷贝对象数据共享&#xff0c;深拷贝是一个完全独立的对象&#xff0c;因此对象数据不共享。 浅拷贝&#xff08;Shallow Copy&#xff09; 浅拷贝是指创建一个新的对象&#xff0c;但是该新对象只是原始对象的一个副本。具体而言&#xf…...

编程日记 2023/3/10 10:33:19

6个常用Pycharm插件推荐，老手100%都用过

人生苦短 我用python 有些插件是下载后需要重启Pycharm才生效的 免费领源码、安装包&#xff1a;扣扣qun 903971231 PyCharm 本身已经足够优秀&#xff0c; 就算不使用插件&#xff0c; 也可以吊打市面上 90%的 Python 编辑器。 如果硬要我推荐几款实用的话&#xff0c; 那么…...

编程日记 2023/3/10 10:32:16

TCP的11种状态

CLOSED状态&#xff1a;初始状态&#xff0c;表示TCP连接是“关闭的”或者“未打开的”LISTEN状态&#xff1a;表示服务端的某个端口正处于监听状态&#xff0c;正在等待客户端连接的到来SYN_SENT状态&#xff1a;当客户端发送SYN请求建立连接之后&#xff0c;客户端处于SYN_SE…...

编程日记 2023/3/10 10:31:13

new 指令简单过程 / 类加载简单过程初始化

例子&#xff1a;Person p new Person(“张三”,”23”); 因为new用到person.class,所以先找到person.class文件&#xff0c;并且加载到内存中&#xff08;如果有父类先加载父类&#xff09;执行static块以及static变量的初始化&#xff08;如果有父类先初始化父类&#xff0…...

编程日记 2023/3/10 10:30:09

Asan基本原理及试用

概述 Asan是Google专门为C/C开发的内存错误探测工具&#xff0c;其具有如下功能 使用已释放内存&#xff08;野指针&#xff09;√堆内存越界&#xff08;读写&#xff09;√栈内存越界&#xff08;读写&#xff09;√全局变量越界&#xff08;读写&#xff09;函数返回局部变…...

编程日记 2023/3/10 10:29:03

深度学习应用技巧4-模型融合：投票法、加权平均法、集成模型法

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下&#xff0c;深度学习中的模型融合。它是将多个深度学习模型或其预测结果结合起来&#xff0c;以提高模型整体性能的一种技术。 深度学习中的模型融合技术&#xff0c;也叫做集成学习&#xff0c;是指同时使用多个…...

编程日记 2023/3/10 10:27:56

【并发编程】深入理解Java内存模型及相关面试题

文章目录优秀引用1、引入2、概述3、JMM内存模型的实现3.1、简介3.2、原子性3.3、可见性3.4、有序性4、相关面试题4.1、你知道什么是Java内存模型JMM吗&#xff1f;4.2、JMM和volatile他们两个之间的关系是什么&#xff1f;4.3、JMM有哪些特性/能说说JMM的三大特性吗&#xff1f…...

编程日记 2023/3/10 10:26:51

C++编程语言STL之queue介绍

本文主要介绍C编程语言的STL&#xff08;Standard Template Library&#xff09;中queue&#xff08;队列&#xff09;的相关知识&#xff0c;同时通过示例代码介绍queue的常见用法。1 概述适配器&#xff08;adaptor&#xff09;是STL中的一个通用概念。容器、迭代器和函数都有…...

编程日记 2023/3/10 10:25:45

ACO优化蚁群算法

%% 蚁群算法&#xff08;ant colony optimization,ACO&#xff09; %清空变量 clear close all clc [ graph ] createGraph(); figure subplot(1,3,1) drawGraph( graph); %% 初始化参数 maxIter 100; antNo 50; tau0 10 * 1 / ( graph.n * mean( graph.edges(:) …...

编程日记 2023/3/10 10:23:33

SwiftUI 常用组件和属性(SwiftUI初学笔记)

本文为初学SwiftUI笔记。记录SwiftUI常用的组件和属性。 组件 共有属性(View的属性) Image("toRight").resizable().background(.red) // 背景色.shadow(color: .black, radius: 2, x: 9, y: 15) //阴影.frame(width: 30, height: 30) // 宽高 可以只设置宽或者高.…...

编程日记 2023/3/10 10:22:27

Centos 中设置代理的两种方法

Centos 中设置代理的两种方法 在使用局域网时&#xff0c;有时在局域网内只有一台电脑可以进行上网&#xff0c;其他电脑只能通过配置代理的方式来上网&#xff0c;在Windows系统中设置代理上网相对简单&#xff0c;如果只需上网的话&#xff0c;只需在浏览器中找到网络连接&am…...

编程日记 2023/3/10 10:21:26

高速PCB设计指南系列（一）

第一篇 PCB布线 在PCB设计中&#xff0c;布线是完成产品设计的重要步骤&#xff0c;可以说前面的准备工作都是为它而做的&#xff0c; 在整个PCB中&#xff0c;以布线的设计过程限定最高&#xff0c;技巧最细、工作量最大。PCB布线有单面布线、 双面布线及多层布线。布线的方…...

编程日记 2023/3/10 10:20:19

云端IDE：TitanIDE v2.6.0 正式发布

原文作者&#xff1a;行云创新技术总监 邓冰寒 引言 云原生集成开发环境 TitanIDE v2.6.0 正式发布了&#xff0c;一起来看看都有那些全新的体验吧&#xff01; TitanIDE 是一款云IDE, 也称 CloudIDE&#xff0c;作为数字化时代研发体系不可或缺的一环&#xff0c;和企业建设…...

编程日记 2023/3/10 10:19:18

【Python】tqdm 模块

import mathfrom tqdm import tqdm, trange# 计算阶乘 results_1 []for i in range(6666):results_1.append(math.factorial(i))这是一个循环计算阶乘的程序&#xff0c;我们不知道程序运行的具体情况&#xff0c;如果能加上一个程序运行过程的进度条&#xff0c;那可就太有趣…...

编程日记 2023/3/10 10:18:15

论文阅读：Adversarial Cross-Modal Retrieval对抗式跨模式检索

Adversarial Cross-Modal Retrieval 对抗式跨模式检索 跨模态检索研究的核心是学习一个共同的子空间&#xff0c;不同模态的数据可以直接相互比较。本文提出了一种新的对抗性跨模态检索&#xff08;ACMR&#xff09;方法&#xff0c;它在对抗性学习的基础上寻求有效的共同子空间…...

编程日记 2023/3/10 10:17:09

计算机网络复习

什么是DHCP和DNS DNS(Domain Name System&#xff0c;域名系统)&#xff0c;因特网上作为域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使用户更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。通过主机名&#xff0c;最终得到该主机名对应的…...

编程日记 2023/3/10 10:16:04

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2026/2/8 15:03:14

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2026/1/25 10:41:07

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2026/1/31 7:42:50