Vue2指令原理手写

news2024/11/5 18:18:22

文件结构

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对象存为$options
        this.$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,这里就是轻量级的,fragment
           let $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.coloradmin.cn/o/2229375.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

信而泰防火墙安全测试解决方案:为网络安全保驾护航

在当今数字化时代&#xff0c;网络安全至关重要。防火墙作为网络安全的第一道防线&#xff0c;其性能和可靠性直接影响到网络的安全性。信而泰提供的防火墙安全测试解决方案&#xff0c;旨在通过全面的测试流程&#xff0c;确保防火墙能够高效、准确地执行其安全任务。 针对防火…

我在命令行下剪辑视频

是的&#xff0c;你不需要格式工厂&#xff0c;你也不需要会声会影&#xff0c;更不需要爱剪辑这些莫名其妙的流氓软件&#xff0c;命令行下视频处理&#xff0c;包括剪辑&#xff0c;转码&#xff0c;提取&#xff0c;合成&#xff0c;缩放&#xff0c;字幕&#xff0c;特效等…

攻防世界5

cgpwn2 发现是32位文件 打开main函数发现hello双击进入 这里我们发现栈溢出了&#xff0c;双击name 我们发现了bss 发现这题的system有点问题&#xff0c;后门需要我们自己输入&#xff0c;刚好有bss我们直接用它 知道system的地址 exp: from pwn import * context(oslinux,a…

vue项目中如何在路由变化时增加一个进度条

在 Vue.js 项目中&#xff0c;使用路由&#xff08;如 Vue Router&#xff09;时&#xff0c;为了提升用户体验&#xff0c;你可能会想要在路由变化时显示一个进度条。这可以通过多种方式实现&#xff0c;其中一种流行的做法是使用第三方库&#xff0c;如 vue-loading-bar 或 n…

红米K70至尊版修复“nv损坏”主板电阻图示 mtk芯片工程固件刷写与步骤说明

💝💝💝红米K70至尊版 机型代码:rothko,搭载天玑9300+旗舰芯片.后置5000万像素索尼IMX906高动态OIS主摄,800万像素超广角镜头,200万像素微距镜头,前置2000万像素摄像头,也适用于以下型号的小米机型:2407FPN8EG, 2407FPN8ER, XIG06, A402XM, 2407FRK8EC。 💝💝…

qt QSlider详解

1、概述 QSlider是Qt框架中的一个控件&#xff0c;它允许用户通过拖动滑块来选择一个范围内的值。这个控件在用户界面中非常常见&#xff0c;通常用于调整音量、亮度、进度等需要连续数值输入的场景。QSlider提供了水平和垂直两种方向&#xff0c;可以根据需要选择合适的方向。…

D54【python 接口自动化学习】- python基础之模块与标准库

day54 第三方模块的使用 学习日期&#xff1a;20241031 学习目标&#xff1a;模块与标准库 -- 69 第三方模块的使用&#xff1a;如何使用其他人编写的代码&#xff1f; 学习笔记&#xff1a; 第三方模块的安装 虚拟环境 加速第三方模块的安装 总结 第三方模块使用pip命令进…

Python毕业设计选题:基于Django+Vue的图书馆管理系统

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 系统首页 图书馆界面 图书信息界面 个人中心界面 后台登录界面 管理员功能界面 用户…

李跳跳 2.4 | 最新蓝色版,附加3000条规则

李跳跳是一款非常好用的可以跳过广告的神器&#xff0c;今天软件已经更新到了2.4最新的蓝色版本&#xff0c;支持更多的规则&#xff0c;能够为你全面地去除广告。李跳跳是一款十分实用的去除广告工具软件&#xff0c;软件的开屏广告都可以在这里一键去除&#xff0c;而且软件是…

做反向代购,采购订单应该怎么批量管理?

在反向代购这片充满商机的蓝海中&#xff0c;代购企业们正驾驶着各自的航船&#xff0c;奋力驶向成功的彼岸。然而&#xff0c;当订单如繁星点点般密布在夜空中时&#xff0c;如何高效地管理这些采购订单&#xff0c;便成为了决定船只是否能平稳前行的关键。 想象一下&#xff…

【分布式技术】分布式事务深入理解

文章目录 概述产生原因关键点 分布式事务解决方案3PC3PC的三个阶段&#xff1a;3PC相比于2PC的改进&#xff1a;3PC的缺点&#xff1a; TCCTCC事务的三个阶段&#xff1a;TCC事务的设计原则&#xff1a;TCC事务的适用场景&#xff1a;TCC事务的优缺点&#xff1a;如何解决TCC模…

字符串逆序(c语言)

错误代码 #include<stdio.h>//字符串逆序 void reverse(char arr[], int n) {int j 0;//采用中间值法//访问数组中第一个元素和最后一个元素//交换他们的值&#xff0c;从而完成了字符串逆序//所以这个需要临时变量for (j 0; j < n / 2; j){char temp arr[j];arr[…

四足机器人实战篇之二十三:四足机器人支撑腿反作用力规划之VMC解耦控制方法

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、分解式VMC 的实现原理1.虚拟力的定义2.虚拟力分配方法3.在每个需要控制的自由度上构造恰当的虚拟构件以产生合适的虚拟力(1)计算虚拟力的方法…

【VS中Git同步提交 报错:访问.vs/FileContentIndex/xxx.vsidx权限不允许】

参考&#xff1a; Git commit vsidx file access denied in Visual Studio 一劳永逸的方法&#xff1a; 在VSCode里&#xff0c;Git->设置->选项&#xff1a;编辑.gitignore文件&#xff0c;如下图&#xff1a; 忽略整个.vs文件夹&#xff0c;再重新提交就不会有涉及…

[java][高级]FilterListenerAjax

Filter&Listener&Ajax 目标&#xff1a; 能够使用 Filter 完成登陆状态校验功能 能够使用 axios 发送 ajax 请求 熟悉 json 格式&#xff0c;并能使用 Fastjson 完成 java 对象和 json 串的相互转换 1&#xff0c;Filter 1.1 Filter概述 Filter 表示过滤器&#…

计算机网络——网络拥塞

让网络尽可能不拥塞 哪些指标标示网络可能发生拥塞呢&#xff08;靠端系统的判断&#xff09; 1.超时 2.收到三个冗余的ACK确认 网络拥塞的特点 如果网络拥塞不加控制的话&#xff0c;会让网络加速变快 ER字段 &#xff1a;表示交换设备能够提供多少的带宽——存储的是源端…

MiniWord

1.nuget 下载配置 2.引用 3. var value = new Dictionary<string, object>() { ["nianfen"] = nianfen, ["yuefen"] = yuefen, ["yuefenjian1"] = (int.Par…

Android启动流程_SystemServer阶段

前言 上一篇文档我们描述了在 Android 启动流程中 Zygote 部分的内容&#xff0c;从 Zygote 的配置、启动、初始化等内容展开&#xff0c;描述了 Zygote 在 Android 启动中的功能逻辑。本篇文档将会继续 Android 启动流程的描述&#xff0c;从 SystemServer 进程的内容展开&am…

启动任务节点时,传入机械臂参数

MoveIt2_tutorial-Examples-Planning Scene ROS API 先启动move_group节点&#xff0c;后启动任务节点 方式1&#xff1a; 直接传入参数文件的地址 from launch import LaunchDescription # 导入启动描述&#xff0c;用于描述启动文件的结构 from launch_ros.actions impor…

HarmonyOS NEXT星河版笔记--ArkTS篇(1)

一、概念 ArkTS&#xff1a;是一门用于开发鸿蒙应用的编程语言 console.log(我说,HelloWorld) 二、认识数据 2.1.基础数据类型 string字符串描述信息number数字计算boolean布尔判断&#xff08;真、假&#xff09; 2.2.存储数据 存储数据包括变量和常量。 2.2.1.变量&a…