初探Vue.js与MVVM模式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38164763/article/details/82760337

之前本人花了一天时间粗略阅读了vue.js的文档，这是官方文档链接，然后再开始在视频的帮助下进行学习。

今天学习的内容主要有以下几点:

1.vue.js的基本语法

2.一些基本指令

3.事件修饰符

4.vue中的样式

5.区分MVC和MVVM，区分框架和库

5.写了两个简单的实例

下面我将阐述个人认为的难点以及重要的地方，vue的基本语法以及事件修饰符我将不再过多阐述，官方文档上以及写的非常详细，文末将会给出github地址，里面是今天学习语法样式等写的代码，有需要的可以自取。

首先，要明确MVC和MVVM的区别。

MVC是一个适用于后端的设计理念:M即Model数据层，V即View视图层,C是Controller控制器。数据层负责处理数据逻辑，视图层处理数据显示部分，控制器负责从数据拿取数据然后交给数据层处理，以此实现前后端分离，使开发过程逻辑不会过于混乱，在我学习的过程中，第一个结合前后端开发的项目是留言板，采用的是html+php+mysql开发，当php和html写在一个页面时会导致代码十分混乱难以管理，而采用MVC的设计模式就很好的解决了这个问题。其中我目前接触过的MVC框架只有thinkphp。

而MVVM则是适用于前端的设计理念:MVVM分为M、V、VM，其中M也是Model，不过不同于MVC中的M，这里的M只是储存的当前页面内所需要的数据，V也是View即我们看到的页面，而最为重要的就是VM，他完成了两者之间的交互，在这里，vue即采用了这种设计理念，

下面给出一张他们之间的关系图。

其次，今天明白了之前学习js中漏掉的一个知识点，冒泡事件和捕获事件。

简单来说，如果有多个div嵌套，比如一个div内有一个input标签，两者均设置了点击事件。此时，如果点击input，ipnut绑定的点击事件会先触发，div绑定的点击事件再触发，这种由内向外触发的模式叫冒泡事件，就像水泡从水底往外冒一样，由内先外。而捕获事件就恰恰相反，捕获事件是事件从最外层往最里层依次触发，例如刚才那个例子，外层div所绑定的事件会先触发，而input绑定的事件会后触发。

下面给一段vue示例代码：

这是添加了捕获事件的html

<div class="inner" @click.capture="divHandler">          
    <input type="button" value="戳他" @click="btnHandler">
</div>

这是没有添加捕获事件的html

<div class="inner" @click="divHandler">          
    <input type="button" value="戳他" @click="btnHandler">
</div>

这是绑定的事件

divHandler(){
    console.log('这是触发了 inner div 的点击事件')
},
btnHandler(){
    console.log('这是触发了 btn 的点击事件')
},

所以，当我们点击input按钮时，如果是冒泡，则先会输出btn事件后输出div事件，如图

我们可以看见先输出了btn事件再输出div事件，但是如果我们添加了捕获事件，输出则会变成

所以捕获事件会从外部向内部传递，即先触发了div的点击事件再触发了ipnut的点击事件（注意我这两个效果的产生均为我点击了input按钮）。

但是到这里我产生了一个疑问，如果有三个div嵌套，为第一个div绑定捕获事件，继续点击input，第二个div会在何时触发点击事件，我进行了实验，当我仅为最外层div绑定捕获事件时，像这样

<div class="outer" @click.capture="div2Handler">
    <div class="inner" @click="divHandler">          
        <input type="button" value="戳他" @click="btnHandler">
    </div>
</div>

点击按钮后，显然，最外层div事件会被首先触发，但是紧接着就会触发input点击事件，然后再触发inner div的触发事件。除非将inner div也绑定捕获事件，才会从外到内依次触发。

<div class="outer" @click.capture="div2Handler">
    <div class="inner" @click.capture="divHandler">          
        <input type="button" value="戳他" @click="btnHandler">
    </div>
</div>