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

Vue引入与Vue拦截原理

news 2025/12/22 16:34:33

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

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/12/22 8:30:07

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/12/16 3:23:56

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/12/14 22:06:49

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/11/25 4:57:19

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/12/22 8:54:25

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/12/13 4:39:40

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/12/12 13:14:21

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/12/16 1:40:33