黑马程序员技术交流社区

标题: 【成都校区】VUE之MVVM 10年之前 [打印本页]

---

作者: 小蜀哥哥    时间: 2019-8-8 20:49
标题: 【成都校区】VUE之MVVM 10年之前


百忙之中，为大家带来VUE的MVVM模式讲解，在本片帖子中我们对MVVM的模式进行一个详细的阐述。
首先给大家说说什么是MVVM，首先请出大家百度の先生（日语）。上面解释：MVVM是Model-View-ViewModel的简写。
                         Model == 模型
                         View == 视图
                         ViewModel == 视图模型


在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。

说完定义，下面我们来说说好处，MVVM的好处和优势。
  程序员如何说好处？用程序来表示，来理解它的好处。我们来做个加法计算器:
   

十年之前

<input type="text" id="dom1" onchange="ch(1,this)"/>+
<input type="text" id="dom2" onchange="ch(2,this)"/>=
<span id="show">1</span>
<script>
    var v1 = 0;
    var v2 = 0;
    function ch(i,ev) {
        if(i==1){
            v1 = ev.value;
        }else{
            v2 = ev.value;
        }
        document.getElementById("show").innerText = Number.parseInt(v1)+Number.parseInt(v2);
    }
</script>



十年之后：

<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>=
{{Number.parseInt(num1)+Number.parseInt(num2)}}

<script src="/js/vue/vue.min.js"></script>
<script>
    //新建一个vue实例(相当于MVVM模式中vm)
    var VM = new Vue({
        el:"#app",//将上边视图部分app区域进行管理,将model数据和view进行绑定
        data:{//相当于MVVM中的model
            num1:0,
            num2:0,
        }
    })
</script>

从上面的代码中，我们看到了两种不同思想的定位。10年前，我们只考虑功能如何实现。而10年后我们考虑的是代码如何让更多人理解和维护。MVVM模式为我们提供了标准化的生产方案，工作中先定义标签（数据如何展示）-》定模型（数据从哪里来）-》修改视图模型器（数据如何处理）。
新技术带来的是新思路，带来的是高复用性。希望本次的代码及说明能为大家带来对MVVM更好的理解

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2