Vue+ElementUI學習總結(jié)

Vue框架簡介

Vue是一套構(gòu)建用戶界面的框架, 開發(fā)只需要關注視圖層, 它不僅易于上手,還便于與第三方庫或既有項目的整合。是基于MVVM(Model-View-ViewModel)設計思想。提供MVVM數(shù)據(jù)雙向綁定的庫,專注于UI層面

vue設計思想

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ù)驅(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)


目錄結(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ù)。

v-for命令

綁定按鈕事件:

@click可以定義一個事件函數(shù)

定義事件

將事件寫到methods包含的大括號內(nèi)

定義事件

Vue路由(Vue-Router)

控制頁面的局部跳轉(zhuǎn)刷新,相當于MVC框架中的controller中的定義的@requestMapping注解配置跳轉(zhuǎn)頁面

路由配置文件在項目中的src目錄下

路由在項目中的配置

Element-UI使用

項目集成

第一步引入依賴
第二步-main函數(shù)引入

使用方法同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標簽封裝了一遍,使用方法大同小異。例如:點擊事件的定義不同

表單實例代碼


表單效果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關于...
    云之外閱讀 5,074評論 0 29
  • 一:什么是閉包?閉包的用處? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,721評論 1 52
  • 主要還是自己看的,所有內(nèi)容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,375評論 0 25
  • Vue.js是什么 Vue.js(讀音 /vju?/, 類似于 view) 是一套構(gòu)建用戶界面的 漸進式框架。與其...
    魚魚吃貓貓閱讀 3,284評論 1 12
  • 虛擬偶像很火,但卻不賺錢! 別光顧著說初音未來,或者說開始盈利的洛天依。 看看更多的虛擬偶像們吧,她們其實還在為脫...
    張書樂閱讀 995評論 0 50