Vue框架簡(jiǎn)介
Vue是一套構(gòu)建用戶(hù)界面的框架， 開(kāi)發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。是基于MVVM（Model-View-ViewModel）設(shè)計(jì)思想。提供MVVM數(shù)據(jù)雙向綁定的庫(kù)，專(zhuān)注于UI層面
vue設(shè)計(jì)思想
View就是DOM層，ViewModel就是通過(guò)new Vue()的實(shí)例對(duì)象，Model是原生js。開(kāi)發(fā)者修改了DOM，ViewModel對(duì)修改的行為進(jìn)行監(jiān)聽(tīng)，監(jiān)聽(tīng)到了后去更改Model層的數(shù)據(jù)，然后再通過(guò)ViewModel去改變View，從而達(dá)到自動(dòng)同步。
Vue核心思想
1.數(shù)據(jù)驅(qū)動(dòng)
數(shù)據(jù)驅(qū)動(dòng)
數(shù)據(jù)驅(qū)動(dòng)（數(shù)據(jù)雙向綁定）， 在Vue中，Directives對(duì)view進(jìn)行了封裝，當(dāng)model中的數(shù)據(jù)發(fā)生變化時(shí)，Vue就會(huì)通過(guò)Directives指令去修改DOM，同時(shí)也通過(guò)DOM Listener實(shí)現(xiàn)對(duì)視圖view的監(jiān)聽(tīng)，當(dāng)DOM改變時(shí)，就會(huì)被監(jiān)聽(tīng)到，實(shí)現(xiàn)model的改變，從而實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。
2.組件化
組件化就是實(shí)現(xiàn)了擴(kuò)展HTML元素，封裝可用的代碼。
1、頁(yè)面上每個(gè)獨(dú)立的可視/可交互區(qū)域視為一個(gè)組件。
2、每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄，組件所需的各種資源在這個(gè)目錄下就近維護(hù)。
3、頁(yè)面不過(guò)是組件的容器，組件可以嵌套自由組合形成完整的頁(yè)面
vue項(xiàng)目目錄結(jié)構(gòu)
目錄結(jié)構(gòu)
（加粗的常會(huì)修改到）
--build項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
--config配置目錄，包括端口號(hào)等。我們初學(xué)可以使用默認(rèn)的。
--node_modulesnpm 加載的項(xiàng)目依賴(lài)模塊
--src這里是我們要開(kāi)發(fā)的目錄，基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件：App.vue: 項(xiàng)目入口文件，我們也可以直接將組件寫(xiě)這里，而不使用 components 目錄。main.js: 項(xiàng)目的核心文件。引用組件時(shí)需要修改。
--static靜態(tài)資源目錄，如圖片、字體等。
--test初始測(cè)試目錄，可刪除
--.xxxx文件這些是一些配置文件，包括語(yǔ)法配置，git配置等。
--index.html首頁(yè)入口文件，你可以添加一些 meta 信息或統(tǒng)計(jì)代碼啥的。
--package.json項(xiàng)目配置文件。
--README.md項(xiàng)目的說(shuō)明文檔，markdown 格式
Vue項(xiàng)目構(gòu)建命令
npm install 安裝項(xiàng)目依賴(lài)包
npm run dev/npm run serve 啟動(dòng)項(xiàng)目
Vue常用命令
與寫(xiě)html頁(yè)面一樣，只是都是用組件。里面用到的<el-radio>就是elment-ui提供的組件。相當(dāng)于<radio>按鈕選擇直接使用就可以，跟html里用法一樣。
頁(yè)面代碼實(shí)例
數(shù)據(jù)展示命令：
v-html、v-show、v-if、v-for等等，例如v-for命令相當(dāng)于html里的for循序遍歷List中的數(shù)據(jù)，v-if命令相當(dāng)于if判斷滿足條件執(zhí)行，v-show相當(dāng)于html里的disable參數(shù)。v-html將數(shù)據(jù)里定義的html頁(yè)面賦值給view
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 {{變量名}}（雙大括號(hào)）的文本賦值；變量即是后臺(tái)返回的數(shù)據(jù)。
v-for命令
綁定按鈕事件：
@click可以定義一個(gè)事件函數(shù)
定義事件
將事件寫(xiě)到methods包含的大括號(hào)內(nèi)
定義事件
Vue路由（Vue-Router）
控制頁(yè)面的局部跳轉(zhuǎn)刷新，相當(dāng)于MVC框架中的controller中的定義的@requestMapping注解配置跳轉(zhuǎn)頁(yè)面
路由配置文件在項(xiàng)目中的src目錄下
路由在項(xiàng)目中的配置
Element-UI使用
項(xiàng)目集成
第一步引入依賴(lài)
第二步-main函數(shù)引入
使用方法同layui，使用比layui厲害
常用的組件總結(jié)：
<el-input>標(biāo)簽相當(dāng)于input框；
<el-radio>標(biāo)簽相當(dāng)于radio框；
<el-chekbox>標(biāo)簽相當(dāng)于chekbox框；
<el-upload>標(biāo)簽相當(dāng)于file上傳文件；
<el-form>定義表單，<el-form-item>定義表單中的項(xiàng)；
<el-table></el-table>定義表格相當(dāng)于table，<el-table-column>定義一行，相當(dāng)于<td>，可以綁定數(shù)據(jù)，動(dòng)態(tài)顯示表格
總的來(lái)說(shuō)，就是將原有的html標(biāo)簽封裝了一遍，使用方法大同小異。例如：點(diǎn)擊事件的定義不同
表單實(shí)例代碼
表單效果
