裡面有介紹VUE，下面是操作的問題。
3-19(P40)，在a連接裡面加上 download，就可以下載檔案，而不是開啟檔案。
4-5(P90)，想要在img中新增 sizes="50vw"，說可以讓圖片變成寬50%，但怎麼測試都沒有辦法，都還是一樣滿版???但圖片的確是會隨著螢幕改變寬度(RWD)。測試要搭配 srcset 就可以了@@
4-12(P98)，圖片還是用<picture>可以指定螢幕寬度而更換圖片。發現DW問題，若是picture包在p裡面，會顯示錯誤。
6-17(P138)，input type='email'，裡面還可以放 pattern=".+@hotmail.com"(限定hotmail)
6-23(P143)，input type='tel' 也可以放pattern="[0-9]{4}-[0-9]{6}"
7-6(P157)，CSS連結有兩個，link 或是 @import。也可以在CSS中設定@charset "UTF-8";避免亂碼。
7-19(P169)，CSS的 ::before、::after，可以加內容到HTML中。
8-9(P184)，有說明VW、VH的算法。
8-17(P192)，第一行字縮排，text-indent
9-25(P232)，relative 相對位置(跟著上層移動)，absolute 絕對位置(直接移動)。
11-5(P282)，float相關設定，最後要clear : both; (才不會被float)
11-8(P286)，display是block會由上往下排列，flex是由左往右排列。
hiskio老師有提到，畫面縮小到某個程度時(手機版) 可以改成flex-idrection: column;(上往下)
11-15(P292)，可以設定顯示順序 order，沒有設定都是預設0。從0開始顯示。
div:n-th-child(1){ order: 3; } ，將第一個子項目，排序到第3順位。
11-21(P298)，版面配置 grid，grid-template-columns: 100px 100px; gap: 10px; }。表示只要兩格100px的位置，間隔10px。也可將兩個 100px 改成 兩個 1fr，表示用 1 比1 的大小。
12-12(P316)，不同的螢幕寬度做不同的變化。
@media screen and (max-width : 400px){ 做一些CSS變化 }
12-14(P318)，還有搭配手機橫看或是直看的處理。orientation: portrait (直看) / landscape(橫看)
13-45(P362)，箭頭函式，var sum = (a,b)=>{ return a+b; }
匿名函式是 var sum = function(a,b) { return a+b; }
14-4(P372)，DOM是針對 HTML的物件，BOM是針對瀏覽器的物件。
14-12(P380)，有說到Date的相關取法。
14-17(P384)，用 Array()來搭配表格。
14-21(P388) 有Array的用法。
14-29(P396)，開啟新視窗。
14-45(P412)，HTML可以有兩個form。
15-5(P420)，觸碰螢幕也有出 Touch Events(跟滑鼠的雷同)
15-6(P422)，綁定事件有三個，一個是HTML的設定(onclick)
<button onclick="showMsg()">
一個是DOM的設定，利用JS，btn.onclick = showMsg; (showMsg後面不加小括號，表示將這個方法給btn.onclick，不是立刻執行)但只能DOM綁定一個事件。
一個是事件監聽的設定(就可以綁定多個事件)， false表示內從與外層都有event事件時，先從內層開始。showMsg可以寫在裡面，用匿名函式的方法寫。
btn.addEventListener('cilck', showMsg1, false);
btn.addEventListener('cilck', showMsg2, false);
若要移除的話，btn.removeEventListener ('click', showMsg1, false);
15-17(P432)，顯示線上時間，每隔一秒更新一次。(自己電腦的時間)
16-19(P454)，免費圖庫 pexels
17-12(P470)，加到同一個標籤(append 加到後面，reepend加到前面)
加到標籤的外面( after 加到後面，before 加到前面)
17-14(P472)，JQuery的each(物件/陣列, callback ) ，可以重複對物件/陣列 做 callback函式。
17-19(P476)，on 的事件處理，$("#a1").on('click', function(){ 動作});
17-21(P478)，on 也可以綁定多個動作
$("#a1").on ({ 'click' : function() { 動作1 },
'dbclick' : function() {動作2} });
17-24(P482)，JQuery3.0，建議使用 $(function() { DOM載入完畢就處理 });
18-6(P492)，開始介紹VUE，微軟推薦的套件Volar。
18-7(P494)，資料繫結，寫在JS中。
data(){ return { 資料寫在這裡 } }
18-10(P498)，v-bind 可以綁定CSS屬性。
18-11(P498)，v-text、v-html、v-bind都是直接用 = 回傳的名稱。
在編輯HTML的過程中，會顯示原始碼@@
18-15(P502)，methods 可以寫函式，每次都會執行一次。
html那邊要寫小括號(裡面可以帶參數) {{ BMI (可以帶參數) }}
methods : { BMI(){ 運作 } , others() { 運作 } }
18-16(P504)，computed 不能傳參數，若data那邊沒有變動，就不執行。
html那邊不要寫小括號， {{ BMI }}
methods : { BMI(){ 運作 } , others() { 運作 } }
18-18(P506)，computed雖不能傳參數，但可以用get() 、set(參數)來變化。
例如 inch : { get() {return 計算動作}, set(val) { this.cm = 計算動作} }
get() 是取得inch的位置，並用 return 回傳東西到 inch。
set(val222)，val222是 inch的值，運算後改寫data的某個值。
18-20(P508)，事件處理 ( v-on: 事件名稱 或是 @事件名稱 )
18-36(P524)，v-if 要條件成立才渲染。
v-show 則是直接渲染，再看條件是否有成立。
18-38(P526)，v-for(抓資料) 跟v-bind一樣(抓CSS)，可以抓到 return的物件，
<li v-for="(value, key) in obj"> {{key}} {{value}} </li>
<img v-bind="obj">
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。