1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之MVVM

Vue教程之MVVM

MVVM 定义

MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

在 MVVM 的框架下视图和模型是不能直接通信的。它们通过 ViewModel 来通信,ViewModel 通常要实现一个 observer 观察者,当数据发生变化,ViewModel 能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel 也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信。

Vue教程之MVVM

实例演示

在 views 创建文件 list.vue

<template>
  <div style="margin: 30px 0 0 30px;">
    <span style="font-size: 20px;">list: {{ list }}</span>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span style="margin-right: 20px">{{ item }}</span>
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <input v-model="value">
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['a', 'b'],
      value: ''
    }
  },
  methods: {
    add () {
      this.list.push(this.value)
    },
    del (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

添加路由,在 router/index.js 下添加如下内容

Vue教程之MVVM
这篇文章对您有用吗? 2

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。