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

李恒道

前言

传统的页面开发都是使用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的绘制。

结语

撒花~

unity韩

vue第四篇，其实没看来和传统的啥区别