接上期后續(xù)

本期分享第十七章節(jié)

vue

已經(jīng)分享一大半了，你們都跟上了嗎？

每天都在學(xué)習(xí)嘛？

有什么不會(huì)的嘛？

今日教學(xué)文檔分享來了?

今日新篇章

【Vue】

1.?【熟悉】Vue簡(jiǎn)介

1.1?簡(jiǎn)介

它是一個(gè)構(gòu)建用戶界面的框架?Vue是一個(gè)前端框架 ??js ?jq

https://www.pmdaniu.com/#file??UI網(wǎng)站

UI ??一般開發(fā)者使用藍(lán)湖 工具 看著UI圖 寫接口

https://lanhuapp.com/web/#/item?

?

是一個(gè)輕量級(jí)的MVVM（Model-View-ViewModel），其實(shí)就是所謂的數(shù)據(jù)的雙向綁定

Mvc

數(shù)據(jù)驅(qū)動(dòng)和組件化的前端開發(fā)

通過簡(jiǎn)單的API就能實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件

指令：

用來擴(kuò)展html標(biāo)簽的功能

https://cn.vuejs.org/

?

給頁面的id=”app”的DIV里面插入某此HTML代碼

JS--- document.getElementById(‘a(chǎn)pp’).innerHtml=””

JQ--- $(“#app”).text()

1.2?其它

簡(jiǎn)單、易學(xué)、更輕量

指令v-xxx開頭??v-if ?v-for 這些作用在html標(biāo)簽中 ?

HTML + JSON數(shù)據(jù)

開發(fā)者 尤雨溪 華人??Vue ?React ?

這幾個(gè)框架都不兼容低版本IE???window Xp ??

2.?【重點(diǎn)】MVVM的思想

2.1?MVVM 設(shè)計(jì)思想

MVC

|--M ?Model （domain,service,serviceimpl.utils.pojo.mapper）

實(shí)體類

Entity Domain pojo --->指數(shù)據(jù)庫里面的表的映射對(duì)象

Vo ?view object ??后端構(gòu)造數(shù)據(jù)對(duì)象轉(zhuǎn)給前端的對(duì)象

DeptDto/DeptForm 數(shù)據(jù)傳輸對(duì)象 ??接收前端傳過來的數(shù)據(jù)

|--V ?view thymeleaf jsp html

|--C ?controller ?接收前端請(qǐng)求(控制器) /Servlet

?

Model：對(duì)應(yīng)數(shù)據(jù)層的域模型，它主要做域模型的同步。通過 Ajax/fetch 等 API 完成客戶端和服務(wù)端業(yè)務(wù) Model 的同步。在模型層間關(guān)系里，它主要用于抽象出 ViewModel 中視圖的 Model。個(gè)人理解：后端提供API，后端服務(wù)架構(gòu)是 控制器+數(shù)據(jù)模型 或者 純控制器。

View：View是作為視圖模板，用于定義結(jié)構(gòu)、布局。它自己不處理數(shù)據(jù)，只是將ViewModel中的數(shù)據(jù)展現(xiàn)出來。此外為了和ViewModel產(chǎn)生關(guān)聯(lián)，那么還需要做的就是數(shù)據(jù)綁定的聲明，指令的聲明，事件綁定的聲明。ViewModel和View之間是雙向綁定，意思就是說ViewModel的變化能夠反映到View中，View的變化也能夠改變ViewModel的數(shù)據(jù)值。

ViewModel：ViewModel起著連接View和Model的作用，同時(shí)用于處理View中的邏輯。在MVC框架中，視圖模型通過調(diào)用模型中的方法與模型進(jìn)行交互，然而在MVVM中View和Model并沒有直接的關(guān)系，在MVVM中，ViewModel從Model獲取數(shù)據(jù)，然后應(yīng)用到View中。個(gè)人理解：Web前端的webserver對(duì)View進(jìn)行雙向綁定渲染。

整個(gè)MVVM實(shí)際上實(shí)現(xiàn)了前后端分離，通過api來實(shí)現(xiàn)前后端交互，前端通過純js或者雙向綁定框架來渲染頁面。

前后端不分離（crm頁面寫在crm項(xiàng)目里面 ?html thymeleaf（模板引擎） ）

前后端分離

?

大概如：

數(shù)據(jù)庫（MySQL、PostgreSQL）<—雙向交互—>api（php、java、Python、node）<—雙向交互—>ajax/fetch/websocket（node服務(wù)、jQ、js）<—雙向綁定—>html（標(biāo)簽、css）。

MVVM有利于項(xiàng)目分工和升級(jí)，所謂對(duì)前后端分離。但也有缺點(diǎn)，就是不利于?。

MVC：服務(wù)端來渲染數(shù)據(jù)，老舊模式。MC屬于純后端，V屬于前端，js權(quán)重不高，有利于SEO。

萬物基于api，一套api可以針對(duì)小程序、app、前端，為何不首先使用。需要SEO對(duì)部分，單獨(dú)分離出項(xiàng)目，采用MVC渲染靜態(tài)頁面或者純html即可。

2.2?MVVM圖例解析

3.?【掌握】IDEA開發(fā)環(huán)境的配置

3.1?安裝插件

?

?

3.2?創(chuàng)建前端項(xiàng)目

?

?

4.?【掌握】安裝和部署

https://cn.vuejs.org/v2/guide/installation.html

4.1?直接下載并用 <script> 標(biāo)簽引入

Vue 會(huì)被注冊(cè)為一個(gè)全局變量。

在開發(fā)環(huán)境下不要使用壓縮版本，不然你就失去了所有常見錯(cuò)誤相關(guān)的警告!

開發(fā)版本包含完整的警告和調(diào)試模式

https://cn.vuejs.org/v2/guide/installation.html

?

?

4.2?CDN

對(duì)于制作原型或?qū)W習(xí)，你可以這樣使用最新版本：

?

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

對(duì)于生產(chǎn)環(huán)境，我們推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞：

?

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

4.3?NPM【后面講】??

在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時(shí) Vue 也提供配套工具來開發(fā)單文件組件。

# 最新穩(wěn)定版

$ npm install vue

4.4?導(dǎo)入js到項(xiàng)目里面

?

?

4.5?第一個(gè)Vue應(yīng)用HelloWorld

1.idea下載插件 （因?yàn)橄铝瞬寮刑崾荆￢ue.js

?

?

?

5.?【掌握】v-text,v-html,v-pre,v-once指令

Js --- innerText ?innerHtml

Jq --- text() ??html()

Vue ??v-text v-html

5.1?概述

Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。

在底層的實(shí)現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)，Vue 能夠智能地計(jì)算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。

5.2?v-text

v-text主要用來更新textContent，可以等同于JS的innerText屬性。

?<span v-text="msg"></span>

這兩者等價(jià)：

?<span>{{msg}}</span>

5.3?v-html

雙大括號(hào)的方式會(huì)將數(shù)據(jù)解釋為純文本，而非HTML。為了輸出真正的HTML，可以用v-html指令。它等同于JS的innerHtml屬性。

或者jquery的$().html(aaa)

?<div v-html="rawHtml"></div>

這個(gè)div的內(nèi)容將會(huì)替換成屬性值rawHtml，直接作為HTML進(jìn)行渲染。

5.4?v-pre

v-pre主要用來跳過這個(gè)元素和它的子元素編譯過程?？梢杂脕盹@示原始的Mustache標(biāo)簽。跳過大量沒有指令的節(jié)點(diǎn)加快編譯。

?

<div id="app">

????<span v-pre>{{message}}</span> //這條語句不進(jìn)行編譯

????<span>{{message}}</span>

</div>

最終僅顯示第二個(gè)span的內(nèi)容

5.5?v-once

v-once關(guān)聯(lián)的實(shí)例，只會(huì)渲染一次。之后的重新渲染，實(shí)例極其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容跳過，這可以用于優(yōu)化更新性能。

?

上面的例子中，msg即使產(chǎn)生改變，也不會(huì)重新渲染。

5.6?案例

6.?【掌握】屬性綁定、事件綁定、雙向綁定

涉及指令

1，v-bind ?字面意思為綁定。是vue中提供的用戶綁定屬性的指令。v-bind可簡(jiǎn)寫成:

2，v-on ?事件綁定指令 可以簡(jiǎn)寫成@

3，v-model ?只能用于表單元素的雙向綁定指令?

6.1?屬性綁定

在以前的開發(fā)中。我們使用title屬性去設(shè)置鼠標(biāo)懸浮的顯示值，在vue 中可以使用V-bind去動(dòng)態(tài)設(shè)置屬性，以title為例

6.2?事件綁定(v-model 一般用于表單)

在以前的開發(fā)中。我們使用onclick等屬性去設(shè)置點(diǎn)擊事件，在vue 中可以使用v-on去設(shè)置方式，可簡(jiǎn)寫成@

?

?

6.3?雙向綁定v-model

v-model ?只能用于表單元素的雙向綁定指令?

v-bind是單向綁定

?

6.4?雙向綁定v-model ?小練習(xí)

7.?【重要】條件渲染v-if v-show

7.1?相關(guān)指令

1，v-if

2，v-else

3，v-else -if

4，v-show

7.2?v-if

v-if可以實(shí)現(xiàn)條件渲染，Vue會(huì)根據(jù)表達(dá)式的值的真假條件來渲染元素。

如果屬性值ok為true，則顯示。否則，不會(huì)渲染這個(gè)元素。

7.3?v-else

v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if后面，否則不起作用。

?

7.4?v-else-if

v-else-if充當(dāng)v-if的else-if塊，可以鏈?zhǔn)降氖褂枚啻??？梢愿臃奖愕膶?shí)現(xiàn)switch語句。

?

7.5?v-show

?<h1 v-show="ok">hello world</h1>

也是用于根據(jù)條件展示元素。和v-if不同的是，如果v-if的值是false，則這個(gè)元素被銷毀，不在dom中。但是v-show的元素會(huì)始終被渲染并保存在dom中，它只是簡(jiǎn)單的切換css的dispaly屬性。

注意：v-if有更高的切換開銷

v-show有更高的初始渲染開銷。

因此，如果要非常頻繁的切換，則使用v-show較好；如果在運(yùn)行時(shí)條件不太可能改變，則v-if較好

7.6?案例

?

?

?

8.?【重點(diǎn)】列表渲染v-for

8.1?v-for

用v-for指令根據(jù)遍歷數(shù)組來進(jìn)行渲染?前端不叫集合

有下面兩種遍歷形式

<div v-for="(item,index) in items"></div> //使用in，index是一個(gè)可選參數(shù)，表示當(dāng)前項(xiàng)的索引

<div v-for="item?in items"></div> //使用in

下面是一個(gè)例子，并且在v-for中，擁有對(duì)父作用域?qū)傩缘耐耆L問權(quán)限。

8.2?v-for案例

?

8.3?for-layuiCRUD案例

?

9.?【了解】過濾器的使用

作用就是格式化

9.1?概述

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示：

?

過濾器分為兩種

??全局過濾器 ?所有Vue實(shí)例里面都可以使用

??局部過濾器 ?當(dāng)前的Vue實(shí)例里面可以使用

9.2?代碼

?

10.?【了解】監(jiān)聽器的使用

10.1?作用

用來監(jiān)聽data里面的某一個(gè)數(shù)據(jù)是否發(fā)生變化。如果發(fā)生變化就會(huì)觸發(fā)監(jiān)聽器的方法

10.2?代碼

?

?

?

11.?【掌握】購物車

11.1?效果

?

11.2?代碼

?

?

12.?【重點(diǎn)】生命周期（頁面渲染順序）【重點(diǎn)內(nèi)容】

12.1?生命周期圖【重點(diǎn)注意create方法】

?

12.2?代碼

13.?【特別重點(diǎn)】組件使用

13.1?什么是組件

組件的出現(xiàn)，是為了拆分Vue的代碼塊，不用同的組件劃分不同的功能模塊，以后我們需要某個(gè)功能時(shí)，就直接調(diào)用對(duì)應(yīng)的組件即可

模塊化：模塊化是從代碼的角度去分析的，方便代碼分層開發(fā)，保證每個(gè)模塊職責(zé)單一

組件：組件化是從界面的角度去劃分的，如：分頁組件、輪播、顏色選擇、文件上傳等

抽象 ?是把公共的東西 像的東西抽出來 （好處：復(fù)用，公共的，缺點(diǎn)：代碼的可讀性直線下降）

?

?

變量名說明：（組件的使用規(guī)范）

按java的開發(fā)思想，變量名往往是駝峰規(guī)則???myComponent ??my-component

在vue中定義組件可以使用駝峰規(guī)則，但是使用組件的時(shí)候如果存在駝峰，應(yīng)該全部改成小寫，并把每個(gè)單詞用-連接 有點(diǎn)像springboot的yml配置文件的語法

?

組件模板的說明

組件里面必須只有一個(gè)template標(biāo)簽

組件的template里面的html代碼只能有一個(gè)根節(jié)點(diǎn)

?

13.2?組件的第一種聲明方式

?

?

?

13.3?組件的第二種聲明方式

?

?

13.4?組件的第三種聲明方式（常用）

13.5?掌握vue中組件的data和methods

組件中也可以有自己的Data和methods，

組件里面的data必須是一個(gè)方法?原因如下

? ??組件在存在是為有復(fù)用，定義一個(gè)組件之后，可能會(huì)有多個(gè)地方使用到該組件。如果按data:{}的寫法，多個(gè)組件會(huì)復(fù)用同一個(gè)data，降低組件的復(fù)用性，而定義為function則不會(huì)

13.6?私有組件的使用

上面的創(chuàng)建方法都是公有的組件，如果只想一個(gè)組件在某一個(gè)Vue實(shí)例里面使用，就可以使用私有組件

13.7?掌握vue組件之間的切換方式

13.7.1?使用v-if v-else v-else-if去切換組件

?

?

13.7.2?使用component占位 去實(shí)現(xiàn)[適合組件多的情況]

13.8?父子組件傳值

13.8.1?子組件直接獲取父組件數(shù)據(jù)（父組件將值傳遞給子組件）

場(chǎng)景：數(shù)據(jù)表格將值傳遞給分頁組件

?

?

13.8.2?使用方法把子組里面的數(shù)據(jù)傳遞到父組件（子傳父）

場(chǎng)景：回調(diào)場(chǎng)景

?

?

?

?

13.9?掌握父組件調(diào)用子組件的方法【重點(diǎn)掌握】

?

?

?

?

平級(jí)組件怎么互相傳值：借助父組件來傳遞

14.?【特別重點(diǎn)】路由

14.1?什么是路由及作用

什么是路由

后端：對(duì)于普通網(wǎng)站，所有的超鏈接都對(duì)應(yīng)一個(gè)url地址，每個(gè)url都對(duì)應(yīng)服務(wù)器上的資源

前端：對(duì)于單頁面應(yīng)用程序來說的，主要通過url中的#（hash）去實(shí)現(xiàn)的，(當(dāng)關(guān)于a標(biāo)簽)

作用：就是用來做跳轉(zhuǎn)的局部更新頁面內(nèi)容

14.2?掌握vue路由的基本使用

1.添加一個(gè)路由的js文件

?

127.0.0.1:8080/user?username=admin&password=123456

14.3?掌握路由跳轉(zhuǎn)傳參的方式

14.3.1?地址傳參【不推薦】數(shù)據(jù)在$route.query里面

?

14.3.2?rest風(fēng)格【推薦】數(shù)據(jù)在$route.param里面

?

?

?

14.4?掌握路由的嵌套使用

就是路由里面套路由，如登陸頁面可以使用手機(jī)或者賬號(hào)密碼登陸

?

14.5?掌握編程式導(dǎo)航的路由跳轉(zhuǎn)

什么是編程試導(dǎo)航

就是通過按鈕點(diǎn)擊調(diào)用方法通過方法去轉(zhuǎn)到某個(gè)路由

?

由于字?jǐn)?shù)限制本文只分享了一半哦

完整版獲取可私信小動(dòng)~

更多干貨我們下期再說！

下期會(huì)分享

第十八章節(jié)

SpringSecurity

相關(guān)知識(shí)~

下期見！