VUE——MVVM

最新推荐文章于 2024-07-25 15:19:10 发布

33的史努比

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量62

点赞数

分类专栏：前端入门学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/coising/article/details/123144917

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

MVVM
Model-View-ViewModel

计数器的MVVM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    <h2>当前计数:{{counter}}</h2>
    <!-- <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="./vue.js"></script>
    <script>



        const obj = {
                counter : 0,
                
            }
        const app = new Vue({
            el: '#app',
            data : obj,
            methods: {
                add : function () {  
                    console.log('add被执行');
                    this.counter++;
                },
                sub : function () {  
                    console.log('ss');
                    this.counter--
            }
            }
        })
    </script>
</body>
</html>

View:即DOM

Model：抽离出来的obj

ViewModel ：创建的Vue对象实例

他们之间如何工作？

首先VIewModel通过data Binding让obj中的数据实时的在DOM中显示
其次ViewModel通过DOM Listener 来监听DOM事件，并且通过methods操作来改变obj中的数据

33的史努比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE——MVVM

MVVMModel-View-ViewModel计数器的MVVM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫