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

Vue引入与Vue拦截原理

news 2026/2/7 7:10:05

1. vue引入

  • 第一种方法：在线引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 第二种方法：本地引入

 2. Vue拦截原理——例题

  • el用于绑定id，data用于定义数据
  • 如下例题
  •  

<!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="../vue/vue.js"></script>
</head><body><div id="box">{{10+20}}{{ myname}}</div><script>new Vue({el: "#box",data:{//定义mynamemyname:"lyx"}})</script></body></html>
  •  el用于绑定id，如果没有绑定，{{}}符号里面的内容是照常显示
  • 把vue对象挂载到实例上

运行如下：

如下在控制台直接通过刚刚定义的vm实例vm.myname来修改值

 接下来是刚刚代码实现的底层逻辑，具体是涉及到一个Object.defineProperty()方法

  •  
  • Object.defineProperty()对于每一个Object实例都会执行get和set，例如这里是修改和获取obj参数的myname值
  •  

<body><div id="box"></div><script>var obj = {}var mybox = document.getElementById("box");//通过defineProperty方法来为其参数obj做get和setObject.defineProperty(obj,"myname",{get(){console.log("get");return mybox.innerHTML;},set(value){console.log("set",value);mybox.innerHTML = value;}})</script></body>

Object.defineProperty()方法的缺点：

  1.  无法监听es6的Set、Map变化；
  2. 无法监听Class类型的数据；
  3. 无法监听属性的新加&删除；（未在vue对象的data中定义的属性不监听）
  4. 无法监听数组元素的增加和删除。
  •  
  •  

相关文章：

Vue引入与Vue拦截原理

1. vue引入 第一种方法&#xff1a;在线引入 <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 第二种方法&#xff1a;本地引入 2. Vue拦截原理——例题 el用于绑定id&#xff0c;data用于定义数据如下例题 <!DOCTYPE html&…...

编程日记 2023/8/2 10:38:18

2023年电赛---运动目标控制与自动追踪系统（E题）OpenMV方案

前言 &#xff08;1&#xff09;废话少说&#xff0c;很多人可能无法访问GitHub&#xff0c;所以我直接贴出可能要用的代码。此博客还会进行更新&#xff0c;先贴教程和代码 &#xff08;2&#xff09;视频教程&#xff1a; https://singtown.com/learn/49603/ &#xff08;3&a…...

编程日记 2023/8/2 10:37:17

6G内存运行Llama2-Chinese-7B-chat模型

6G内存运行Llama2-Chinese-7B-chat模型 Llama2-Chinese中文社区 第一步&#xff1a; 从huggingface下载 Llama2-Chinese-7b-Chat-GGML模型放到本地的某一目录。 第二步&#xff1a; 执行python程序 git clone https://github.com/Rayrtfr/llama2-webui.gitcd llama2-web…...

编程日记 2023/8/2 10:36:16

项目经理必备-项目总体计划模板-制式文件，可直接填写使用-公司可用

合同中完整项目名称&#xff0c;黑体&#xff0c;28号字&#xff0c; 居中对齐&#xff0c;项目名称较长时换行填写 当前文档名称&#xff0c;黑体&#xff0c;小初&#xff0c; 居中对齐&#xff0c;文档名称较长时 换行填写 版 本 号 x.x 编制人 日期 20xx年xx月xx日…...

编程日记 2023/8/2 10:35:14

正则表达式系列|（以xx开头xx结尾提取、切分、替换）

正则表达式系列|&#xff08;以xx开头xx结尾提取、切分、替换&#xff09; 文章目录 正则表达式系列|&#xff08;以xx开头xx结尾提取、切分、替换&#xff09;[TOC] 前言一、以xx开头xx结尾进行数据处理&#xff1f;1.以xx开头xx结尾对文本拆分2.以xx开头xx结尾提取内容3.以xx…...

编程日记 2023/8/2 10:34:12

金融学复习博迪(第1-5章）

第一部分 金融和金融体系 第1章 金融学 金融&#xff1a;资金的流通&#xff0c;即储蓄&#xff0c;信贷、汇兑、股票和证券交易等经济活动的总称。 金融学&#xff1a;研究货币流通的学问。 传统的金融学研究领域大致有两个方向&#xff1a; >宏观层面的金融市场运行理论…...

编程日记 2023/8/2 10:33:10

【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

React 基础巩固(三十七)——自定义connect高阶组件 一、手撸一个自定义connect高阶组件 import { PureComponent } from "react"; import store from "../store";/*** connect的参数&#xff1a;* 参数一&#xff1a; 函数* 参数二&#xff1a; 函数* 返…...

编程日记 2023/8/2 10:32:09

前端PDF导出，使用html2Canvas和jsPDF插件

import html2Canvas from "html2canvas"; import jsPDF from "jspdf"; export function downloadPDF(dom, filename) {const scale 2;window.pageYOffset 0;// 滚动到顶部&#xff0c;避免打印不全document.documentElement.scrollTop 0;document.body.…...

编程日记 2023/8/2 10:31:07

Android 设备兼容性使用详解

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、设备兼容性分类二、硬件设备兼容三、软件 APP 兼容四、兼容不同语言五、兼容不同分辨率六、兼容不同屏幕方向布局七、兼容不同硬件 Feature八、兼容…...

编程日记 2023/8/2 10:30:05

vnc加固

0x00 认识VNC 先我们看看VNC运行的工作流程&#xff1a; VNC客户端通过浏览器或VNC　Viewer连接至VNC Server&#xff1b; VNC Server传送一个对话窗口至客户端&#xff0c;要求输入连接密码&#xff08;可能为空&#xff09;&#xff0c;以及存取的VNC Server显示装置&#…...

编程日记 2023/8/2 10:29:04

Windows下Nginx安装与配置教程

一、前言 1、Nginx是什么&#xff1f; Nginx是一个开源的Web服务器&#xff0c;同时Nginx也提供了反向代理和负载均衡的功能。 Nginx通常作为负载均衡器暴露在外网接受用户请求&#xff0c;同时也使用其反向代理的功能&#xff0c;将用户的请求转发到实际提供服务的内网服务器…...

编程日记 2023/8/2 10:28:04

Iterator迭代器和Generator生成器

Iterator迭代器和for/of循环原理 Iterator迭代器规范 自己创建一个Iterator类，来实现ES6中的迭代器规范： class Iterator {constructor(assemble) {// assemble：需要迭代的数据结构this.assemble = assemble// index：记录迭代的次数（或者索引）this.index = -1}// 必须具…...

编程日记 2023/8/2 10:27:02

Modbus-RTU协议C#实现

1、安装依赖包 System.IO.Ports 2、读协议 /// <summary>/// Modbus-RTU协议读实例/// </summary>private static void Read(){//组装一个请求报文// 01 03 00 00 00 0A C5 CDbyte slave 0x01;//byte function 0x03; //读单个寄存器byte function 0x01; //…...

编程日记 2023/8/2 10:26:00

Redis学习---大数据技术之Redis（NoSQL简介、Redis简介、Redis安装、五大数据类型、相关配置、持久化）

星光下的赶路人star的个人主页 毅力是永久的享受 文章目录 1、NoSQL1.1 NoSQL数据库1.1.1 NoSQL是什么1.1.2 NoSQL的特点1.1.3 NoSQL的适用场景1.1.4 NoSQL的不适场景 1.2 NoSQL家族 2、Redis简介2.1 Redis官网2.2 Redis是什么2.3 Redis的应用场景2.3.1 配合关系型数据库做高速…...

编程日记 2023/8/2 10:24:58

基于组合双向拍卖的共享储能机制研究(Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 2.1 算例数据 2.2 买家中标 2.3 卖家中标 &#x1f389;3 文献来源 &#x1f308;4 Matlab代码实现 &#x1f4a5;1 概述 文献来源&#xff1a; 摘要&#xff1a;为满足共享储能中储能用户的互补性和替代性需求、解决常规单…...

编程日记 2023/8/2 10:23:57

服务机器人有哪些品类

服务机器人是指具备自主运动、感知环境、实现人机交互等能力的机器人&#xff0c;它可以被应用于不同的场景&#xff0c;如餐饮、医疗、物流等行业。根据其功能和应用场景的不同&#xff0c;服务机器人可以分为以下几类&#xff1a;1. 餐饮服务机器人 随着社会发展和人们需…...

编程日记 2023/8/2 10:22:55

3.netty和protobuf

1.ChannelGroup可以免遍历由netty提供,覆盖remove方法即可触发删除channel\ 2.群聊私聊 13.群聊私聊简单原理图 3.netty心跳检测机制,客户端对服务器有没有读写(读,写空闲) //IdleStateHandler(3,5,7,TimeUnite.SECONDS)是netty提供的检测状态的处理器,也加到pipeline,读,写,…...

编程日记 2023/8/2 10:21:53

NLP实践——Llama-2 多轮对话prompt构建

NLP实践——Llama-2 多轮对话prompt构建 1. 问题提出2. prompt的正确形式3. 效果测试4. 结尾 1. 问题提出 最近&#xff0c;META开源了Llama-2模型&#xff0c;受到了广泛的关注和好评&#xff0c;然而&#xff0c;在官方给的使用说明中&#xff0c;并没有对使用方法进行特别细…...

编程日记 2023/8/2 10:20:51

《TCP IP网络编程》第十四章

第 14 章 多播与广播 14.1 多播 多播&#xff08;Multicast&#xff09;方式的数据传输是基于 UDP 完成的。因此 &#xff0c;与 UDP 服务器端/客户端的实现方式非常接近。区别在于&#xff0c;UDP 数据传输以单一目标进行&#xff0c;而多播数据同时传递到加入&#xff08;注…...

编程日记 2023/8/2 10:19:50

网络基础-认识每层的设备和每层的特点用途

目录 网络层次常见设备各层介绍数据链路层网络层传输层应用层 网络层次 常见设备 各层介绍 数据链路层 有了MAC地址。数据链路层工作在局域网中的&#xff0c;以帧为单位进行传输和处理数据。 网络层 网络层有了IP。不同的网络通过路由器连接成为互联网 路由器的功能: 　　…...

编程日记 2023/8/2 10:18:48

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/1/25 13:33:24

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30