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

[油猴脚本开发指南]VUE入门概念

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

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

    积分
    6760

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

    发表于 2021-10-6 14:15:06 | 显示全部楼层 | 阅读模式

    前言

    传统的页面开发都是使用html+js+css

    当数据发生变化的时候,我们通常需要操作元素,来修改成对应的值

    Vue可以极大的减少相关的操作,并且提供了很多便于我们开发的语法糖

    如双向响应,计算属性,声明周期等,都极大的简化了我们开发的流程。

    尽管其体积相对油猴来说较为笨重,但是可以提供更好的开发手感。

    接下来让我们一起学习Vue把。

    开篇

    Vue大致分为三部分即模板、数据、样式

    分别对应了HTML代码,js代码以及CSS代码

    其中模板编写HTML代码后,可以自动渲染数据。

    当我们修改数据的时候会同步到HTML代码中,极大的节省了我们的开发流程。

    因为属于油猴基础教程,所以这里我们依然使用油猴编写Vue代码,就是没有提示操作很恶心。

    // @require https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/vue.js

    引入我魔改过的vue

    然后编写

    let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;width: 100px;height: 100px;">
               <div id="counter">
      Counter: {{ counter }}
    </div>
    
        </div>`
    
    var el=document.createElement('div')
    el.innerHTML=text;
    document.body.append(el)
    const Counter = {
      data() {
        return {
          counter: 0
        }
      }
    }
    const app = Vue.createApp(Counter);
    app.mount("#app");

    其中上半部分相当于创建了一个div以及包含了一些元素,并放到了body下。

    然后创建了一个js操作,其中data的函数内return里是我们放数据的地方

    Vue需要固定的模板来编写,这里我们必须符合规则

    顺便拓展一下,这里使用函数返回对象是为了防止共享对象,导致读写对象发生数据的混淆

    如果直接声明对象多个同样的调用会返回相同的对方

    而如果使用函数返回对象相当于生成了一个全新的对象。

    const Counter = {
      data() {
        return {
          counter: 0
        }
      }
    }

    然后我们使用了

    const app = Vue.createApp(Counter);

    这里是通过Vue.createApp函数传入了操作,这时候会返回一个Vue实例。

    app.mount("#app");

    我们将这个通过mount挂载到对应的元素下,Vue就开始正常工作啦!

    那么这节课我们就基础的学习了Vue的绘制。

    结语

    撒花~

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

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

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

    [LV.1]初来乍到

    9

    主题

    80

    回帖

    89

    积分

    初级工程师

    积分
    89

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

    发表于 2022-5-11 10:38:29 | 显示全部楼层
    vue第四篇,其实没看来和传统的啥区别
    回复

    使用道具 举报

    发表回复

    本版积分规则

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