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

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 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

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情

    2022-8-15 10:58
  • 签到天数: 1 天

    [LV.1]初来乍到

    9

    主题

    80

    回帖

    87

    积分

    初级工程师

    积分
    87

    新人报道油中3周年挑战者 lv1

    发表于 2022-5-11 10:24:18 | 显示全部楼层
    第一个vue
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-5-11 23:17:26 | 显示全部楼层
    山东曹县牛皮666我的宝贝
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    发表回复

    本版积分规则

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