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判斷滿(mǎn)足條件執(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í)例代碼

表單效果