Vuejs计数器及MVVM

4.Vue.js计数器

计数器小案例点击加号加1，点击减号按钮就会减1

运行结果如下：

由于当前计数这四个字是不变的，所以可以直接写在div中

现在基本的样式就写完了，接下来该让按钮有效果了

思路分析：

按照传统的命令式写法：

1.拿button元素

2.增加监听事件（点击）

再来看我们要写的声明式写法：

1.使用v-on来监听事件，on表示在发生什么事情做出什么响应

2.还要告诉vue是监听的什么事件，并且执行的什么方法，例如单击+：v-on:click=”counter++”

运行结果如下：

如果我们不仅仅是希望++，还希望输出”+已被点击”这样一段话

这就需要在const定义的app里面来写，定义methods方法：

运行结果如下：

简单小总结：

这里，我们又要使用新的指令和属性了

新的属性:methods，该属性用于在Vue对象中定义方法。

新的指令:@click,该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法

(方法通常是methods中定义的方法)

@包括v-on，这种写法是语法糖，即简写

Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么?

这些以后都会一一讲到

5.Vue.js的MVVM

什么是MVVM？

MVVM – Model ViewModel View，是一种软件架构模式。

可以看一下维基百科的MVVM概念（注意：不是百度百科）

我们直接来看Vue中的MVVM：

Model就是对应的数据，View对应的DOM

如果View和Model想要通信，就需要通过ViewModel来通信

View Model为我们做了两件事情：

1.Data Bindings 数据绑定，例如将data中的数据绑定在DOM上

2.DOM Listeners 数据监听，例如刚才计数器的按钮，点一下就回调一次函数

我们还是看刚才的计数器案例，来分析一下谁是这三个：

展现给用户看到的就是View

如果我们这样来定义counter来试一下：

现在obj就是model，定义的app = new Vue就是ViewModel

这里定义的obj得数据全部加到app中了

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web