一起学Vuejs----- MVVM
Posted smile学子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一起学Vuejs----- MVVM相关的知识，希望对你有一定的参考价值。
不积跬步，无以至千里；不积小流，无以成江海。
Vuejs语言基础
MVVM是Model-View-ViewModel的缩写：
View层：
√ 视图层
√ 前端开发中，通常就是DOM层。
√主要作用是给用户展示各种信息。
Model层：
√ 数据层
√ 数据可以是我们固定的死数据，更多的是来自
我们服务器，从网络上请求下来的数据。
√ 在我们上一章计数器案例中，就是后面抽取出来的obj。
VueModel层：
√ 视图模型层
√ View和Model沟通的桥梁。
√ 一方面它实现了Data Binding（数据绑定），将Model的改变实时的反应到View中。
√ 另一方面它实现了DOM Listener（DOM监听），当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。
计数器的MVVM：
√ View是我们的DOM
√ Model就是我们抽离出来的obj
√ ViewModel就是创建的Vue对象实例
工作原理：
√ 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
√ 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>当前计数： {{counter}}</h2> <button @click="add">+</button> <button @click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const obj = { counter: 0, message: ‘abc‘ } const app = new Vue({ el:‘#app‘, data: obj, // data:{ // counter: 0 // }, methods:{ add:function () { console.log("add被执行"); this.counter++ }, sub:function () { console.log("sub被执行"); this.counter-- } } }) </script> </body> </html>
以上是关于一起学Vuejs----- MVVM的主要内容，如果未能解决你的问题，请参考以下文章