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

[油猴脚本开发指南]vue组件

[复制链接]
  • TA的每日心情
    开心
    6 小时前
  • 签到天数: 59 天

    [LV.5]常住居民I

    354

    主题

    3139

    帖子

    3136

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3136

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2021-10-16 18:09:06 | 显示全部楼层 | 阅读模式

    前文

    这节课我们学习一下组件,组件是什么东西呢

    我们在写代码的时候,如果界面较为复杂

    我们会在一个页面写了接近十万乃至上百万的情况(不写油猴的时候)

    那我们有没有什么办法解决这个问题?

    就是组件

    组件可以将不同功能不同逻辑的代码拆分

    反复在不同位置上进行复用。

    我们先来看一下代码

    例子

    let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
        <testcom></testcom>
        <testcom></testcom>
        </div>`
    
    var el=document.createElement('div')
    el.innerHTML=text;
    document.body.append(el)
    const Counter = {
        data() {
            return {
            }
        },
        methods:{
        }
    }
    const app = Vue.createApp(Counter);
    app.component('testcom', {
      template: `<span>testcom</span>`
    })
    app.mount("#app");

    使用方法也很简单

    const app = Vue.createApp(Counter);
    app.component('testcom', {
      template: `<span>testcom</span>`
    })

    我们在Vue.createApp创建了一个app对象

    然后使用app.component创建一个组件

    第一个参数为组件名,第二个参数是一个对象,有一个template属性,template填写我们的模板

    然后在我们的页面上像使用HTML标签一样使用组件。

    注意一个问题,这里的组件通常不建议使用封闭式,如<标签名 />

    经过测试,我们可以看到,这里显示了两次

    图片.png

    传入数据

    app.component('testcom', {
       props: ['spanname'],
      template: `<span>{{spanname}}</span>`
    })

    在第二个对象中我们可以创建一个props属性,内是一个数组,我们可以设置传入的属性名。

    我们这里写了spanname

    然后在模板像存在data数据一样,使用了{{}}显示了数据,在method中我们可以直接使用this.spanname

    但是注意,这里不能修改数据,如果修改数据以后我们再说。

    这里的组件我们也可以循环绘制,让我们用v-for试一下。

    我们声明了一个data的numlist为10

    然后开始循环

    let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
        <testcom
        v-for='(item,index) in numlist'
        :key='index'
        :spanname='"---"+index+"---"'>
        </testcom>
        </div>`

    首先v-for进行循环,获取了item,获取了循环的数字,以及index

    然后设置了key为index,我们这里不会排序,所以可以尽管放心。

    spanname因为我们绑定了响应的数据,所以这里需要将spanname设置为:spanname,同时将内容设置为一个计算的,即'"---"+item+"---"'

    将两个字符串与item拼接,最后显示,我们可以看一下效果

    图片.png

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    6 小时前
  • 签到天数: 59 天

    [LV.5]常住居民I

    354

    主题

    3139

    帖子

    3136

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3136

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2021-10-16 18:09:18 | 显示全部楼层
    最后代码
    // ==UserScript==
    // @name         修改Vue3
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try to take over the world!
    // @author       You
    // @match        https://bbs.tampermonkey.net.cn/forum.php
    // @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
    // @require      https://raw.githubusercontent.co ... -Libs/master/vue.js
    // @grant        unsafeWindow
    // @grant      GM_getResourceText
    // @grant      GM_addStyle
    // ==/UserScript==
    let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
        <testcom
        v-for='(item,index) in numlist'
        :key='index'
        :spanname='"---"+item+"---"'>
        </testcom>
        </div>`

    var el=document.createElement('div')
    el.innerHTML=text;
    document.body.append(el)
    const Counter = {
        data() {
            return {
                numlist:10,
            }
        },
        methods:{
        }
    }
    const app = Vue.createApp(Counter);
    app.component('testcom', {
      props: ['spanname'],
      template: `<span>{{spanname}}</span>`
    })
    app.mount("#app");
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情

    3 天前
  • 签到天数: 1 天

    [LV.1]初来乍到

    4

    主题

    43

    帖子

    37

    积分

    助理工程师

    Rank: 1

    积分
    37

    新人报道三好学生国庆纪念章中秋纪念章猫咪币纪念章热心会员

    发表于 2022-5-11 10:44:14 | 显示全部楼层
    vue第六篇
    回复

    使用道具 举报

    发表回复

    本版积分规则

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