MVVM的介绍

vue的设计思想是基于MVVM实现的，那么什么是MVVM呢？简单介绍：

组成

• MVVM ===> M / V / VM
• M：model数据模型
• V：view视图
• VM：ViewModel

优势

• MVC模式，将应用程序划分为三大部分，实现了职责分离
• MVVM通过数据双向绑定让数据自动地双向同步
  • V（修改数据） -> M
  • M（修改数据） -> V

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。

起步 - Hello Vue

• 安装：npm i -S vue

<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中 -->
<div id="app">{{ msg }}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {
      msg: 'Hello Vue'
    }
  })
</script>

Vue实例

• 注意 1：推荐在创建实例之前，就声明所有的根级响应式属性
• 注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg
  • vm.$data.msg === vm.msg

var vm = new Vue({
  data: {
    msg: '大家好，...'
  }
})

vm.$data.msg === vm.msg // true

数据绑定

• 最常用的方式：Mustache，也就是 {{}} 语法
• 解释：{{}}从数据对象data中获取属性
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{{}}中允许使用JavaScript支持的所有表达式
• 注意：Mustache 语法不能作用在 HTML 元素的属性上

<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>

<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>