这是我参与8月更文挑战的第6天

前言

Hi，大家好，我是希留。

现在前后端分离技术越来越流行，很多公司的传统Jsp项目也慢慢重构成前后端分离的项目，虽然大型公司都是有专门的前端人员，但是也有很多的公司是前后端代码分离，但是人不分离的。所以，作为后端开发人员，了解并掌握一定的前端技术也是很有必要的。

本系列文章主要介绍vue2.X的相关知识，需要有一定的HTML、CSS 和 JavaScript的基础。如果你也对vue感兴趣，就快跟着我们一起来学习吧~

一、为什么学习Vue？

现在提起前端框架，无非就是三大框架：Vue、Angular、React，Angular是谷歌开发的，国内用的比较少。React是facebook开发的，里面用的多是高阶函数，需要你对js特别熟，对初学者不是很友好。Vue是是中国人尤雨溪开发的，结合了Angular和React的优点，国内公司用的比较多，它所提倡的渐进式学习，从JavaScript过度到Vue是很平滑的，没有陡峭的学习曲线；还有就是它的中文文档非常完善，有利于我们的学习。

二、Vue是什么？

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

简单来说，Vue就是一个前端框架，而且是渐进式框架。那么问题来了，什么是渐进式框架呢？

是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js，也就意味着你可以渐渐的使用vue的全部。

三、Vue的特点

1.MVVM模型

MVVM是Mode-View-ViewModel的缩写，其核心是提供对View和ViewModel的双向数据绑定，当ViewModel的数据发生变化时，View也会同步更新数据，反之亦然。

View是视图层，也就是用户界面。主要用于表现DOM节点 Model是指数据模型，是业务逻辑相关的数据对象，通常从数据库映射而来在这里表示JavaScript对象 ViewModel是连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者。

2.双向绑定

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。Vue的双向绑定就是通过Object.defineProperty() 实现的，这个函数能够可以定义对象的属性相关描述符，从而劫持各个属性的setter、getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。

3.虚拟DOM

传统的开发模式中，使用原生js或jq操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程，造成了极大地性能浪费，当DOM操作频繁时，甚至会造成卡顿。而虚拟DOM则不会马上操作DOM，而是将更新的diff内容存在本地一个 JS 对象（虚拟 DOM）中，等更新完成后将最终的对象映射为真实DOM，并进行渲染。

4.组件式开发

各种模块进行拆分，变成单独的组件，然后通过数据绑定。用解耦、可复用的组件来构造界面。

5.指令化

通过内置指令或者自定义指令，可以根据数据的变化来做到控制组件，简化代码。

四、开始使用Vue

1.单页面使用Vue

新建一个html页面，引入Vue.js，创建一个vue实例，将数据绑定到页面元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--view层，模板-->
		<div id="app">
		    {{message}}
		</div>
		
		<!--1.导入Vue.js-->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
		
		<script type="text/javascript">
		    var vm = new Vue({
		        el:"#app",
		        
				/*Model：数据*/
		        data:{
		            message:"hello,vue!"
		        }
		    });
		</script>		
	</body>
</html>

在浏览器打开这个html页面，成功显示数据。
在这里插入图片描述

此时，打开开发者工具，在控制台输入vm.message=“Hello，World”，然后回车，会发现页面的内容也发生了改变。如下图所示在这里插入图片描述

在这个操作中，我并没有主动操作DOM，就让页面的内容发生了变化，这就是借助了Vue的数据绑定功能实现的。

2.创建Vue项目

创建Vue项目时需要先安装好node.js及环境配置，node.js是javascript的运行环境。相当于Java中的jdk。

2.1 安装Node.js

安装参考：www.cnblogs.com/zhouyu2017/… 安装完后，在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口，输入node -v回车显示版本说明node安装成功，输入npm -v回车显示版本说明自带的npm也安装成功了。在这里插入图片描述

2.2 配置npm环境变量

新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西，相当于Java中的Maven。建议将npm的注册表源设置为国内的镜像，可以大幅提升安装速度安装淘宝的 npm镜像，输入命令 npm config set registry registry.npm.taobao.org 然后查看是否成功，输入命令： npm config get registry 如果能显示淘宝的镜像地址则是成功。

2.3 安装vue-cli脚手架

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装。让你不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到你的发挥。（说明：只需要第一次安装时执行，这里安装的是vue2，安装一次后以后项目就不再需要安装了。）

安装vue-cli手脚架命令： npm install -g @vue/cli

完成后输入命令： vue -V 出现版本号就是正常

在这里插入图片描述

2.4 初始化一个vue项目

打开cmd窗口，进入一个文件目录下，输入命令：vue init webpack project 开始初始化vue项目，依次根据提示输入相关信息。在这里插入图片描述初始化完成之后，进入项目根目录，输入命令：npm run dev，启动项目启动完成后，浏览器输入地址，成功显示页面。

总结

好了，以上就是今天要讲的内容，相信大家已经对Vue有了初步的了解了，赶快动手操作起来，开启vue的学习之旅，gogogo。

感谢大家的阅读，如有不足之处，还请多多指教，同为程序猿的你，欢迎在评论区留下独到的见解~

【前端Vue学习系列】一、初识Vue

前言