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

Vue(10-20)

news 2025/12/19 20:31:15

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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/12/10 6:19:31

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/12/12 8:18:42

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/12/16 19:44:25

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/12/16 0:14:23

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/12/17 14:43:14

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25