資訊專欄INFORMATION COLUMN
相關(guān)項目交付的前端框架改造，為方便大家盡快完成從JSP到VUE的技能提升過渡，現(xiàn)將VUE框架相關(guān)知識點整理成文，方便大家快速的學習上手。
本文主要內(nèi)容：
前段框架是什么；
什么是VUE；
VUE實例；
VUE安裝與使用；
VUE知識結(jié)構(gòu)（思維導圖）
早期前端比較簡單，頁面以瀏覽型為主，簡單的表單操作，每個界面上只有很少的JavaScript邏輯，基本不需要框架。隨著AJAX的出現(xiàn)，Web2.0的興起，人們開始在頁面上做比較復雜的事情，然后前端框架才真正出現(xiàn)——用于簡化網(wǎng)頁開發(fā)，提供一套解決方案，開發(fā)人員按選定的規(guī)定來安排代碼結(jié)構(gòu)。
1、ExtJS和dojo，該類框架封裝了一些DOM操作功能、html文檔操作、漂亮的各種控件（按鈕，表單等等）。
2、Google:Angular/Facebook:React/Vue.js，該類屬于MVVM數(shù)據(jù)驅(qū)動框架，以數(shù)據(jù)為基礎(chǔ)，將“數(shù)據(jù)”和“視圖”分離，將web產(chǎn)品向傳統(tǒng)應(yīng)用軟件開發(fā)靠攏。
通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
數(shù)據(jù)驅(qū)動：數(shù)據(jù)改變驅(qū)動了視圖的自動更新。傳統(tǒng)的開發(fā)流程是通過對dom節(jié)點編寫js監(jiān)控輸入，再通過js代碼改變視圖，而vuejs只需要改變數(shù)據(jù)視圖便會跟隨更新，框架內(nèi)部已經(jīng)對監(jiān)控部分進行了封裝。
視圖組件化：把整個網(wǎng)頁拆分成一個個區(qū)塊，每個區(qū)塊我們可以看作成一個組件。網(wǎng)頁由多個組件拼接或者嵌套組成。最終形成的頁面，在開發(fā)過程中，由<template>進行組件拆分。
VUE教程分類
在開發(fā)過程中遇到過的問題，列舉：
1、模板語法
標簽中只能包含一個直接子元素
使用雙大括號插入data中定義的變量，{{name}}，
但是寫在html尖括號中的使用不需要{{}}
2、class與style綁定
元素的樣式通過js中data的一個數(shù)值進行控制
最常見的就是isShow=“none”｜“block”
:style=“{display:isShow}”
可以使用數(shù)組
3、條件渲染
v-if v-else v-else-if //相當于js代碼中的if else 語句
v-show
v-for //相當于js代碼中for語句
4、表單輸入綁定
V-model = “value” //value為data中定義的變量名，輸入框輸入數(shù)值變化時，vue實例中的變量值對應(yīng)著變更
知識點學習流程：
1、開始構(gòu)建 & 數(shù)據(jù)變更視圖
后臺請求 & 數(shù)組展
2、指令使用
1、安裝node.js
Node.js 不是JavaScript的應(yīng)用，也不是一種框架，更不是一門語言。是一種JavaScript的運行環(huán)境，與瀏覽器是一個JavaScript運行環(huán)境一樣。我的理解更趨向于vue服務(wù)器的一種編譯環(huán)境，將vue后綴的各個組件通過node.js中包含的一系列工具最終生成由瀏覽器能運行的標準html、js、css文件。nodejs.org 前往官網(wǎng)下載安裝。
2、項目開發(fā)中運用的node.js核心工具：
npm — 包管理工具
用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用；
用戶也可以上傳自己編寫的包到NPM服務(wù)器給別人下載使用
通過系統(tǒng)指令 npm xxxx 使用
webpack — 打包工具
如圖左顯示的后綴，通過webpack定義的規(guī)則，編譯之后輸出為圖右側(cè)后綴。
3、安裝vue-cli
vue-cli是Vue提供的一個官方cli，專門為單頁面應(yīng)用快速搭建繁雜的腳手架。用于自動生成vue.js+webpack的項目模板。
4、創(chuàng)建工程
5、vue項目相關(guān)的一些依賴包介紹
ESLint 代碼校驗規(guī)則 — 提供一個插件化的javascript代碼檢測工具，檢測過于嚴格，不建議使用Babel 把 JavaScript 中es2015/2016/2017/2046 的新語法轉(zhuǎn)化為 es5，讓低端運行環(huán)境(如瀏覽器和 node )能夠認識并執(zhí)行Router 是Vue.js官方的路由插件，用于設(shè)定訪問路徑，并將路徑和組件映射起來，在router單頁面應(yīng)用中，是路徑之間的切換，也是組件切換。
6、啟動項目
7、項目目錄結(jié)構(gòu)
1、vue 最終還是html、js、css的集合
在vue項目中會存在各種非html標準定義標簽，比如<template>、