[油猴脚本开发指南]v-show

李恒道 · 发表于 2021-10-12 19:32:04

v-show

我们可以看一下代码

let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
          <button  @click='ModifyStatus'>Modify</button>
          <span v-show='!controlshow'>我是谁？</span>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
    data() {
        return {
            controlshow: false,
        }
    },
    methods:{
        ModifyStatus(){
            this.controlshow=!this.controlshow
        },

    }
}
const app = Vue.createApp(Counter);
app.mount("#app");

这里我们使用了v-show

注意

v-show没有v-else

v-show与v-if的区别

v-if为一旦显示为真则开始渲染，而v-show使用的是display:none;

在频繁切换的时候v-if的消耗更大

而在初始化的时候，如果v-if为假则不会渲染，而v-show无论是否真假都会渲染，所以初始化的成本更大。

在合适的时候选择合适的指令。

王一之 · 发表于 2021-10-12 20:29:59

这和油猴也没啥关系啊？

lty123 · 发表于 2021-10-12 21:29:23

上vue啦哈哈哈哈

涛之雨 · 发表于 2021-10-13 22:04:25

本帖最后由涛之雨于 2021-10-13 22:07 编辑

油猴配合vue的全局注入css简直就是灾难

如果插入vue的话，
注入的vue默认的css需要局部生效，因此我选择shadowdom来隔离植入的部分。
但是字体需要全局生效。。。。

shadowdom中设置字体不知道为啥不生效，必须全局注入才行，不知道是不是我哪里没搞对。。。
主要就是那些iconfont。。。。没有iconfont的vue没有灵魂

cxxjackie · 发表于 2021-10-14 00:18:43

涛之雨发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...

其实我也不赞成在脚本中引入vue这类框架，除非页面中本来就有。shadowDOM的字体设置成根节点的内联样式就行了吧，注入css的话，加一个:host？反正我直接注入没碰到问题。

李恒道 · 发表于 2021-10-14 09:14:07

涛之雨发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...

我用油猴+vue还比较少
还没碰到这个问题...

李恒道 · 发表于 2021-10-14 09:15:50

cxxjackie 发表于 2021-10-14 00:18
其实我也不赞成在脚本中引入vue这类框架，除非页面中本来就有。shadowDOM的字体设置成根节点的内联样式就 ...

其实引入vue我是主要想是反复操作dom有点操作恶心了，引入vue感觉能舒服一点
占用确实很大，但是他舒服啊，呜呜呜呜

李恒道 · 发表于 2021-10-14 09:22:30

涛之雨发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...

大佬有例子围观一下css的问题么
我目前还没碰到过这个问题...
我是vue+element，测试了几次好像都还可以

上次webpackjsonp的问题认真学完了！

cxxjackie · 发表于 2021-10-14 09:30:05

李恒道发表于 2021-10-14 09:15
其实引入vue我是主要想是反复操作dom有点操作恶心了，引入vue感觉能舒服一点
占用确实很大，但是他舒服啊 ...

这个问题，可以自己写一个小型的框架来解决嘛，这些大型框架是针对大环境开发的，而油猴有自己特殊的环境（各类GM函数、unsafeWindow等等），直接套用多多少少会产生一些问题，我觉得更有价值的是研究这些框架是怎么实现的，然后尝试自己实现一些。

王一之 · 发表于 2021-10-14 09:32:09

涛之雨发表于 2021-10-13 22:04
油猴配合vue的全局注入css简直就是灾难
如果插入vue的话，
注入的vue默认的css需要局部生效，因此 ...

shadowdom 又学到了