目录

  1. 什么是vue.js ?
  2. 什么是MVVM?
  3. 第一个vue实例

1. 什么是vue.js ？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

(以上来自官方解释)

  • 官网：https://cn.vuejs.org/v2/guide/index.html
  • vue 特点：
    • 简洁
    • 数据驱动：自动追踪依赖的模板表达式和计算属性
    • 组件化：避免重复造轮子，提高开发效率
    • 轻量
    • 快速：精确有效的异步批量 DOM 更新
    • 模块友好：通过 NPM 或 Bower 安装，无缝融入

2. 什么是MVVM与单页面应用程序?

介绍之前先说一下各种应用架构的发展史：

2.1 MVC

mvc是应用最为广泛的软件架构之一。一般MVC分为:Model(模型),Controller(控制器) 和view(视图).这主要书基于分层的目的,让彼此的职责分开。View层一般都是通过controller来和Model进行联系.Controller是Model和View的协调者,View和Model不直接联系.基本都是单向联系的。

MVC结构

2.2 MVP

MVP是从经典的MVC模式演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,view负责显示。在MVP中，Presenter完全把view和Model进行了分离，主要的程序逻辑在Presenter实现.而且, Presenter与具体的view是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。

MVP模式

2.3 MVVM

MVVM代表框架有:知名度相对偏低的Knockout.js,早期的Ember.js.目前比较火热的来自Google的Angular.js,和由我们国人前端大神尤雨溪编写的vue.js.相比前面两种模式.MVVM只是把MVC的Controller和MVP的Presenter改成了ViewModel.View的变化会自定更新到ViewModel, ViewModel的变化也会自动同步到View上显示.

3. 第一个vue实例

参照官网的例子：

3.1 起步导包

  • 开发环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 生产环境版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.1 第一个实例

  • 通过script标签导入vue.js

注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!而且Vue不支持IE8以下的浏览器.

  • 实例化Vue

在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。data 用于定义属性，实例中有一个属性分别为：message

总结

简单的入个门，很简单。