Vue2指令原理手写

文件结构

index.js

/** @Author: RealRoad* @Date: 2024-10-31 17:13:50* @LastEditors: Do not edit* @LastEditTime: 2024-10-31 17:15:57* @Description: * @FilePath: \project_10_08\vite-project\src\testVue\index.js*/
import Vue from './Vue.js'
window.Vue=Vue

Vue.js

import Compile from './Compile.js'
import observe from './observe.js'
export default class Vue{constructor(options){//把参数options对象存为$optionsthis.$options = options ||{}//数据this._data=options.data || undefined;Observe(this._data)//数据要变为响应式的//模板编译new Compile(options.el,this)}
}

Compile.js

/** @Author: RealRoad* @Date: 2024-10-31 16:25:34* @LastEditors: Do not edit* @LastEditTime: 2024-10-31 16:28:44* @Description: * @FilePath: \project_10_08\vite-project\src\testVue\Compile.js*/
export default class Compile{constructor(el,vue){//vue实例this.$vue=vue;//挂载点this.$el=document.querySelector(el)if(this.$el){//调用函数,让节点变为fragment,类似与mustache中的tokens。//实际上用的是AST,这里就是轻量级的,fragmentlet $fragment= this.node2Fragment(this.$el);//编译this.compile($fragment);}
}node2Fragment(el){var fragment=document.createDocumentFragment();var child;//el为第一个子元素,循环添加到fragment中//让所有dom节点都添加到fragment中while(child=el.firstChild){fragment.appendChild(child);}return fragment}compile(el){//获取所有子节点var childNodes=el.childNodes;var self=this//遍历所有子节点for(let i=0,len=childNodes.length;i<len;i++){let node=childNodes[i];//判断是否是元素节点if(node.nodeType===1){self.compileElement(node);}else if(node.nodeType===3){self.compileText(node);}}}compileElement(node){//获取所有属性节点var attributes=node.attributes;//类数组变为数组[].slice.call(attributes).forEach(attr=>{if(attr.name==="v-model"){//获取属性值var value=attr.value;node.addEventListener("input",()=>{this.$vue[value]=node.value})}else if(attr.name==="v-text"){node.textContent=this.$vue[attr.value]}else if(attr.name==="v-html"){node.innerHTML=this.$vue[attr.value]}else if(attr.name==="v-bind"){node.setAttribute(attr.value,this.$vue[attr.value])}else if(attr.name==="v-on"){node.addEventListener(attr.value,()=>{})}else if(attr.name==="v-show"){node.style.display=this.$vue[attr.value]===true?"":"none"}else if(attr.name==="v-if"){node.style.display=this.$vue[attr.value]===true?"":"none"}})}compileText(){}
}

 

 

 

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

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

相关文章

手游和应用出海资讯:可灵AI独立APP即将上架;Rollic在英国推出芭比合并解谜手游

NetMarvel帮助游戏和应用广告主洞察全球市场、获取行业信息&#xff0c;以下为10月第四周资讯&#xff1a; ● 苹果开发全新游戏中心应用 ● Meta计划开发人工智能搜索引擎 ● 微软已拥有20个游戏IP&#xff0c;收入达10亿美元 ● OpenAI计划在12月推出其下一代前沿模型Orion ●…

笔记-利率学习记录

利率、通货膨胀与经济运行 利率政策的经济效应 假设所有利率一样&#xff0c;把利率降到 0 会带来一系列影响&#xff1a; 降低储蓄意愿&#xff1a;随着利率接近于 0&#xff0c;人们存钱的收益减少&#xff0c;倾向于消费和投资。增加企业盈利&#xff1a;融资成本降低&…

九,数据类型存储

1、简单类型与复杂类型 简单类型又叫做基本数据类型或者值类型&#xff0c;复杂类型又叫做引用类型 值类型&#xff1a;简单数据类型/基本数据类型&#xff0c;在存储时变量中存储的时值本身&#xff0c;因此叫做值类型 string、number、boolean、undefined、null 注意&…

电通旗下VeryStar连摘Campaign 亚太科技MVP及鼎革奖两项大奖

近日&#xff0c;电通CXM&#xff08;客户体验管理&#xff09;旗下费芮互动VeryStar开发的OmniRetail零售数字化平台及其中的OmniCRM分别摘得重磅奖项。OmniCRM在Campaign亚太2024年度亚太地区Tech MVP中当选“最有价值科技产品”&#xff0c;OmniRetail荣获“2024「鼎革奖」数…

[ 应急响应靶场实战 ] VMware 搭建win server 2012应急响应靶机 攻击者获取服务器权限上传恶意病毒 防守方人员应急响应并溯源

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

在应用开发中&#xff0c;动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能&#xff0c;允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。 关键词 Animation 组件动画效果位置动画自动动画缩放动画 一…

2024年一带一路金砖技能大赛之大数据容器云开发

10.31备赛准备 C模块&#xff0c;大数据应用开发 1.前端Vue----请求服务端api接口json数据-----展示/图表 2.Node.js实现后端开发&#xff0c;为前端vue提供接口数据 3.部署在docker中 官方技能需求 创建vue框架项目 1、安装node.js&#xff08;https://nodejs.org/zh-cn/d…

C++ 内存对齐:alignas 与 alignof

一、什么是内存对齐&#xff1f; 内存对齐是指数据在内存中按照特定的字节边界存储。一般情况下&#xff0c;处理器从内存读取数据时会更高效地读取对齐的数据。如果数据未对齐&#xff0c;处理器可能需要进行额外的内存访问&#xff0c;导致性能下降。对于某些平台&#xff0…

嵌入式linux系统中串口驱动框架分析

大家好,今天主要给大家分享一下,如何使用linux系统中的串口实现。 第一:串口基本简介 串口是很常见的一个外设,在Linux下通常通过串口和其他设备或传感器进行通信。根据电平的不同,串口可以分为TTL和RS232。不管是什么样的电平接口,驱动程序是一样的。 第二:Linux下UAR…

MongoDB 8.0.3版本安装教程

MongoDB 8.0.3版本安装教程 一、下载安装 1.进入官网 2.选择社区版 3.点击下载 4.下载完成后点击安装 5.同意协议&#xff0c;下一步 6.选择第二个Custon&#xff0c;自定义安装 7.选择安装路径 &#xff01;记住安装路径 8.默认&#xff0c;下一步 9.取…

【力扣专题栏】面试题 01.02. 判定是否互为字符重排,如何利用数组模拟哈希表解决两字符串互排问题?

题解目录 1、题目描述解释2、算法原理解析3、代码编写(1)、两个数组分别模拟哈希表解决(2)、利用一个数组模拟哈希表解决问题 1、题目描述解释 2、算法原理解析 3、代码编写 (1)、两个数组分别模拟哈希表解决 class Solution { public:bool CheckPermutation(string s1, stri…

测长机在测量长度尺寸方面有哪些优势?如何保证测量的准确性?

测长机在测量长度尺寸方面具有以下优势&#xff1a; 一、高精度 1.分辨力高&#xff1a; 测长机通常具有很高的分辨力&#xff0c;能够精确测量到非常小的长度变化。例如&#xff0c;一些高精度测长机的分辨力可以达到微米甚至纳米级别&#xff0c;能够满足对精密工件和高精度…

人脑与机器连接:神经科技的伦理边界探讨

内容概要 在当今科技飞速发展的时代&#xff0c;人脑与机器连接已成为一个引人注目的前沿领域。在这一背景下&#xff0c;神经科技的探索为我们打开了一个全新的世界&#xff0c;从脑机接口到人工智能的飞跃应用&#xff0c;不仅加速了技术的进步&#xff0c;更触动了我们内心…

kd树的原理简述

1️⃣定义&#xff1a;给定一个二叉树与点集 P { x 1 , x 2 , . . . , x N } ⊆ R 2 P\{x_1,x_2,...,x_N\}\subseteq{}\mathbb{R}^2 P{x1​,x2​,...,xN​}⊆R2 对应关系&#xff1a; { 叶结点 i ↔ 一一对应 点 x i 中间结点 u ↔ 一多对应 以 u 为根子树的叶结点 ( P u ) ↔…

liunx CentOs7安装MQTT服务器(mosquitto)

查找 mosquitto 软件包 yum list all | grep mosquitto出现以上两个即可进行安装&#xff0c;如果没有出现则需要安装EPEL软件库。 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm查看 mosquitto 信息 yum info mosquitto安装 mosquitt…

Qt Designer客户端安装和插件集(pyqt5和pyside2)

GitHub - PyQt5/QtDesignerPlugins: Qt Designer PluginsQt Designer Plugins. Contribute to PyQt5/QtDesignerPlugins development by creating an account on GitHub.https://github.com/PyQt5/QtDesignerPlugins 一、下载客户端 https://github.com/PyQt5/QtDesigner/rel…

操作系统进程的描述与控制习题

1.什么是前趋图?为什么要引入前趋图? 前趋图(Precedence Graph)是一个有向无循环图&#xff0c;记为DAG(DirectedAcyclic Graph) 用于描述进程之间执行的前后关系 2.画出下面四条语句的前趋图 S1 a: x y; S2 b: z 1; S3 c: a - b; S4 w: c 1;3.什么程序并发执行…

第三十一章 Vue之路由(VueRouter)

目录 一、引言 1.1. 路由介绍 二、VueRouter 三、VueRouter的使用 3.1. 使用步骤&#xff08;52&#xff09; 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vue 3.2.3. Friend.vue 3.2.4. My.vue 3.2.5. Find.vue 一、引言 1.1. 路由介绍 Vue中路由就是路径和组件的映…

精准选型跨境客服,网页服务更高效

跨境网页客服系统选型需考虑语言、功能、友好性及合规性。ZohoSalesIQ凭多语言支持、友好界面、移动兼容及数据保障成为优选&#xff0c;助力企业提升客户体验、高效沟通并满足数据安全需求。 一、跨境网页客服系统的重要性 1、提升客户体验 在跨境电商中&#xff0c;客户体验…

Pinia-状态管理

Pinia-状态管理 特点&#xff1a; 1. 轻量和模块化 Pinia 是一个轻量级的状态管理库&#xff0c;支持模块化管理&#xff0c;即可以将应用的状态分成多个 store 以实现更好的组织。使用 Pinia&#xff0c;可以定义多个 store&#xff0c;每个 store 都是一个独立的模块&#x…