2023-1-5 前端達(dá)人
目錄
1、基本介紹
? 概述
Vue 是一套前端框架,免除原生JavaScript中的DOM操作,簡(jiǎn)化書(shū)寫(xiě)。
我們之前也學(xué)習(xí)過(guò)后端的框架 `Mybatis` ,`Mybatis` 是用來(lái)簡(jiǎn)化 `jdbc` 代碼編寫(xiě)的;而 `VUE` 是前端的框架,是用來(lái)簡(jiǎn)化 `JavaScript` 代碼編寫(xiě)的。前面的綜合性案例,里面進(jìn)行了大量的DOM操作,如下
使用 `VUE` 后,這部分代碼我們就不需要再寫(xiě)了。那么 `VUE` 是如何簡(jiǎn)化 DOM 書(shū)寫(xiě)呢?基于MVVM(Model-View-ViewModel)思想,實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,將編程的關(guān)注點(diǎn)放在數(shù)據(jù)上。之前我們是將關(guān)注點(diǎn)放在了 DOM 操作上;而要了解 `MVVM` 思想,必須先了解 `MVC` 思想,如下圖就是 `MVC` 思想圖解
其中的C 就是咱們 js 代碼,M 就是數(shù)據(jù),而 V 是頁(yè)面上展示的內(nèi)容,如下圖:
`MVC` 思想是沒(méi)法進(jìn)行雙向綁定的。雙向綁定是指當(dāng)數(shù)據(jù)模型數(shù)據(jù)發(fā)生變化時(shí),頁(yè)面展示的會(huì)隨之發(fā)生變化,而如果表單數(shù)據(jù)發(fā)生變化,綁定的模型數(shù)據(jù)也隨之發(fā)生變化。接下來(lái)了解`MVVM` 思想,如下圖是三個(gè)組件圖解:
圖中的 `Model` 就是我們的數(shù)據(jù),`View` 是視圖,也就是頁(yè)面標(biāo)簽,用戶(hù)可以通過(guò)瀏覽器看到的內(nèi)容;`Model` 和 `View` 是通過(guò) `ViewModel` 對(duì)象進(jìn)行雙向綁定的,而 `ViewModel` 對(duì)象是 `Vue` 提供的。雙向綁定的效果:下圖是提前準(zhǔn)備的代碼寫(xiě)出來(lái)的,輸入框綁定了 `username` 模型數(shù)據(jù),而在頁(yè)面上也使用 `{{}}` 綁定了 `username` 模型數(shù)據(jù)
通過(guò)瀏覽器打開(kāi)該頁(yè)面可以看到如下頁(yè)面
當(dāng)我們?cè)谳斎肟蛑休斎雰?nèi)容,而輸入框后面隨之實(shí)時(shí)的展示我們輸入的內(nèi)容,這就是雙向綁定的效果。
? 快速入門(mén)
Vue 使用起來(lái)是比較簡(jiǎn)單的,總共分為如下三步:
1. 新建 HTML 頁(yè)面,引入 Vue.js文件
<script src="js/vue.js"></scrip>
2. 在JS代碼區(qū)域,創(chuàng)建Vue核心對(duì)象,進(jìn)行數(shù)據(jù)綁定
new Vue({ el: "#app", data() { return { username: "" } } });創(chuàng)建 Vue 對(duì)象時(shí),需要傳遞一個(gè) js 對(duì)象,而該對(duì)象中需要如下屬性:
● `el` : 用來(lái)指定哪個(gè)地方的標(biāo)簽受 Vue 管理。 該屬性取值 `#app` 中的 `app` 需要是受管理的標(biāo)簽的id屬性值
● `data` :用來(lái)定義數(shù)據(jù)模型
● `methods` :用來(lái)定義函數(shù)。這個(gè)我們?cè)诤竺婢蜁?huì)用到3. 編寫(xiě)視圖
<div id="app"> <input name="username" v-model="username" > {{username}} </div>`{{}}` 是 Vue 中定義的 `插值表達(dá)式` ,在里面寫(xiě)數(shù)據(jù)模型,到時(shí)候會(huì)將該模型的數(shù)據(jù)值展示在這個(gè)位置。
? 整體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="username"> <!--插值表達(dá)式--> {{username}} </div> <script src="js/vue.js"></script> <script> //1. 創(chuàng)建Vue核心對(duì)象 new Vue({ el:"#app", data(){ // data() 是 ECMAScript 6 版本的新的寫(xiě)法 return { username:"" } } /*data: function () { return { username:"" } }*/ }); </script> </body> </html>2、Vue 指令
指令:HTML 標(biāo)簽上帶有 v- 前綴的特殊屬性,不同指令具有不同含義。例如:v-if,v-for…
? v-bind & v-model 指令
? v-bind
該指令可以給標(biāo)簽原有屬性綁定模型數(shù)據(jù)。這樣模型數(shù)據(jù)發(fā)生變化,標(biāo)簽屬性值也隨之發(fā)生變化,例如:
<a v-bind:href="url">百度一下</a>
上面的 `v-bind:"` 可以簡(jiǎn)化寫(xiě)成 `:` ,如下:
<!-- v-bind 可以省略 --> <a :href="url">百度一下</a>? v-model
該指令可以給表單項(xiàng)標(biāo)簽綁定模型數(shù)據(jù)。這樣就能實(shí)現(xiàn)雙向綁定效果。例如:
<input name="username" v-model="username">
? 代碼演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <a v-bind:href="url">點(diǎn)擊一下</a> <a :href="url">點(diǎn)擊一下</a> <input v-model="url"> </div> <script src="js/vue.js"></script> <script> //1. 創(chuàng)建Vue核心對(duì)象 new Vue({ el:"#app", data(){ return { username:"", url:"https://www.baidu.com" } } }); </script> </body> </html>通過(guò)瀏覽器打開(kāi)上面頁(yè)面,并且使用檢查查看超鏈接的路徑,該路徑會(huì)根據(jù)輸入框輸入的路徑變化而變化,這是因?yàn)槌溄雍洼斎肟蚪壎ǖ氖峭粋€(gè)模型數(shù)據(jù)
? v-on 指令
我們?cè)陧?yè)面定義一個(gè)按鈕,并給該按鈕使用 `v-on` 指令綁定單擊事件,html代碼如下:
<input type="button" value="一個(gè)按鈕" v-on:click="show()">
而使用 `v-on` 時(shí)還可以使用簡(jiǎn)化的寫(xiě)法,將 `v-on:` 替換成 `@`,html代碼如下
<input type="button" value="一個(gè)按鈕" @click="show()">
上面代碼綁定的 `show()` 需要在 Vue 對(duì)象中的 `methods` 屬性中定義出來(lái)
new Vue({ el: "#app", methods: { show(){ alert("我被點(diǎn)了"); } } });注意:`v-on:` 后面的事件名稱(chēng)是之前原生事件屬性名去掉on。
例如:
● 單擊事件 : 事件屬性名是 onclick,而在vue中使用是 `v-on:click`
● 失去焦點(diǎn)事件:事件屬性名是 onblur,而在vue中使用時(shí) `v-on:blur`? 整體頁(yè)面代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="button" value="一個(gè)按鈕" v-on:click="show()"><br> <input type="button" value="一個(gè)按鈕" @click="show()"> </div> <script src="js/vue.js"></script> <script> //1. 創(chuàng)建Vue核心對(duì)象 new Vue({ el:"#app", data(){ return { username:"", } }, methods:{ show(){ alert("我被點(diǎn)了..."); } } }); </script> </body> </html>? 條件判斷指令
接下來(lái)通過(guò)代碼演示一下。在 Vue中定義一個(gè) `count` 的數(shù)據(jù)模型,如下
//1. 創(chuàng)建Vue核心對(duì)象 new Vue({ el:"#app", data(){ return { count:3 } } });現(xiàn)在要實(shí)現(xiàn),當(dāng) `count` 模型的數(shù)據(jù)是3時(shí),在頁(yè)面上展示 `div1` 內(nèi)容;當(dāng) `count` 模型的數(shù)據(jù)是4時(shí),在頁(yè)面上展示 `div2` 內(nèi)容;`count` 模型數(shù)據(jù)是其他值時(shí),在頁(yè)面上展示 `div3`。這里為了動(dòng)態(tài)改變模型數(shù)據(jù) `count` 的值,再定義一個(gè)輸入框綁定 `count` 模型數(shù)據(jù)。html 代碼如下:
<div id="app"> <div v-if="count == 3">div1</div> <div v-else-if="count == 4">div2</div> <div v-else>div3</div> <hr> <input v-model="count"> </div>? 整體頁(yè)面代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-if="count == 3">div1</div> <div v-else-if="count == 4">div2</div> <div v-else>div3</div> <hr> <input v-model="count"> </div> <script src="js/vue.js"></script> <script> //1. 創(chuàng)建Vue核心對(duì)象 new Vue({ el:"#app", data(){ return { count:3 } } }); </script> </body> </html>通過(guò)瀏覽器打開(kāi)頁(yè)面并在輸入框輸入不同的值,效果如下
然后我們?cè)诳纯?`v-show` 指令的效果,如果模型數(shù)據(jù) `count ` 的值是3時(shí),展示 `div v-show` 內(nèi)容,否則不展示,html頁(yè)面代碼如下
<div v-show="count == 3">div v-show</div> <br> <input v-model="count">瀏覽器打開(kāi)效果如下:
通過(guò)上面的演示,發(fā)現(xiàn) `v-show` 和 `v-if` 效果一樣,那它們到底有什么區(qū)別呢?我們根據(jù)瀏覽器的檢查功能查看源代碼:
通過(guò)上圖可以看出 `v-show` 不展示的原理是給對(duì)應(yīng)的標(biāo)簽添加 `display` css屬性,并將該屬性值設(shè)置為 `none` ,這樣就達(dá)到了隱藏的效果。而 `v-if` 指令是條件不滿(mǎn)足時(shí)根本就不會(huì)渲染。
? v-for 指令
這個(gè)指令看到名字就知道是用來(lái)遍歷的,該指令使用的格式如下:
<標(biāo)簽 v-for="變量名 in 集合模型數(shù)據(jù)"> {{變量名}} </標(biāo)簽>注意:需要循環(huán)那個(gè)標(biāo)簽,`v-for` 指令就寫(xiě)在那個(gè)標(biāo)簽上。
如果在頁(yè)面需要使用到集合模型數(shù)據(jù)的索引,就需要使用如下格式:
<標(biāo)簽 v-for="(變量名,索引變量) in 集合模型數(shù)據(jù)"> <!--索引變量是從0開(kāi)始,所以要表示序號(hào)的話(huà),需要手動(dòng)的加1--> {{索引變量 + 1}} {{變量名}} </標(biāo)簽>? 代碼演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-for="addr in addrs"> {{addr}} <br> </div> <hr> <div v-for="(addr,i) in addrs"> {{i+1}}--{{addr}} <br> </div> </div> <script src="js/vue.js"></script> <script> //1. 創(chuàng)建Vue核心對(duì)象 new Vue({ el:"#app", data(){ return { addrs:["北京","上海","西安"] } } }); </script> </body> </html>通過(guò)瀏覽器打開(kāi)效果如下
3、生命周期
生命周期的八個(gè)階段:每觸發(fā)一個(gè)生命周期事件,會(huì)自動(dòng)執(zhí)行一個(gè)生命周期方法,這些生命周期方法也被稱(chēng)為鉤子方法。
下圖是 Vue 官網(wǎng)提供的從創(chuàng)建 Vue 到效果 Vue 對(duì)象的整個(gè)過(guò)程及各個(gè)階段對(duì)應(yīng)的鉤子函數(shù)
看到上面的圖,大家無(wú)需過(guò)多的關(guān)注這張圖。這些鉤子方法我們只關(guān)注 `mounted` 就行了。
`mounted`:掛載完成,Vue初始化成功,HTML頁(yè)面渲染成功。而以后我們會(huì)在該方法中發(fā)送異步請(qǐng)求,加載數(shù)據(jù)。
1、基本介紹
? 概述
Element:是餓了么公司前端開(kāi)發(fā)團(tuán)隊(duì)提供的一套基于 Vue 的網(wǎng)站組件庫(kù),用于快速構(gòu)建網(wǎng)頁(yè)。
Element 提供了很多組件(組成網(wǎng)頁(yè)的部件)供我們使用。例如 超鏈接、按鈕、圖片、表格等等~
如下圖左邊的是我們編寫(xiě)頁(yè)面看到的按鈕,上圖右邊的是 Element 提供的頁(yè)面效果,效果一目了然。
我們學(xué)習(xí) Element 其實(shí)就是學(xué)習(xí)怎么從官網(wǎng)拷貝組件到我們自己的頁(yè)面并進(jìn)行修改,官網(wǎng)網(wǎng)址是:元素 - 全球最受歡迎的 Vue UI 框架 (eleme.cn)
進(jìn)入官網(wǎng)能看到如下頁(yè)面
接下來(lái)直接點(diǎn)擊 `組件` ,頁(yè)面如下
2、Element 布局
Element 提供了兩種布局方式,分別是:
● Layout 布局
● Container 布局容器? Layout 局部
通過(guò)基礎(chǔ)的 24 分欄,迅速簡(jiǎn)便地創(chuàng)建布局。也就是默認(rèn)將一行分為 24 欄,根據(jù)頁(yè)面要求給每一列設(shè)置所占的欄數(shù)。
在左菜單欄找到 `Layout 布局` ,然后找到自己喜歡的按鈕樣式,點(diǎn)擊 `顯示代碼` ,在下面就會(huì)展示出對(duì)應(yīng)的代碼,顯示出的代碼中有樣式,有html標(biāo)簽。將樣式拷貝我們自己頁(yè)面的 `head` 標(biāo)簽內(nèi),將html標(biāo)簽拷貝到 `<div id="app"></div>` 標(biāo)簽內(nèi)。
? 整體頁(yè)面代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-row { margin-bottom: 20px; } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> </head> <body> <div id="app"> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app" }) </script> </body> </html>現(xiàn)在需要添加一行,要求該行顯示8個(gè)格子,通過(guò)計(jì)算每個(gè)格子占 3 欄,具體的html 代碼如下
<!-- 添加一行,8個(gè)格子 24/8 = 3 --> <el-row> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row>? Container 布局容器
用于布局的容器組件,方便快速搭建頁(yè)面的基本結(jié)構(gòu)。如下圖就是布局容器效果。
如下圖是官網(wǎng)提供的 Container 布局容器實(shí)例:
該效果代碼中包含了樣式、頁(yè)面標(biāo)簽、模型數(shù)據(jù)。將里面的樣式 `<style>` 拷貝到我們自己頁(yè)面的 `head` 標(biāo)簽中;將html標(biāo)簽拷貝到 `<div id="app"></div>` 標(biāo)簽中,再將數(shù)據(jù)模型拷貝到 `vue` 對(duì)象的 `data()` 中。
? 整體頁(yè)面代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> </head> <body> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>導(dǎo)航一</template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="1-1">選項(xiàng)1</el-menu-item> <el-menu-item index="1-2">選項(xiàng)2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="1-3">選項(xiàng)3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">選項(xiàng)4</template> <el-menu-item index="1-4-1">選項(xiàng)4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>導(dǎo)航二</template> <el-submenu index="2-1"> <template slot="title">選項(xiàng)1</template> <el-menu-item index="2-1-1">選項(xiàng)1-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>導(dǎo)航三</template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="3-1">選項(xiàng)1</el-menu-item> <el-menu-item index="3-2">選項(xiàng)2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="3-3">選項(xiàng)3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">選項(xiàng)4</template> <el-menu-item index="3-4-1">選項(xiàng)4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>刪除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script> new Vue({ el:"#app", data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }) </script> </body> </html>? 完成分頁(yè)條展示
在 Element 官網(wǎng)找到 `Pagination 分頁(yè)` ,在頁(yè)面主體部分找到我們需要的效果,如下
轉(zhuǎn)自:csdn
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn