Vue教程之MVVM

MVVM 定义

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

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

实例演示

在 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 下添加如下内容