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

李恒道

前言

其实大部分库最后归根结底还是一个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

结语

撒花~

unity韩

第一个vue

wwwwwllllk

山东曹县牛皮666我的宝贝