Vue框架簡介
Vue是一套構(gòu)建用戶界面的框架, 開發(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項目目錄結(jié)構(gòu)
(加粗的常會修改到)
--build項目構(gòu)建(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項目構(gòu)建命令
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)
控制頁面的局部跳轉(zhuǎn)刷新,相當于MVC框架中的controller中的定義的@requestMapping注解配置跳轉(zhuǎn)頁面
路由配置文件在項目中的src目錄下
Element-UI使用
項目集成
使用方法同layui,使用比layui厲害
常用的組件總結(jié):
<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標簽封裝了一遍,使用方法大同小異。例如:點擊事件的定義不同