阿菜的Vue学习之旅(一)
1.Vue的初步使用
刚刚开始接触Vue的时候,阿菜是这样写
html部分:
<div id="me">
<!--vue内部的data数据被放到了这里的myName、myCountry-->
<p>大家好,我叫{{myName}},来自{{myCountry}}。</p>
</div>
javascript部分:
new Vue({
el: "#me", //操作在id值为me的div
data: {
myName: "阿菜",
myCountry: "中国"
}
})
运行结果:
== 总结 ==
Vue其实是一种声明式编程,new Vue的时候,
el: 用来指向自己想要控制的html标签(如,这里是id值为me的div标签)
data: 这里的变量将会显示在html页面上,前提是html页面的变量要用 {{}}来包围。(如,这里的{{myName}}、{{myCountry}}
2.关于MVVM架构的Vue设计
不久前,一位后端的同学问我,你们前端有架构么。当时我未学Vue,一脸懵逼。如今才知道,原来,前端也是有自己的架构滴——比如MVVM架构。
MVVM架构:
M即Model层,V即View层,VM即ViewModel层,用一句话解释该架构的逻辑就是:VM层(ViewModel)通过接口从后台M层(Model层)请求数据,然后和V层(View层)实现数据的双向绑定。
MVVM架构就是为前后端分离来使用的,前端仅需要通过调用接口来获取后端的数据或传输数据给后台即可,十分方便~
下面是一个使用了MVVM架构的计时器demo:
index.html文件:
<body>
<!-- MVVC架构包括:view层、viewModule层(中间桥梁作用)、module层-->
<!-- view层-->
<div id="myCounter">
<h4>当前总数:{{number}}</h4>
<!--当点击+、-按钮的时候,当前总数的数值会变化-->
<!-- 法一:使用语法糖-->
<button @click="add">+</button>
<button @click="sub">-</button>
<!-- 法二:-->
<!-- <button v-on:click="add">+</button>-->
<!-- <button v-on:click="sub">-</button>-->
</div>
<script src="js/vue.js"></script>
<script src="js/demo02.js"></script>
</body>
demo02.js文件:
//module层
let myCounter = {
number: 0,
}
//viewModule层
new Vue({
el: "#myCounter",
data: myCounter, //注意这里指的是module层定义的myCounter对象
methods: {
add: function(){
console.log("计数器总数+1");
this.number ++;
},
sub: function(){
console.log("计数器总数-1");
this.number --;
}
}
})
运行效果:
参考文献
前端框架MVVM是什么
—————————————————————————— —
下一篇
阿菜的Vue学习之旅(二)