vue中的---MVVM(面试必问)

 

 

 

M---Model  （数据）

V---View　　(视图)

VM---VIewModel  (转换器)

 VIewModel主要做两件事：

1、把 Model 中的数据绑定到View(视图层)。

2、监听VIew （视图层），把事件，界面操作，回调给Model中的JavaScript中的对象，函数。

 

 

 View:视图层，前端所说的DOM,通常给用户展示各种信息。

Model:数据层，里面存放着各种数据，有我们写死的固定数据，大多数是从网上请求过来的数据。

VIewModel：视图模型层，它是View和Model的桥梁，一是实现Data Bindings也就是数据绑定，将Model中的数据的改变同步到View中去。二是DOM Listeners,也就是DOM监听，当DOM发生一些事件(点击，滚动，touch等)可以监听到，并且改变对应的Data.

 

 计算器小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>当前计数:{{counter}}</h1>
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        <button v-on:click='add'>+</button>
        <button v-on:click='sub'>-</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: {
                add: function () {
                    console.log(this.counter);
                    this.counter++
                },
                sub: function () {
                    console.log(this.counter);
                    this.counter--

                }
            }
        })

    </script>
</body>

</html>

 

posted @ 2019-10-14 10:36  个人升级打怪  阅读(1487)  评论(0)  编辑  收藏  举报