前言
传统的页面开发都是使用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的绘制。
结语
撒花~