資訊專欄INFORMATION COLUMN
相關項目交付的前端框架改造，為方便大家盡快完成從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>、