Vue虽然没有完全遵循MVVM模型，但Vue的设计也收到了它的启发在文档中也会使用VM（ViewModel的缩写）这个变量名表示Vue实例（Vue作者参考了MVVM模型，并非其创建的）

【Vue】大悟Vue的核心之MVVM_javascript

模型说明
  • M：模型 Model-对应data中的数据
  • V：视图 View-对应模板代码
  • VM：视图模型 ViewModel-对应Vue实例对象
  • Data Bingdings：数据绑定 把数据放在View的指定位置
  • DOM Listeners：DOM 监听器 监听视图上的变化并映射到数据里
  • data中所有的属性，最后都会出现在VM身上
  • VM身上所有的属性 及Vue原型身上所有的属性，在 Vue模板中都可以直接使用

Vue 实例中的 data 对象就代表了这个 ViewModel（VM） 中的 数据模型，用于存放应用程序的业务数据

Vue 中的 template 就代表视图层（View），用于定义应用程序的界面显示效果，

  • 可以将该层理解为html页面中的元素，比如：
<div id="app">{{ message }} 
</div>
  • 1.
  • 2.

在这里写的所有代码，都会去VM身上去找，比如@click = '可以引用VM的内容&简单表达式'但是如果写@click = 'alert(1)'就不对了，它属于window的，VM身上找不到就未定义错误

  • 这里简单拓展一下：Java中的MVC（模型Model-视图View-控制器Controller-一种架构模式）
    MVC：M代表Model数据层 , V代表View视图层 , C代表Controller控制层（中介）, 用户发送请求，Control View 传送指令到 Controller，Controller 完成业务逻辑后，使 Model 改变状态Model 将新的数据发送到 View，用户得到反馈（实际上更复杂，如需要深入理解，建议多多查阅相关资料）
// View
    <div id="root">
        <h1>{{name}}</h1>
        <!-- 只要是VM上面的（包括原型）都可以直接写，f12可以查看到我们写的name、add、官方自带的属性等 -->
        <h1>{{$options}}</h1>
        <h1>{{$emit}}</h1>
    </div>
    <script type="text/JS">
        Vue.config.productionTip = false
        // new Vue 这整个就是最重要的ViewModel
        new Vue({
            el: '#root',
            // Model ，数据经过ViewModel就去了View更新
            data: {
                name: "小索奇",
                add: "shanghai"
            }
        })
    </script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.