Vue 教程第一篇——基础概念

认识 Vue

关于 Vue 的描述有很多，不外乎都会拿来与 Angular 和 React 对比，一样头顶 MVVM 双向数据驱动设计模式光环的 Angular 天然被对比的最多，但到目前为止，Angular 在热度上已明显不及 Vue，性能已成为最大的诟病。

在我看来，Vue 和 Angular 的对比有种早些年 Java 和 ASP.NET 的对比，对于开发者而言，ASP.NET 官方自己已实现好了大量的框架和功能，使用起来很是的方便快捷，同时也提供了无限的可扩展性，对比起 Java 而言，后者在自己框架和功能上都不及 ASP.NET，但一样都拥有无限的可扩展性，相比之下，原本 ASP.NET 颇有一统天下的可能，但现实终归现实，ASP.NET 自己的框架和功能实现并无换来多少称赞，反在性能和安全性方面被诟病。回看 Vue 和 Angular 的阵营，我也总有这么一种感受。

因此，在这个开源的年代，我认为一个框架功能不须要有多么强大，再强大再完善的功能都抵不上“适合”两字，反而轻量级且有无限可扩展性会成为全部开发者的追求。

关于 Vue、React 和 Angular，其实都是在原生 JS 基础上，对面向对象不同的实现方式而已，因此要想使用这三者中的任意一种，首先要有必定的 JS 基础和对面向对象有必定的认识。

在代码层面，Vue 只是一个构造函数，整个 Vue 的实现都在实例化这个构造函数开始。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"></div>

var vm = new Vue({
    el: '#app'// Vue 实例元素
    data: {
      //数据
    }
    ...
  })

认识数据驱动模式

开始接触前端编程的基本上都是先学习 DOM 节点操做，jQuery 在这一领域上一度成为了标准，因此在前端编程的领域中，jQuery 几乎是每一个开发者的标配。随着先后端分离的成熟，产品或项目都趋于分布式部署，开发者已不知足于操做 DOM 节点， 设计模式便慢慢的被前端化。

数据驱动的设计模式在思惟逻辑上与 DOM 节点操做彻底不同。

<div id="div1"></div>
  <div id="app">
    <span>{{message}}</span>
  </div>

//DOM 节点操做
  document.getElementById('div1').innerText = '节点被动改变'  

  //Vue 数据驱动： 当 message 发生改变的时候，span 会相应的发生改变，而不须要手动去改变 span。
  var vm = new Vue({
    el: '#app',
    data: {
      message: '我是经过映射显示的文本'
    }
  })

认识 MVVM 模式

M：Model，称之为数据模型，在前端以对象的形式表现。

var data = {message: '我就是一个数据模型'}

V：View，视图，也就是 HTML

<div id="app">
    <span>我是视图</span>
  </div>

VM：ViewModel，就是链接数据和视图的桥梁，当 Model 发生改变的时候，ViewModel 便将数据映射到视图。

那么数据驱动模式和 MVVM 模式有什么关系，换句话说，MVVM 是数据驱动模式的一种实现，Vue 是 MVVM 的一种实现。