一、Vue.js介绍

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

 

二、MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为
抽象化，让我们将视图 UI 和业务逻辑分开；
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）；
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，
也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端
开发更加高效、便捷；

参考链接：​​前后端分手大师——MVVM 模式​​

【Vue.js】001-Vue.js概述及入门_html

【Vue.js】001-Vue.js概述及入门_html_02

【Vue.js】001-Vue.js概述及入门_html_03

 

三、入门

1、vue官网地址

​​https://cn.vuejs.org/v2/guide/​​

 

2、下载版本

开发下载开发版，使用下载生产版（压缩版）；

下载地址：

​​https://cn.vuejs.org/v2/guide/installation.html​​

【Vue.js】001-Vue.js概述及入门_html_04

 

3、推荐编辑器

HBuilder X！！！

官网地址：

​​https://www.dcloud.io/​​

4、引入到项目

方式一（本地引入）：

<script src="js/vue.js"></script>

方式二（引入CDN地址）：

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

 

5、简单使用

index.xml代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- Vue插值表达式，把data中定义的数据显示至此 -->
      {{ message }} 
    </div>
    <script>
      var app = new Vue({
        //el即element元素，用于指定元素
        //此处使用id选择器，阶段div区域
        el:"#app",
        //data用于存储数据
        data:{
          //键值对形式进行存储
          message : "Hello Vue!"
        }
      });
    </script>
  </body>
</html>

运行结果：

【Vue.js】001-Vue.js概述及入门_Vue_05

文件位置图：

【Vue.js】001-Vue.js概述及入门_html_06