🌟前言

从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作DOM元素。但是当我们大量的去操作DOM元素时，就会出现很多性能相关的问题。MVVM 的出现，完美解决了以上三个问题；而我就今天要讲的Vue就是基于MVVM的一个渐进式框架。最初它不过是个人项目，时至今日，已成为全世界三大前端框架之一，github 上拥有 15 万 Star 领先于 React 和 Angular，在国内更是首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。所以MVVM又是什么？Vue又是什么呢？

🌟MVVM模式

Vue在设计上使用MVVM(Model-View-ViewModel)架构模式。

当应用庞大到一定程度时，MVC架构模式也将变得十分复杂，特别是View的逻辑部分变得难易维护。在这样的背景下，MVVM(Model–View–ViewModel)的架构模型应运而生。前后端分离架构与SPA应用都离不开MVVM的流行,这些都带来了前端技术的快速发展。

通过MVVM的模式拆分为视图(View)与数据(Model)两部分，并将其分离。ViewModel是MVVM模式的核心，是连接View和Model的桥梁。视图(View)与数据(Model)通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

🌟Vue简介

Vue官方网址 Vue是一个轻量级的MVVM前端框架，使用Vue可以让Web开发变得简单，同时也颠覆了传统前端开发模式。

Vue是一个基于JavaScript开发的MVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

🌟Vue重要版本发布

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。

2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。

2014.01.24，Vue 正式对外发布，版本号是 0.8.0。

2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。

2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。

2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。

2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。

2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。

2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

🌟Vue特点

简洁：页面由HTML模板+Json数据+Vue实例组成。

轻量：Vue的生产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb。

快速：Virtual DOM进行高效的DOM更新。

数据驱动：操作数据，DOM的事情Vue会帮你自动处理。

模块友好：结合一些第三方模块构建工具，如CommonJS、RequireJS或者SeaJs，可以轻松实现代码的模块化。

组件化：用可复用、解耦的组件(.vue)来构造页面。

文档友好：中文api文档和官方教程。

🌟快速上手Vue

安装Node环境 Node官网

去官网下载你电脑所对应的版本，一路回车即可。也可以看看我写的这篇博文去使用NVM(NVM-Node管理工具)。

Vue安装

script标签引入 script src="vue.js"> /script>

CDN引入 script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"> /script>

命令行工具 (CLI)

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；

基于 webpack 构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

🌟Hello Vue

!DOCTYPE html>
    
html lang="en">
    
head>
    
    meta charset="UTF-8">
    
    title>
    Title/title>
    
    !-- script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    /script>
     -->
    
    script src="./vue.js">
    /script>
    
/head>
    
body>
    
div id="app">
    
    h1>
{
{
message}
}
    /h1>
    
/div>
    
script>

    new Vue({

        el:'#app',
        data:{

            message:'Hello Vue'
        }

    }
    )
/script>
    
/body>
    
/html>
    

!-- App.vue -->
    
template>
    
  div id="app">
    
    img alt="Vue logo" src="./assets/logo.png">
    
    h1>
{
{
message}
}
    /h1>
    
  /div>
    
/template>
    

script>


export default {

  name: 'App',
  data() {

    return {

      message: 'Hello Vue'
    }

  }

}
    
/script>
    

style>

#app {
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
    
  -webkit-font-smoothing: antialiased;
    
  -moz-osx-font-smoothing: grayscale;
    
  text-align: center;
    
  color: #2c3e50;
    
  margin-top: 60px;

}
    
/style>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！