[油猴脚本开发指南]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
然后编写
```javascript
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需要固定的模板来编写，这里我们必须符合规则
顺便拓展一下，这里使用函数返回对象是为了防止共享对象，导致读写对象发生数据的混淆
如果直接声明对象多个同样的调用会返回相同的对方
而如果使用函数返回对象相当于生成了一个全新的对象。
```javascript
const Counter = {
data() {
return {
counter: 0
}
}
}
```
然后我们使用了
```javascript
const app = Vue.createApp(Counter);
```
这里是通过Vue.createApp函数传入了操作，这时候会返回一个Vue实例。
```javascript
app.mount("#app");
```
我们将这个通过mount挂载到对应的元素下，Vue就开始正常工作啦！
那么这节课我们就基础的学习了Vue的绘制。
# 结语
撒花~
vue第四篇，其实没看来和传统的啥区别
页:
[1]