1.vue.js前端框架：Vue.js简介

1.1 Vue.js 概述

• Vue.js 是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是，它只关注视图层（View层），采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。它不仅容易上手，还非常容易与其他库或已有项目进行整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue .js 也完全能够为复杂的单页应用提供驱动。

1.1.1 Vue.js 是什么

• Vue.js 实际上是一个用于开发 Web 前端界面的库，其本身具有响应式编程和组件化的特点。所谓响应式编程，即保持状态和视图的同步。响应式编程允许将相关模型的变化自动反映到视图上，反之亦然。Vue.js 采用的是MVVM（Model-View-ViewModel）的开发模式。与传统的MVC开发模式不同，MVVM 将MVC中的 Controller 改成了ViewModel。在这种模式下，View 的变化会自动更新到 ViewModel，而 ViewModel 的变化也会自动同步到 View 上进行显示。
• ViewModel 模式的示意图如下图所示：
  
• 与ReactJS一样，Vue.js同样拥有”一切都是组件“的理念。应用组件化的特点，可以将任意封装好的代码注册成标签，这样就在很大程度上减少了重复开发，提高了开发效率和代码复用性。如果配合Vue.js的周边工具vue-loader，可以将一个组件的HTML、CSS、JavaScript代码都写在一个文件中，这样可以实现模块化的开发。

1.1.2 Vue.js的特性

• Vue.js的主要特性如下：
• 轻量级
  相比较AngularJS和ReactJS而言，Vue.js是一个更轻量级的前端库。不但容量非常小，而且没有其它的依赖。
• 数据绑定
  Vue.js最主要的特点就是双向的数据绑定。在传统的Web项目中，将数据在视图层展示出来后，如果需要再次修改视图，需要通过获取DOM的方法进行修改，这样才能维持数据和视图的一致。而Vue.js是一个响应式的数据绑定系统，在建立绑定后，DOM将和Vue对象中的数据保持同步，这样就无须手动获取DOM的值再同步到 js中。
• 应用指令
  同AngularJS一样，Vue.js也提供了指令这一概念。指令用于在表达式的值发生变化时，将某些行为应用到绑定的DOM上，通过对应表达式值的变化就可以修改对应的DOM。
• 插件化开发
  与AngularJS类似，Vue,js也可以用来开发一个完整的单页应用。在Vue.js的核心库中并不包含路由、Ajax等功能，但是可以非常方便地加载对应插件来实现这样的功能。例如，vue-router插件提供了路由管理的功能，vue-resource插件提供了数据请求的功能。

2.1 Vue.js的安装

2.1.1 直接下载并使用 script 标签引入

• Vue.js官网：https://cn.vuejs.org/v2/guide/
• 在Vue.js的官方网站中可以直接下载vue.js文件并使用 script标签引入。
  1、下载Vue.js
  Vue.js是一个开源的库，可以从它的官方网站中下载。下面介绍具体的下载步骤：
  （1）打开Vue.js的官方网站，进入到Vue.js的下载页面，找到如下图1.2所示的内容。
  
  （2）根据开发者的实际情况选择不同的版本进行下载。这里以下载开发版本为例，在”开发版本“按钮上单击鼠标右键，如下图1.3所示。
  
  （3）在弹出的快捷菜单中单击“连接另存为”选项，弹出下载对话框，如下图1.4所示，单击对话框中的“保存”按钮，将Vue.js文件下载到本地计算机上。此时下载的文件为完整不压缩的开发版本。如果在开发环境下，推荐使用该版本，因为该版本中包含所有常见错误相关的警告。如果在生产环境下，推荐使用压缩后的生产版本，因为使用生产版本可以带来比开发环境下更快的速度体验。
• 引入Vue.js
  将Vue.js下载到本地计算机后，还需要在项目中引用Vue.js。即将下载后的vue.js文件放置到项目的指定文件夹中。通常文件放置在JS文件夹中，然后在需要应用vue.js文件的页面中使用下面的语句，将其引入到文件中。

<script type="text/javascript" src="JS/vue.js"></script>

注意：引入Vue.js的 script 标签,必须放在所有的自定义脚本文件的script 之前，否则在自定义的脚本代码中应用步到Vue.js。

2.1.2 使用CDN方法

• 在项目中使用Vue.js，还可以采用引用外部CDN文件的方式。在项目中直接通过 script 标签加载CDN文件，通过CDN文件引用Vue.js的代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>

注意：为了防止出现外部CDN文件不可用的情况，还是建议用户将Vue.js下载到本地计算机中。

2.1.3 使用NPM方法

• 在使用Vue.js构建大型应用时，推荐使用NPM方法进行安装，执行命令如下：

npm install vue

注意：使用NPM方法安装Vue.js需要在计算机中安装node.js。
node;js官网：https://nodejs.org/en/，通过node.js官网下载之后，傻瓜式安装即可。

3.1 前端框架开发工具

• 利用Vue.js进行前端框架开发的常用工具有如下几个：WebStorm、IDEA、Vscode

• 前端框架开发常用的工具下载：
  （1）WebStorm官网：https://www.jetbrains.com/webstorm/
  （2）IDEA官网：https://www.jetbrains.com/idea/
  （3）Vscode官网：https://vscode.en.softonic.com/

• WebStorm和IDEA在官网上下载安装之后，试用期为30天，试用期之后有三种方式进行激活，个人建议使用注册码激活，注册码免费激活微信群在网上便可以找到。不过注册码不太稳定，可以去淘宝买一个注册码，WebStorm和IDEA都可以使用该注册码。

备注：后期继续跟进Vue.js前端框架：Vue.js的基础特性，希望大家多多支持和关注。

转载：https://blog.csdn.net/qq_44725331/article/details/115660672