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.msgvm.$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>
