关于vue的学习笔记（二）

最新推荐文章于 2024-09-09 21:20:26 发布

komish

最新推荐文章于 2024-09-09 21:20:26 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/komish/article/details/118107227

版权

本文介绍了Vue框架与JavaScript命令式编程的区别，强调Vue的声明式渲染特性。通过一个计算器的例子，展示了Vue的MVVM模式，其中View负责展示，Model处理数据，ViewModel作为桥梁实现数据绑定和DOM监听。在Vue中，通过声明式编程，开发者只需关注预期结果，而无需关心具体实现细节。

摘要由CSDN通过智能技术生成

与JS（命令式）最大不同的是，vue属于属于响应式框架，声明式渲染，这里简单写一些关于命令式与响应式的区别。

命令式编程是我们一步一步告诉机器需要怎么做，机器按部就班地执行命令。如关于js代码的编写中，代码将被按序一行行被读写编译完成，即执行的顺序是定死了的，灵活性很低，也很难复用。

声明式编程是我们告诉机器我想要这样的结果，而不管他是怎么实现的，这更符合人类的思维。用一个基本程序员能理解的话是，我已经写好了可以用来实现功能的方法，如果需要这个功能只需要调用该方法即可，而不用知道方法在机器被实现的具体步骤。由于vue框架是基于MVVM形式实现（Model-View-ViewModel），在编码中对模块有着清晰的划分。

vue中的MVVM层具体内容如下：

View层（视图层）：

在前端开发中，通常就是DOM层，主要作用是给用户展示各种信息。

Model层（数据层）：

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

ViewModel层（视图模型层）：

视图模型层是View和Model沟通的桥梁，一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data

下面用一个计算器的例子简单解释MVVM

需求：点击+计算器+1，点击-计算器-1

body部分如下：

<div id="app">
  <h2>计算器:{{count}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

vue实例部分如下（包含引用vue的代码块）：

<script src = "../JS/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      count: 0,
    },
    methods:{
      increment() {
        return this.count++
      },
      decrement() {
        return this.count--
      }
    }
  })
</script>

下面对计算器的代码中抽离出MVVM模块划分：

View层：

View依然时我们的DOM，即我们的body部分，即需要被渲染的内容部分。

Model层：

Model层为Vue实例中的data部分，即属性count，当然可以将data中的count分离出作为全局变量。

ViewModel层：

ViewModel层就是我们创建出的Vue对象实例。即代码中挂载了div id为app的代码部分。

工作原理：

首先ViewModel通过Data Binding让count实时在DOM中显示；

其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变count的量