上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]油猴脚本调用Vue

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-9-25 19:54:32 | 显示全部楼层 | 阅读模式

前言

其实大部分库最后归根结底还是一个js文件,常见的方法就是我们可以复制这个地址,在页面加载的过程中对其进行注入。

页面就会开始加载这个js文件。

当页面加载完毕之后我们再进行调用就好了

代码

let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);

window.onload=()=>{
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;width: 100px;height: 100px;">
           {{ message }}
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
     // app.use(ElementPlus);
      app.mount("#app");
}

这里我们一步一步来进行拆解

let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);

初始化一个有地址的sciprt标签,并且注入到页面中,注意这里我们使用了runat让其在页面开始尽早注入脚本。

然后添加了一个window.onload回调

text是其我们想插入的文本。

id="app"是为了让我们可以方便的找到元素

{{ message }}是属于vue的语法糖

只要在{{}}输入其变量或表达式,就会运行并返回其结果。

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)

创建了一个元素,并对其包裹,放置到body的末尾。

      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
     // app.use(ElementPlus);
      app.mount("#app");

这里的App是我们要对其进行初始化的操作以及数据。

data(){return 对象}

是一个vue的固定写法

我们在这个对象内填入数据,Vue将会从这个对象里寻找数据。

这里之所以需要函数返回,是因为放了一个页面同时启用多个组件,导致其数据发生共享,一个组件修改数据,N个相同的组件同样修改数据,因为对象是引用的,所以会发生这种情况。

而使用函数进行返回对象,相当于函数做了一个生成器,每次返回的对象都是再次生成的,这样每个组件都有一个属于自己的独立数据,不用担心出现数据污染问题。

const app = Vue.createApp(App);

对createApp传入了App对象,然后会返回给我们一个对象,接下来我们将其挂载上去,即通过

app.mount("#app");

进行挂载。

这两句是一个固定写法,并没有什么特殊意义,那么到这里我们就了解了如何在油猴中使用Vue

结语

撒花~

混的人。

发表回复

本版积分规则

快速回复 返回顶部 返回列表