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

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

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 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的绘制。

结语

撒花~

混的人。

发表回复

本版积分规则

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