輕量級(jí)框架:只關(guān)注視圖層,是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十 kb;
簡(jiǎn)單易學(xué):國(guó)人開(kāi)發(fā),中文文檔,不存在語(yǔ)言障礙 ,易于理解和學(xué)習(xí);
雙向數(shù)據(jù)綁定:保留了 angular 的特點(diǎn),在數(shù)據(jù)操作方面更為簡(jiǎn)單;
組件化:保留了 react 的優(yōu)點(diǎn),實(shí)現(xiàn)了 html 的封裝和重用,在構(gòu)建單頁(yè)面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì);
視圖,數(shù)據(jù),結(jié)構(gòu)分離:使數(shù)據(jù)的更改更為簡(jiǎn)單,不需要進(jìn)行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關(guān)操作;
虛擬 DOM:dom 操作是非常耗費(fèi)性能的, 不再使用原生的 dom 操作節(jié)點(diǎn),極大解放 dom操作,但具體操作的還是 dom 不過(guò)是換了另一種方式;
運(yùn)行速度更快: 相比較與 react 而言,同樣是操作虛擬 dom,就性能而言,vue 存在很大的優(yōu)勢(shì)。
通過(guò) props
$emit 方法
共同點(diǎn):都能控制元素的顯示和隱藏;
不同點(diǎn):實(shí)現(xiàn)本質(zhì)方法不同,v-show 本質(zhì)就是通過(guò)控制 css 中的 display 設(shè)置為 none,控制隱藏,只會(huì)編譯一次;v-if 是動(dòng)態(tài)的向 DOM 樹(shù)內(nèi)添加或者刪除 DOM 元素,若初始值為false,就不會(huì)編譯了。而且 v-if 不停的銷毀和創(chuàng)建比較消耗性能。
總結(jié):如果要頻繁切換某節(jié)點(diǎn),使用 v-show(切換開(kāi)銷比較小,初始開(kāi)銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用 v-if(初始渲染開(kāi)銷較小,切換開(kāi)銷比較大)。
在組件中的 style 前面加上 scoped
keep-alive 是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。
ref="domName" 用法:this.$refs.domName
答:v-model 雙向數(shù)據(jù)綁定;
v-for 循環(huán);
v-if v-show 顯示與隱藏;
v-on 事件;v-once: 只綁定一次。
答:vue 文件的一個(gè)加載器,將 template/js/style 轉(zhuǎn)換成 js 模塊。
用途:js 可以寫 es6、style 樣式可以 scss 或 less、template 可以加 jade 等
答:需要使用 key 來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí),Diff 算法就可以正確的識(shí)別此節(jié)點(diǎn)。作用主要是為了高效的更新虛擬 DOM。
答:請(qǐng)求后臺(tái)資源的模塊。npm install axios --save 裝好,js 中使用 import 進(jìn)來(lái),然后. get 或. post。返回在. then 函數(shù)中如果成功,失敗則是在.catch 函數(shù)中。
答:v-model 用于表單數(shù)據(jù)的雙向綁定,其實(shí)它就是一個(gè)語(yǔ)法糖,這個(gè)背后就做了兩個(gè)操作:
v-bind 綁定一個(gè) value 屬性;
v-on 指令給當(dāng)前元素綁定 input 事件。
答:assets 文件夾是放靜態(tài)資源;components 是放組件;router 是定義路由相關(guān)的配置;app.vue 是一個(gè)應(yīng)用主組件;main.js 是入口文件。
答:computed:
當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到 computed最典型的栗子: 購(gòu)物車商品結(jié)算的時(shí)候
watch:
當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用 watch
栗子:搜索數(shù)據(jù)
答:可以
答:當(dāng)你修改了 data 的值然后馬上獲取這個(gè) dom 元素的值,是不能獲取到更新后的值,你需要使用 $nextTick 這個(gè)回調(diào),讓修改后的 data 值渲染更新到 dom 元素之后在獲取,才能成功。
答:因?yàn)?JavaScript 的特性所導(dǎo)致,在 component 中,data 必須以函數(shù)的形式存在,不可以是對(duì)象。
組建中的 data 寫成一個(gè)函數(shù),數(shù)據(jù)以函數(shù)返回值的形式定義,這樣每次復(fù)用組件的時(shí)候,都會(huì)返回一份新的 data,相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間,它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù),不會(huì)造成混亂。而單純的寫成對(duì)象形式,就是所有的組件實(shí)例共用了一個(gè) data,這樣改一個(gè)全都改了。
答:主張最少;可以根據(jù)不同的需求選擇不同的層級(jí);
答:vue 雙向數(shù)據(jù)綁定是通過(guò) 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的, 也就是說(shuō)數(shù)據(jù)和視圖同步,數(shù)據(jù)發(fā)生變化,視圖跟著變化,視圖變化,數(shù)據(jù)也隨之發(fā)生改變;
核心:關(guān)于 VUE 雙向數(shù)據(jù)綁定,其核心是 Object.defineProperty() 方法。
答:?jiǎn)雾?yè)面應(yīng)用(SPA),通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用,瀏覽器一開(kāi)始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中。但在寫的時(shí)候,還是會(huì)分開(kāi)寫(頁(yè)面片段),然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入,單頁(yè)面的頁(yè)面跳轉(zhuǎn),僅刷新局部資源。多應(yīng)用于 pc 端。
多頁(yè)面(MPA),就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面,頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新
單頁(yè)面的優(yōu)點(diǎn):
用戶體驗(yàn)好,快,內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面,基于這一點(diǎn) spa 對(duì)服務(wù)器壓力較小;前后端分離;頁(yè)面效果會(huì)比較炫酷(比如切換頁(yè)面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫)。
單頁(yè)面缺點(diǎn):
不利于 seo;導(dǎo)航不可用,如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。(由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能,所以需要自己建立堆棧管理);初次加載時(shí)耗時(shí)多;頁(yè)面復(fù)雜度提高很多。
答:當(dāng) v-if 與 v-for 一起使用時(shí),v-for 具有比 v-if 更高的優(yōu)先級(jí),這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以,不推薦 v-if 和 v-for 同時(shí)使用。
如果 v-if 和 v-for 一起用的話,vue 中的的會(huì)自動(dòng)提示 v-if 應(yīng)該放到外層去。
答:相同點(diǎn):assets 和 static 兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片,字體圖標(biāo),樣式文件等都可以放在這兩個(gè)文件下,這是相同點(diǎn)
不相同點(diǎn):assets 中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí),也就是運(yùn)行 npm run build 時(shí)會(huì)將assets 中放置的靜態(tài)資源文件進(jìn)行打包上傳,所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積,代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在 static 文件中跟著 index.html 一同上傳至服務(wù)器。static 中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程,而是直接進(jìn)入打包好的目錄,直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳,在打包時(shí)會(huì)提高一定的效率,但是 static 中的資源文件由于沒(méi)有進(jìn)行壓縮等操作,所以文件的體積也就相對(duì)于 assets 中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。
建議:將項(xiàng)目中 template 需要的樣式文件 js 文件等都可以放置在 assets 中,走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如 iconfoont.css 等文件可以放置在 static中,因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過(guò)處理,我們不再需要處理,直接上傳。
答:.stop:等同于 JavaScript 中的 event.stopPropagation(),防止事件冒泡;
.prevent:等同于 JavaScript 中的 event.preventDefault(),防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消,則取消該事件,而不停止事件的進(jìn)一步傳播);.capture:與事件冒泡的方向相反,事件捕獲由外到內(nèi);
.self:只會(huì)觸發(fā)自己范圍內(nèi)的事件,不包含子元素;
.once:只會(huì)觸發(fā)一次。
24.vue 的兩個(gè)核心點(diǎn)
答:數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)
數(shù)據(jù)驅(qū)動(dòng):ViewModel,保證數(shù)據(jù)和視圖的一致性。
組件系統(tǒng):應(yīng)用類 UI 可以看作全部是由組件樹(shù)構(gòu)成的。
答:jQuery 是使用選擇器($)選取 DOM 對(duì)象,對(duì)其進(jìn)行賦值、取值、事件綁定等操作,其實(shí)和原生的 HTML 的區(qū)別只在于可以更方便的選取和操作 DOM 對(duì)象,而數(shù)據(jù)和界面是在一起的。比如需要獲取 label 標(biāo)簽的內(nèi)容:$("lable").val();, 它還是依賴 DOM 元素的值。
Vue 則是通過(guò) Vue 對(duì)象將數(shù)據(jù)和 View 完全分離開(kāi)來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM 對(duì)象,可以說(shuō)數(shù)據(jù)和 View 是分離的,他們通過(guò) Vue 對(duì)象這個(gè) vm 實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的 MVVM。
答: 在 template 中引入組件;
在 script 的第一行用 import 引入路徑;
用 component 中寫上組件名稱。
答:delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。
答:安裝動(dòng)態(tài)懶加載所需插件;使用 CDN 資源。
答:使用 location.href='/url'來(lái)跳轉(zhuǎn),簡(jiǎn)單方便,但是刷新了頁(yè)面;
使用 history.pushState('/url'),無(wú)刷新頁(yè)面,靜態(tài)跳轉(zhuǎn);
引進(jìn) router,然后使用 router.push('/url') 來(lái)跳轉(zhuǎn),使用了 diff 算法,實(shí)現(xiàn)了按需加載,減少了 dom 的消耗。
其實(shí)使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒(méi)什么差別的,因?yàn)?vue-router 就是用了history.pushState(),尤其是在 history
答:簡(jiǎn)單來(lái)說(shuō),假如父組件需要在子組件內(nèi)放一些 DOM,那么這些 DOM 是顯示、不顯示、在哪個(gè)地方顯示、如何顯示,就是 slot 分發(fā)負(fù)責(zé)的活。
答:根據(jù) vue-cli 腳手架規(guī)范,一個(gè) js 文件,一個(gè) CSS 文件。
答:Vue 路由在 Android 機(jī)上有問(wèn)題,babel 問(wèn)題,安裝 babel polypill 插件解決。
答: 使用 @click.native。原因:router-link 會(huì)阻止 click 事件,.native 指直接監(jiān)聽(tīng)一個(gè)原生事件。
答: 方法一:只用 a 標(biāo)簽,不適用 button 標(biāo)簽;方法二:使用 button 標(biāo)簽和Router.navigate 方法
答:從瀏覽器中創(chuàng)建 XMLHttpRequests;
node.js 創(chuàng)建 http 請(qǐng)求;
支持 Promise API;
攔截請(qǐng)求和響應(yīng);
轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù);
取消請(qǐng)求;
自動(dòng)換成 json。
axios 中的發(fā)送字段的參數(shù)是 data 跟 params 兩個(gè),兩者的區(qū)別在于 params 是跟請(qǐng)求地址一起發(fā)送的,data 的作為一個(gè)請(qǐng)求體進(jìn)行發(fā)送params 一般適用于 get 請(qǐng)求,data 一般適用于 post put 請(qǐng)求。
答:1. 建立組件的模板,先把架子搭起來(lái),寫寫樣式,考慮好組件的基本邏輯。(os:思考 1 小時(shí),碼碼 10 分鐘,程序猿的準(zhǔn)則。)
. 準(zhǔn)備好組件的數(shù)據(jù)輸入。即分析好邏輯,定好 props 里面的數(shù)據(jù)、類型。
. 準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯,做好要暴露出來(lái)的方法。
. 封裝完畢了,直接調(diào)用即可
答:用法:query 要用 path 來(lái)引入,params 要用 name 來(lái)引入,接收參數(shù)都是類似的,分別是 this.$route.query.name 和 this.$route.params.name。
url 地址顯示:query 更加類似于我們 ajax 中 get 傳參,params 則類似于 post,說(shuō)的再簡(jiǎn)單一點(diǎn),前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示
注意點(diǎn):query 刷新不會(huì)丟失 query 里面的數(shù)據(jù)
params 刷新 會(huì) 丟失 params 里面的數(shù)據(jù)。
答:使用 vue 開(kāi)發(fā)時(shí),在 vue 初始化之前,由于 div 是不歸 vue 管的,所以我們寫的代碼在還沒(méi)有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象,看到類似于 {{message}} 的字樣,雖然一般情況下這個(gè)時(shí)間很短暫,但是我們還是有必要讓解決這個(gè)問(wèn)題的。
首先:在 css 里加上 [v-cloak] {
display: none;
}。
如果沒(méi)有徹底解決問(wèn)題,則在根元素加上 style="display: none;" :style="
{display:'block'}"
答: push();pop();shift();unshift();splice(); sort();reverse()
答:Mint UI,element,VUX
beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(創(chuàng)建、掛載、更新、卸載)掛載中可以操作DOM,創(chuàng)建中不能操作DOM;常用掛載或者創(chuàng)建生命周期就行了
將DOM抽象為虛擬DOM, 然后通過(guò)新舊虛擬DOM 這兩個(gè)對(duì)象的差異(Diff算法),最終只把變化的部分重新渲染,提高渲染效率的過(guò)程;
diff 是通過(guò)JS層面的計(jì)算,返回一個(gè)patch對(duì)象,即補(bǔ)丁對(duì)象,在通過(guò)特定的操作解析patch對(duì)象,完成頁(yè)面的重新渲染
1. vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變
vue2 的雙向數(shù)據(jù)綁定是利用ES5 的一個(gè) API Object.definePropert()對(duì)數(shù)據(jù)進(jìn)行劫持 結(jié)合 發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的。
vue3 中使用了 es6 的 ProxyAPI 對(duì)數(shù)據(jù)代理。
相比于vue2.x,使用proxy的優(yōu)勢(shì)如下
defineProperty只能監(jiān)聽(tīng)某個(gè)屬性,不能對(duì)全對(duì)象監(jiān)聽(tīng)
可以省去for in、閉包等內(nèi)容來(lái)提升效率(直接綁定整個(gè)對(duì)象即可)
可以監(jiān)聽(tīng)數(shù)組,不用再去單獨(dú)的對(duì)數(shù)組做特異性操作 vue3.x可以檢測(cè)到數(shù)組內(nèi)部數(shù)據(jù)的變化
2、默認(rèn)進(jìn)行懶觀察(lazy observation)
在 2.x 版本里,不管數(shù)據(jù)多大,都會(huì)在一開(kāi)始就為其創(chuàng)建觀察者。當(dāng)數(shù)據(jù)很大時(shí),這可能會(huì)在頁(yè)面載入時(shí)造成明顯的性能壓力。3.x 版本,只會(huì)對(duì)「被用于渲染初始可見(jiàn)部分的數(shù)據(jù)」創(chuàng)建觀察者,而且 3.x 的觀察者更高效。
3、更精準(zhǔn)的變更通知
比例來(lái)說(shuō):2.x 版本中,使用 Vue.set 來(lái)給對(duì)象新增一個(gè)屬性時(shí),這個(gè)對(duì)象的所有 watcher 都會(huì)重新運(yùn)行;3.x 版本中,只有依賴那個(gè)屬性的 watcher 才會(huì)重新運(yùn)行。
4、vue3新加入了TypeScript以及PWA的支持
5、vue2和vue3組件發(fā)送改變
1.beforecreate:可以在加個(gè)loading事件,在加載實(shí)例是觸發(fā)
2.created:初始化完成時(shí)的事件寫在這里,如在這結(jié)束loading事件,異步請(qǐng)求也適宜在這里調(diào)用
3.mounted:掛載元素,獲取到dom節(jié)點(diǎn)
4.updated:如果對(duì)數(shù)據(jù)統(tǒng)一處理,在這里寫上相應(yīng)函數(shù)
5.beforeDestroy:可以一個(gè)確認(rèn)停止事件的確認(rèn)框
6.nextTick:更新數(shù)據(jù)后立即操作dom
v-model:一般用在表達(dá)輸入,很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定
v-html:更新元素的innerHTML
v-show與v-if:條件渲染,注意二者區(qū)別
v-on:click:可以簡(jiǎn)寫為@click,@綁定一個(gè)事件。如果事件觸發(fā)了,就可以指定事件的處理函數(shù)
v-for:基于源數(shù)據(jù)多次渲染元素或模板
v-bind:title=”msg”簡(jiǎn)寫:title="msg"
我們開(kāi)發(fā)Web應(yīng)用的時(shí)候,會(huì)用到大量的js、css、image、html等靜態(tài)資源資源。
靜態(tài)資源映射
默認(rèn)情況下,我們只需要將靜態(tài)資源放在一下幾個(gè)目錄中就可以直接通過(guò)url在瀏覽器中訪問(wèn)了。
如果這四個(gè)目錄中有相同的靜態(tài)資源文件,那么優(yōu)先訪問(wèn)哪個(gè)目錄下面的資源啊?
靜態(tài)資源的默認(rèn)訪問(wèn)優(yōu)先級(jí):/META-INF/resources/>/resources/>/static/>/public/
在四個(gè)目錄中都放一個(gè)static.html的文件,每個(gè)html文件中都說(shuō)明自己所在的目錄,訪問(wèn)結(jié)果如下:
SpringBoot關(guān)于靜態(tài)資源的訪問(wèn)涉及到了application.properties中的兩個(gè)屬性:
# 默認(rèn)值為 /* spring.mvc.static-path-pattern=#這里設(shè)置靜態(tài)資源匹配的url-pattern # 默認(rèn)值為 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ spring.resources.static-locations=#這里設(shè)置要指向的路徑,多個(gè)使用英文逗號(hào)隔開(kāi),在前面的優(yōu)先級(jí)高
此時(shí),我們豁然開(kāi)朗,知道默認(rèn)情況下靜態(tài)資源為什么放在/META-INF/resources/、/resources/、/static/、/public/這四個(gè)目錄了,還有這四個(gè)目錄訪問(wèn)的優(yōu)先級(jí)是怎么來(lái)的了。
修改靜態(tài)資源映射的方法:
spring.mvc.static-path-pattern=/mystatic/* spring.resources.static-locations=classpath:mystatic/
在resources資源目錄中創(chuàng)建一個(gè)mystatic目錄,在該目錄下面創(chuàng)建一個(gè)static.html文件,訪問(wèn)結(jié)果如下:
注意:還可以設(shè)置外部磁盤目錄,設(shè)置方式不變,格式如下:file:d/mystatic/。
WebJars
WebJars將前端資源(css,js,image,html等等)打包到j(luò)ar中,然后使用基于JVM的包管理器(比如 Maven、Gradle 等)管理前端依賴的方案。SpringBoot中也可以通過(guò)WebJars來(lái)訪問(wèn)靜態(tài)資源。
SpringBoot默認(rèn)將/webjars/**映射到 classpath:/META-INF/resources/webjars/。
所以默認(rèn)情況下我們需要訪問(wèn)WebJars中的資源,需要將其jar包放到classpath:/META-INF/resources/webjars/目錄中。
我們來(lái)使用一下WebJars:
<dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>2.1.1</version> </dependency>
<script src="/webjars/jquery/2.1.1/jquery.js"></script>
版本號(hào)統(tǒng)一管理
如果我們有很多頁(yè)面都是用了WebJars中的資源,而我們現(xiàn)在要升級(jí)WebJars的版本,豈不是要在每個(gè)頁(yè)面中都改動(dòng)一下,這樣很麻煩啊,有沒(méi)有簡(jiǎn)單的方法啊。此時(shí),我們可以進(jìn)行版本號(hào)統(tǒng)一管理。
<dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> </dependency>
<script src="/webjarslocator/jquery/jquery.js"></script>
靜態(tài)資源版本管理
當(dāng)我們資源內(nèi)容發(fā)生變化時(shí),由于瀏覽器緩存,用戶本地的靜態(tài)資源還是舊的資源,為了防止這種情況導(dǎo)致的問(wèn)題,我們可能會(huì)手動(dòng)在請(qǐng)求url的時(shí)候加個(gè)版本號(hào)或者其他方式。
<script type="text/javascript" src="/lavor.js?v=1.1"></script>
SpringMVC提供了兩種方式可以幫助我們很容易地解決這類問(wèn)題。
MD5方式
spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/**
<script src="${urls.getForLookupPath('/lavor.js') }"></script>
<script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>
請(qǐng)求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js,我們MD5配置的paths=/**,所以SpringMVC會(huì)嘗試url中是否包含-,如果包含會(huì)去掉后面這部分,然后去映射的目錄(如webapp根目錄,上面提到的四大靜態(tài)映射目錄)查找/lavor.js文件,如果能找到就返回。
版本號(hào)方式
spring.resources.chain.strategy.fixed.enabled=true #版本號(hào)處理的路徑 spring.resources.chain.strategy.fixed.paths=/** # 版本號(hào),可以為所處理路徑中的資源加上/v1.1目錄前綴 spring.resources.chain.strategy.fixed.version=v1.1
<script src="${urls.getForLookupPath('/lavor.js') }"></script>
<script src="/v1.1/lavor.js"></script>
請(qǐng)求/v1.1/lavor.js,會(huì)查看v1.1是不是版本號(hào),如果是就去掉前綴目錄,直接查找/lavor.js。
注意:我們發(fā)現(xiàn)如果添加了webapp目錄,那么該目錄也可以存放靜態(tài)資源,并且默認(rèn)情況下訪問(wèn)優(yōu)先級(jí)比/META-INF/resources/還要高。
tml中img圖片進(jìn)行等比例縮放的實(shí)例代碼
HTML中,要修改img元素定義的圖片的大小,且是等比例縮放,不改變寬和高的比值,那么可以采用只設(shè)置img元素屬性中width和height中的任何一個(gè),不要同時(shí)設(shè)置兩個(gè)即可實(shí)現(xiàn)img圖片的等比例縮放效果。下面將通過(guò)兩個(gè)實(shí)例來(lái)分別實(shí)現(xiàn)這兩種方法。
為了可以與原圖片的大小進(jìn)行對(duì)照,下面的實(shí)例使用HTML的注釋符號(hào)將等比例縮放的代碼進(jìn)行了注釋,第一遍運(yùn)行完之后,可以將第一行的代碼刪除(在線刪除,因?yàn)檫@是一個(gè)在線編輯器),然后將第二行代碼中的注釋符號(hào)去除掉,接著再運(yùn)行一遍看看等比例縮放的效果:
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->
這邊的代碼與上面的幾乎一樣,只是將width的屬性修改成為height的屬性,如下:
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->
提示:如上面的兩個(gè)實(shí)例,將width和height分別設(shè)置為50%都可以等比例縮放圖片,但得到的圖片的大小不一定一樣。
當(dāng)然了,如果要通過(guò)同時(shí)設(shè)置img圖片的width和height兩個(gè)屬性來(lái)達(dá)到等比例縮放圖片的話也是可以的,但是要先計(jì)算一下圖片的寬度和高度的比例,之后再等比例縮放。
來(lái)源:笨鳥(niǎo)工具-璞玉天成,大器晚成
原文:html img圖片等比例縮放的代碼 | HTML教程
免責(zé)聲明:內(nèi)容僅供參考,不保證正確性
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。