手撕Vue-构建Vue实例

前言

要想使用Vue必须先创建Vue的实例, 创建Vue的实例通过new来创建, 所以说明Vue是一个类, 所以我们要想使用自己的Vue, 就必须定义一个名称叫做Vue的类。

只要创建好了Vue的实例,Vue就会根据指定的区域和数据,去编译渲染这个区域,所以我们需要在自己编写的Vue实例中拿到数据和控制区域,去编译渲染这个区域。

!> 注意点:创建Vue实例的时候指定的控制区域可以是一个ID名称, 也可以是一个Dom元素

指定控制区域是一个ID名称的情况:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <p>{{ name }}</p>
    <p>{{age}}</p>
    <ul>
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            name: "BNTang",
            age: 33
        }
    });
</script>
</body>
</html>

指定控制区域是一个Dom元素的情况:

<script>
    let vue = new Vue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });
</script>

测试结果不展示了。

!> 注意点:Vue实例会将传递的控制区域和数据都绑定到创建出来的实例对象上($el/$data

<script>
    let vue = new Vue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });
    console.log(vue.$el);
    console.log(vue.$data);
</script>

注意点介绍完了,我们开始手撕Vue吧。经过上面的分析,我们知道Vue是一个类,所以我们需要定义一个名称叫做Vue的类,我这里叫 Nue。

class Nue {
    constructor(options) {
    }
}

分析一下 Vue,我们在创建 Vue 实例的时候传递的是一个对象,所以我这里在构造函数中用 options 来接收这个对象。

然后对象中有两个属性,一个是 el,一个是 data,我们需要将这两个属性挂载到 Nue 的实例上,所以我们需要在构造函数中定义两个属性,一个是 $el,一个是 $data

$el 是一个 Dom 元素,我们需要将传递的 el 转换成 Dom 元素,所以我们需要判断一下传递的 el 是一个字符串还是一个 Dom 元素,如果是字符串,我们就通过 querySelector 来获取这个 Dom 元素,如果是 Dom 元素,我们就直接将这个 Dom 元素赋值给 $el。

$data 是一个对象,我们直接将传递的 data 赋值给 $data。

所以我这里封装了一个方法用于判断 $el 是否是一个元素,方法名叫做 isElement:

isElement(node) {
    return node.nodeType === 1;
}

封装之后我们的代码就变成了这样:

class Nue {
    constructor(options) {
        if (this.isElement(options.el)) {
            this.$el = options.el;
        } else {
            this.$el = document.querySelector(options.el);
        }
        this.$data = options.data;
    }

    isElement(node) {
        return node.nodeType === 1;
    }
}

接下来我们调用我们自己的 Nue 类,看看是否能够正常的创建 Vue 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/nue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"/>
    <p>{{ name }}</p>
    <p>{{age}}</p>
    <ul>
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>
</div>

<script>
    let vue = new Nue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });

    console.log(vue.$el);
    console.log(vue.$data);
</script>
</body>
</html>
posted @   BNTang  阅读(70)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
  1. 1 总会有人离开 王巨星
  2. 2 月亮 孟凡明
  3. 3 迟里乌布
  4. 4 我只能离开 颜人中
  5. 5 达尔文 蔡健雅
  6. 6 夜色滚烫 叶明净
  7. 7 你的星环 路飞文
  8. 8 不再说话 三块木头
  9. 9 黄昏 粥粥和小伙/粥粥
  10. 10 爱不单行 刘大拿
  11. 11 心动贩卖机 PIggy
  12. 12 别来无恙 苏星婕
  13. 13 我们的歌 刘大拿
  14. 14 一直很安静 王贰浪
  15. 15 去有风的地方 清音
  16. 16 雪 Distance Capper/罗言
  17. 17 坏女孩 徐良/小凌
  18. 18 乐园 沧桑Cang333/虎皮蛋/曲甲
  19. 19 Ayo(Explicit) Chris Brown/Tyga
  20. 20 我的美丽feat.海洋Bo 海洋Bo/高睿
  21. 21 世事可爱 粥粥和小伙/粥粥
  22. 22 我记得 赵雷
  23. 23 我想牵着你的手 许嵩
  24. 24 人们都不懂 刘诺然
  25. 25 寻一个你(电视剧《苍兰诀》温情主题曲) TTTTTeehom
  26. 26 子莫格尼 杉和
  27. 27 Cat Cafe Shoffy
  28. 28 风停了雨停了我们还拥抱着 Superluckyqi
  29. 29 寂寞沙洲冷 于潼
  30. 30 三国恋 王巨星
  31. 31 达尔文 林俊杰
  32. 32 有些 颜人中
  33. 33 小模样 张小只ya
  34. 34 是否 程响
  35. 35 楼顶上的小斑鸠 队长
  36. 36 笑场 薛之谦
  37. 37 还是分开 张叶蕾
  38. 38 修炼爱情 林俊杰
  39. 39 二零三 毛不易
  40. 40 雅俗共赏 许嵩
  41. 41 Serendipity 古瑞斯Graps/Zakiya晴子
  42. 42 就让这大雨全都落下·2023 刘大拿
  43. 43 老男孩 筷子兄弟
  44. 44 有何不可 许嵩
  45. 45 缓缓 杜宣达
  46. 46 好久不见 陈奕迅
  47. 47 爱的魔法(Cover 金莎) 封茗囧菌
  48. 48 在你的身边 盛哲
  49. 49 带我去找夜生活 告五人
  50. 50 假面舞会 很美味
  51. 51 STAY The Kid LAROI/Justin Bieber
  52. 52 我好想睡觉的 无敌西红柿
  53. 53 日不落(温柔版)
  54. 54 恋爱画板 锦零
  55. 55 7710 好乐无荒/尹露浠
  56. 56 给你呀(又名:for ya) 蒋小呢
  57. 57 Love Story Taylor Swift
  58. 58 Plain Jane(Remix 13z) 鱼幼微
  59. 59 晚风 7opy/BT07
  60. 60 拜托 孙晨
  61. 61 乌梅子酱 李荣浩
  62. 62 南半球与北海道 范倪Liu
  63. 63 星河万里 Rom邢锐
南半球与北海道 - 范倪Liu
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Loading

点击右上角即可分享
微信分享提示