jQuery – 全部選取表單的 checkbox

可使使用這個套件 jquery-checkall

1. 這是你要控制所有 checkbox 的何選鈕

2. 為每個要控制的 checkbox 添加如 class

3. jQuery 這麼寫

其他的可以參考官方範例囉

javascript – 去除圖片編碼後的開頭 data:image

假設圖片編碼開頭是這樣

如果要把開頭的 data:image/jpeg;base64, 去除掉,可以使用 replace 這麼做

 

Vue – 如何使用作用域插槽 (Scoped Slots) 分割元件版面並餵入不同資料

這次我們示範要如何使用 slot 去製作分割組件。我希望呈現

  • <header> + <main>
  • <main> 包含了標題與三篇文章
  • 三篇文章是從伺服器取得資料

影片教學

文字教學如下

1、建立 container 並加入第一個整體架構的組件

2、在父組件中,建立一個子組件,子組件有自己的樣式

這是父組件的框架 + 子組件的內容樣式

3、父組件,建立準備分派到子組件的內容,也就是一個模版

4. 在子組件,建立插槽 slot 的擺放位置

5. 在子組件建立 JSON 資料,例如透過 AJAX 遠端取得。

6. 修改子組件,讓插槽使用 for loop 逐一取出每筆資料

7、最後完成

Vue – 如何理解「使用 slot 分發內容」

關於 slot (插槽) 的範例說明,在官方網站並不是介紹得很清楚(參考)。標題「使用 slot 分發內容」這句話其實不易理解,但意思就是說「父組件準備好內容,分發給子組件安排的結構」。父組件只負責內容,但不負責擺放的位置;子組件負責擺放位置,但不理會內容是什麼

  • 內容就是長相
    • 例如你要呈現的 <header><main><div>文字…長怎麼樣
    • 像是眼睛會有眼睫毛、眼皮、眼珠子。
    • 當然也可以把眼睛再拆分更細的組件,就看需求了。
  • 結構就是擺哪裡
    • 例如你的 <header> 要把在 <main> 的前面或後面?
    • 像是眼睛要擺在鼻子上方,嘴要放在鼻子下方。

這裡我依序擴增的步驟來教學。

步驟一、建立 Vue 初始位置,並加入組件

步驟二、加入父組件

加入 <c-container> 組件,告知使用 #element 模板

步驟三、在父模版中,用子組件包圍內容

這時候會輸出

目前有 <c-struct> 是因為我們還沒有指派子組件。

步驟四、加入子組件

  • <c-struct> 組件,告知使用 #container 模板
  • 指定 header 對應插槽(slot)的名稱

因為設定了子組件 c-struct,所以目前存檔的畫面會變空白。因為模版 #container 我們還沒有寫內容,template#element > c-struct 會被丟棄。

步驟五、子組件加入 <slot> 擺放位置

會輸出

我們會發現 .container出現了,.container 底下也將 <slot name=”header”> 替換為 <heade>。

步驟六、添加其他 slot 插槽位置與對應內容

會輸出

為什麼會先出現 <main> 再出現 <footer> 呢?因為我們在子組件 (c-struct) 指定的模版 (template#container) ,插槽依序排列為 <slot name=”header”>、<slot name=”main”>、<slot name=”footer”>。所以一旦我們改變 <slot> 的位置,呈現的順序也就跟著不同囉。

如果不指定 <slot> 的 name 會怎麼樣?

若子組件的模版只有 <slot>,那就會把父組件模版中沒有指定 slot 屬性的元素,收集起來替換掉 <slot> 的位置。

會輸出

如果有散落的元素內容,但子組件模版中沒有 <slot> 會如何?

那內容就會被丟棄,不會顯示囉!會輸出

附上完整範例

Vue – 使用 v-model 雙向綁定,也示範模版中綁定

用影片來示範