如何修改vue模板数据源
本帖最后由 1102436355 于 2024-12-25 21:38 编辑在学习如何修改关于vue网站,比如b站的用户名是t.upInfo.name,如何将这个div引用的数据源改为用户签名t.upInfo.sign。
![控制台截图.jpg](data/attachment/forum/202412/25/213732o66h1h7161juq7d5.jpg)!(data/attachment/forum/202412/25/213752zryktqrrzb7vuo4v.jpg)!(data/attachment/forum/202412/25/213807y3qa1h3gekdkk3sq.jpg)![数据.jpg](data/attachment/forum/202412/25/213821uzxcswnbkydsuiin.jpg) 没太理解什么意思
想要改vue的渲染模板? 李恒道 发表于 2024-12-26 05:14
没太理解什么意思
想要改vue的渲染模板?
这个是叫渲染模板吗,不是很懂。vue渲染的时候这个div绑定的数据源可以更改吗?比如b站的up名称我需要他在渲染的时候就绑定签名。
我现在是通过开发者工具直接修改js用本地替代,但是这样关闭开发者工具后刷新网页又会读取原始js文件重新渲染。 李恒道 发表于 2024-12-26 05:14
没太理解什么意思
想要改vue的渲染模板?
哥哥,理我一下好吗{:4_94:} 1102436355 发表于 2024-12-26 21:02
哥哥,理我一下好吗
昨天出去玩了,哥哥别急,我晚上研究一下,但是不确定能不能行
凭感觉是可以 1102436355 发表于 2024-12-26 21:02
哥哥,理我一下好吗
大概有两个技术路线
一种是直接劫持render模板
根据源码调试可以看到
```js
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),
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数据
效果图
![图片.png](data/attachment/forum/202412/27/132238ap1xqp11f61d96n1.png)
插点代码`t.children.children.children.text='劫持测试'` 李恒道 发表于 2024-12-27 13:22
大概有两个技术路线
一种是直接劫持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,但是网页并没有变化{:4_92:} 1102436355 发表于 2024-12-27 23:39
哥哥,我用document.querySelector("#mirror-vdcon > div.right-container > div > div.up-panel-contain ...
forceUpdate强制渲染是对的
可能是你覆写错误或者其他原因
对render函数打个断点测试看看
页:
[1]