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

[油猴脚本开发指南]Vue组件基础

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

    [LV.7]常住居民III

    620

    主题

    5087

    回帖

    5960

    积分

    管理员

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

    积分
    5960

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

    发表于 2022-4-4 23:44:27 | 显示全部楼层 | 阅读模式

    FBI WARNING

    依然照抄vue文档...以后有机会会重写vue部分

    基本示例

    我们在使用createApp函数返回了一个应用示例
    返回的应用示例相当于我们该项目的整体应用对象
    在创建出应用示例之后,可以创建相应的组件
    然后在运行的时候,在模板中使用组件

    const app = Vue.createApp({})
    app.component('button-counter', {
      data() {
        return {
          count: 0
        }
      },
      template: `
    
          You clicked me {{ count }} times.
        `
    })

    然后我们使用

    app.mount('#components-demo')

    组件相当于一个可复用的实例,可以使用data,computed,watch,methods,以及声明周期钩子等。

    组件的复用

    我们可以将组件任意多次的复用

    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    每一个创建的组件都是相互隔离的

    通过prop传递数据

    我们在组件中可以设置props属性,当在模板中声明该组件的时候,可以传递特定的数据

    const app = Vue.createApp({})
    
    app.component('blog-post', {
      props: ['title'],
      template: `{{ title }}`
    })
    
    app.mount('#blog-post-demo')

    使用如下

    也可以在v-for循环里,并且通过bind绑定来提供props数据

    const App = {
      data() {
        return {
          posts: [
            { id: 1, title: 'My journey with Vue' },
            { id: 2, title: 'Blogging with Vue' },
            { id: 3, title: 'Why Vue is so fun' }
          ]
        }
      }
    }
    
    const app = Vue.createApp(App)
    
    app.component('blog-post', {
      props: ['title'],
      template: `{{ title }}`
    })
    
    app.mount('#blog-posts-demo')
    

    然后调用组件

    结语

    依然照抄vue文档....撒花...

    点评

    gg🐮b  发表于 2022-4-5 09:21
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

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

    [LV.7]常住居民III

    284

    主题

    3810

    回帖

    3739

    积分

    管理员

    积分
    3739

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

    发表于 2022-4-6 14:19:32 | 显示全部楼层
    代码缺失了,哥哥补一补档
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

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