手撕Vue-数据驱动界面改变下

经过上一篇的介绍,数据驱动界面改变 v-model 的双向绑定已告一段落, 剩余的就以这篇文章来完成。

首先完成我们的 v-html,v-text, 其实很简单,就是将我们之前的 v-model 创建观察者的方法,在 v-html 和 v-text 中再写一次即可,创建属于 v-html 和 v-text 的观察者。

v-html:

html: function (node, value, vm) {
    new Watcher(vm, value, (newValue, oldValue) => {
        node.innerHTML = newValue;
    });
    node.innerHTML = this.getValue(vm, value);
},

v-text:

text: function (node, value, vm) {
    new Watcher(vm, value, (newValue, oldValue) => {
        node.innerText = newValue;
    });
    node.innerText = this.getValue(vm, value);
},

测试一下 v-html,打开浏览器控制台,输入 vue.$data.html = '<p>我是测试v-html<p/>',可以看到界面上的内容已经改变了。

image-20231019224801735

测试一下 v-text,打开浏览器控制台,输入 vue.$data.text = '<p>我是测试v-text<p/>',可以看到界面上的内容已经改变了。

image-20231019224912964

好了到此为止,指令的数据驱动界面改变已经完成了,接下来我们来完成模板语法的数据驱动界面改变。

这个就与之前的指令的数据驱动界面改变不同了,好了先不说问题,我们先直接来看代码一步一步分析。

我看了下之前处理 content 的代码发现,获取不到对应的属性名称叫什么,因为是直接调用 this.getContent(vm, value); 获取的,所以会出现一个问题就是给 content 创建观察者对象的时候不能直接告诉他我要监听的是哪个属性,所以我就想到了一个办法。

首先将之前的代码注释掉,再然后我编写一个正则表达式,关于这个正则表达式在之前的文章中有讲到,大概意思就是匹配 {{}} 中的内容,这里就不再赘述了。

let reg = /\{\{(.+?)\}\}/gi;

继续往下看,我利用 value 调用了 replace 方法,传递了两个参数,第一个参数是刚刚编写的正则表达式,第二个参数是一个函数,这个函数的作用就是将匹配到的内容替换成对应的值,我先将其返回值打印出来,看看是什么,我们的代码就可以写成这样。

content: function (node, value, vm) {
    // console.log(value); // {{ name }} -> name -> $data[name]
    // node.textContent = this.getContent(vm, value);

    let reg = /\{\{(.+?)\}\}/gi;

    value.replace(reg, (...args) => {
        console.log(args[1].trim());
    });
}

image-20231019230456960

是的,我们的确获取到了对应的属性名称,接下来我们就可以利用这个属性名称来创建观察者对象了,我们的代码就可以写成这样。

content: function (node, value, vm) {
    // console.log(value); // {{ name }} -> name -> $data[name]
    // node.textContent = this.getContent(vm, value);

    let reg = /\{\{(.+?)\}\}/gi;

    node.textContent = value.replace(reg, (...args) => {
        const attr = args[1].trim();
        new Watcher(vm, attr, (newValue, oldValue) => {
            node.textContent = this.getContent(vm, value);
        });
        return this.getValue(vm, args[1]);
    });
}

好了,我们来测试一下,打开浏览器控制台,输入 vue.$data.name = '我是测试 {{ name }}',可以看到界面上的内容已经改变了。

image-20231019230944283

一切看起来都很完美,最终版代码其实是我没有将坑点说出来,现在我们来看看这个坑点是什么,再看之前,我来讲述一下为什么是又调用了 this.getContent 方法而不是直接将 newValue 赋值给 node.textContent。

假如我们的数据结构是这样的 {{ name }} - {{ age }} 如果是通过直接将 newValue 赋值给 node.textContent 的话,这个时候呢,我假设 name 的值是 BNTang, age 的值是 33,那么界面上第一次加载的内容会是 BNTang - 33,但是如果我将 name 的值改成了 xhh,那么界面上的内容就会变成 xhh,这个时候 age 的值就丢掉了,如下图是我的测试结果。

image-20231019233644556

原因就是直接替换掉了,所以在动态更改 name 属性或者 age 属性其中一个的情况下,还需要将 {{ name }} - {{ age }} 这样的内容替换成 BNTang - 33,这样的话,我们就需要调用 this.getContent 方法,这个方法就会利用正则挨个匹配 {{}} 中的内容,然后再将其替换成对应的值,这样就不会出现上面的问题了。

?> 最后总结一下 content 函数的 value.replace 在外层是为了拿到属性名称,内层是为了保证数据完整性。

posted @   BNTang  阅读(591)  评论(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邢锐
坏女孩 - 徐良/小凌
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

编曲 : 徐良

作词 : 徐良

作曲 : 徐良

I miss you

Now

don't you love me

Sorry I'm so sorry

徐良:

那时我放开了的手

转过身只剩了保重

你话都没说却哭了很久很久

我喜欢坏坏的女友

我喜欢刺激的感受

你单纯太过多余了那些温柔

你消失在无名大街

从此就没有再见面

好长的时间再没有你的来电

在后来酒吧的房间

舞池里跳动着音乐

熟悉的侧脸喂

迷人的笑脸吸引视线

慵懒的靠在陌生的肩

黑色的眼线你的指间

有一点轻蔑

小凌:

在谁的怀中会有感觉

被爱的深夜我在想念

明明是为你才会改变

却回不到从前

徐良:

那时我放开了的手

转过身只剩了保重

你话都没说却哭了很久很久

我喜欢坏坏的女友

我喜欢刺激的感受

你单纯太过多余了那些温柔

你消失在无名大街

从此就没有再见面

好长的时间再没有你的来电

在后来酒吧的房间

舞池里跳动着音乐

熟悉的侧脸喂

迷人的笑脸吸引视线

慵懒的靠在陌生的肩

黑色的眼线你的指间

有一点轻蔑

小凌:

在谁的怀中会有感觉

被爱的深夜我在想念

明明是为你才会改变

却回不到从前

徐良:

然后我安静的发现

两个人已经没有任何语言

曾经你纯真的永远

让我不顾一切开始怀念

迷人的笑脸吸引视线

慵懒的靠在陌生的肩

黑色的眼线你的指间

有一点轻蔑

小凌:

在谁的怀中会有感觉

被爱的深夜我在想念

明明是为你才会改变

却回不到从前

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