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

发布时间:2019-10-14 14:00:10发布者:Mr.Zhang阅读(169)

 

 

 

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>

 





本文转自博客园,原文地址:https://www.cnblogs.com/DreamchaserHe/p/11670141.html