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

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

[复制链接]

189

主题

1472

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 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

混的人。

189

主题

1472

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 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");
混的人。
回复

使用道具 举报

发表回复

本版积分规则

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