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