一起学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

猜你喜欢