相关项目交付的前端框架改造，为方便大家尽快完成从JSP到VUE的技能提升过渡，现将VUE框架相关知识点整理成文，方便大家快速的学习上手。
本文主要内容：
前段框架是什么；
什么是VUE；
VUE实例；
VUE安装与使用；
VUE知识结构（思维导图）
早期前端比较简单，页面以浏览型为主，简单的表单操作，每个界面上只有很少的JavaScript逻辑，基本不需要框架。随着AJAX的出现，Web2.0的兴起，人们开始在页面上做比较复杂的事情，然后前端框架才真正出现——用于简化网页开发，提供一套解决方案，开发人员按选定的规定来安排代码结构。
1、ExtJS和dojo，该类框架封装了一些DOM操作功能、html文档操作、漂亮的各种控件（按钮，表单等等）。
2、Google:Angular/Facebook:React/Vue.js，该类属于MVVM数据驱动框架，以数据为基础，将“数据”和“视图”分离，将web产品向传统应用软件开发靠拢。
通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
数据驱动：数据改变驱动了视图的自动更新。传统的开发流程是通过对dom节点编写js监控输入，再通过js代码改变视图，而vuejs只需要改变数据视图便会跟随更新，框架内部已经对监控部分进行了封装。
视图组件化：把整个网页拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。最终形成的页面，在开发过程中，由<template>进行组件拆分。
VUE教程分类
在开发过程中遇到过的问题，列举：
1、模板语法
标签中只能包含一个直接子元素
使用双大括号插入data中定义的变量，{{name}}，
但是写在html尖括号中的使用不需要{{}}
2、class与style绑定
元素的样式通过js中data的一个数值进行控制
最常见的就是isShow=“none”｜“block”
:style=“{display:isShow}”
可以使用数组
3、条件渲染
v-if v-else v-else-if //相当于js代码中的if else 语句
v-show
v-for //相当于js代码中for语句
4、表单输入绑定
V-model = “value” //value为data中定义的变量名，输入框输入数值变化时，vue实例中的变量值对应着变更
知识点学习流程：
1、开始构建 & 数据变更视图
后台请求 & 数组展
2、指令使用
1、安装node.js
Node.js 不是JavaScript的应用，也不是一种框架，更不是一门语言。是一种JavaScript的运行环境，与浏览器是一个JavaScript运行环境一样。我的理解更趋向于vue服务器的一种编译环境，将vue后缀的各个组件通过node.js中包含的一系列工具最终生成由浏览器能运行的标准html、js、css文件。nodejs.org 前往官网下载安装。
2、项目开发中运用的node.js核心工具：
npm — 包管理工具
用户从NPM服务器下载别人编写的第三方包到本地使用；
用户也可以上传自己编写的包到NPM服务器给别人下载使用
通过系统指令 npm xxxx 使用
webpack — 打包工具
如图左显示的后缀，通过webpack定义的规则，编译之后输出为图右侧后缀。
3、安装vue-cli
vue-cli是Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。用于自动生成vue.js+webpack的项目模板。
4、创建工程
5、vue项目相关的一些依赖包介绍
ESLint 代码校验规则 — 提供一个插件化的javascript代码检测工具，检测过于严格，不建议使用Babel 把 JavaScript 中es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行Router 是Vue.js官方的路由插件，用于设定访问路径，并将路径和组件映射起来，在router单页面应用中，是路径之间的切换，也是组件切换。
6、启动项目
7、项目目录结构
1、vue 最终还是html、js、css的集合
在vue项目中会存在各种非html标准定义标签，比如<template>、