01-vue的学习-初始

Vue

一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

1、MVVM

• M -Model:数据
• V -View ：视图
• VM -ViewModel： 实现Model 与 View 的关联 ，当 Model 数据实现更新，能自动响应式渲染 View 视图，当试图中对界面进行操作时能够自动将操作响应到 Model 中实现数据更新。-- 双向数据绑定（Object.defineProperty() 数据劫持)

几种MV*模式的区别

• “MVC”: model view controller
  把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的 Model的，所以View无法组件化，无法复用
• “MVP”: model view presenter
  View不依赖Model，View可以进行组件化。但Model->View的手动同步逻 辑 麻烦，维护困难
• “MVVM”: model view viewmodel
  解决了MVP大量的手动View和Model同步的问题，提供双向绑定机制。提高 了代码的可维护性。对于大型的图形应用程序，视图状态较多，ViewModel 的构建和维护的成本都会比较高。
  

2、安装
注意：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性（Object.defineProperty()）。
引入：
- 开发版：包含所有警告及调试信息，一般在开发时使用到

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

- 生产版：删除了警告调试信息，一般在项目发布部署时生产环境中使用到

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

3、使用
vue实例

// ViewModel
const vm = new Vue({
    el: '#app', // View：element，指明在页面中需要渲染的 View
    data: { // Model：模型，在页面渲染时使用到的数据
        message: 'Hello vue.js'
    }
})

在创建后的 Vue 实例中，可以直接调用到在 data 中定义的属性（这是因为，在创建 Vue 实例时，会将 data 中的数据处理然后挂载到 Vue 实例下直接供调用），需要注意的是，如果 data 中定义的数据属性名以 $ 或 _ 开头，则不会挂载到 Vue 实例下，需要通过 vm.$data.$xx 去获取。