如何修改vue模板数据源

1102436355

本帖最后由 1102436355 于 2024-12-25 21:38 编辑

在学习如何修改关于vue网站，比如b站的用户名是t.upInfo.name，如何将这个div引用的数据源改为用户签名t.upInfo.sign。

李恒道

没太理解什么意思
想要改vue的渲染模板？

1102436355

李恒道 发表于 2024-12-26 05:14

没太理解什么意思
想要改vue的渲染模板？

这个是叫渲染模板吗，不是很懂。vue渲染的时候这个div绑定的数据源可以更改吗？比如b站的up名称我需要他在渲染的时候就绑定签名。
我现在是通过开发者工具直接修改js用本地替代，但是这样关闭开发者工具后刷新网页又会读取原始js文件重新渲染。

1102436355

李恒道 发表于 2024-12-26 05:14
没太理解什么意思
想要改vue的渲染模板？

哥哥，理我一下好吗

李恒道

1102436355 发表于 2024-12-26 21:02
哥哥，理我一下好吗

昨天出去玩了，哥哥别急，我晚上研究一下，但是不确定能不能行
凭感觉是可以

李恒道

1102436355 发表于 2024-12-26 21:02

哥哥，理我一下好吗

大概有两个技术路线
一种是直接劫持render模板
根据源码调试可以看到

            t.prototype._render = function() {
                var t, e = this, n = e.$options, r = n.render, i = n._parentVnode;
                i && (e.$scopedSlots = be(i.data.scopedSlots, e.$slots, e.$scopedSlots)),
                e.$vnode = i;
                try {
                    We = e,
                    t = r.call(e._renderProxy, e.$createElement)
                } catch (n) {
                    Wt(n, e, "render"),
                    t = e._vnode
                } finally {
                    We = null
                }
                return Array.isArray(t) && 1 === t.length && (t = t[0]),
                t instanceof yt || (t = bt()),
                t.parent = i,
                t
            }    

可以发现this.$options.render是渲染模板的存储位置

直接劫持render会得到返回的vnode元素，然后直接复写内容即可
另外一种可以发现你想劫持的在t._s(t.upInfo.name)
而 var t = this
劫持this._s也可以获得vnode数据
效果图

插点代码t.children[0].children[2].children[0].text='劫持测试'

1102436355

李恒道 发表于 2024-12-27 13:22
[md]大概有两个技术路线
一种是直接劫持render模板
根据源码调试可以看到

哥哥，我用document.querySelector("#mirror-vdcon > div.right-container > div > div.up-panel-container > div.up-info-container > div.up-info--right > div.up-info__detail > div").__vue__.$options.render 覆写后，如何重新渲染组件呢.百度搜索$forceUpdate是渲染函数，我尝试使用document.querySelector("#mirror-vdcon > div.right-container > div > div.up-panel-container > div.up-info-container > div.up-info--right > div.up-info__detail > div").__vue__.$forceUpdate，但是网页并没有变化

李恒道

1102436355 发表于 2024-12-27 23:39
哥哥，我用document.querySelector("#mirror-vdcon > div.right-container > div > div.up-panel-contain ...

forceUpdate强制渲染是对的
可能是你覆写错误或者其他原因
对render函数打个断点测试看看