vue入门

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

{{ msg }}

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 元素的属性上

Hello, {{ msg }}.
{{ 1 + 2 }}
{{ isOk ? 'yes': 'no' }}