2018年8月15日 星期三

v3 jQuery 的 slim 版本



最近在用 bootstrap,因為發現有些功能會無緣無故的失效,發現 bootstrap 4 之後用的 jquery 版本有 .slim 的字,查了一下才知道在 jquery v3 後把一些功能閹割後弄了一個 slim 的版本,而閹割掉的部分為 effect 和 ajax 的部分,所以如果你的網頁不會用到這些功能可以放心的使用 slim 版本,會的話還是用完整版的會比較好,也記得要更新一下 bootstrap 專案內的 jquery 版本。
Read more

2018年8月14日 星期二

寫程式要乖乖



又一個班要結訓了,因為另一班也正在上課的關係所以偶爾會去看看,今天他們還要我幫他們在乖乖上簽名,然後被要求畫了好幾隻寶可夢。




學生說 google 很常找到我的部落格,又問說是不是應該要寫個部落格,其實我是很支持,因為我從以前開始就一直喜歡在網路上留些東西,不過堅持一直都不是一件簡單的事。



Read more

2018年8月9日 星期四

人生寫的第一個網站!



google 竟然找得到我高中時寫的第一個網站 XD,真是太神奇了傑克。

製作人 212-22 江舜智

製作日期 1999/09/14

指導老師 陳麗雅 老師

應該是家政課的作品,算算也快 20 年了真神奇。


Read more

2018年8月7日 星期二

2018年8月5日 星期日

[Vue.js] Form input 事件綁定

基本的用 model 可以改變 ui 上的值

See the Pen vue model by deathhell (@deathhell) on CodePen.




處理多行文字

See the Pen vue multiline by deathhell (@deathhell) on CodePen.



顯示 checkbox 的選取狀態

See the Pen vue checkbox by deathhell (@deathhell) on CodePen.



取得 checkbox 的值

See the Pen vue checkbox value by deathhell (@deathhell) on CodePen.




取得 radio 的值

See the Pen vue radio by deathhell (@deathhell) on CodePen.




取得 select 的值

See the Pen vue select by deathhell (@deathhell) on CodePen.




複選 select 的值

See the Pen vue multi select by deathhell (@deathhell) on CodePen.




使用 v-for 迴圈

See the Pen vue select v-for by deathhell (@deathhell) on CodePen.




Read more

2018年8月4日 星期六

[Vue.js] 事件控制

使用 v-on:click 可以設定點擊後執行的事件,以下為每次點擊都 +1



直接執行或是事件觸發時再執行的寫法



帶入變數



這邊可以調整事件的預設行為

.stop
.prevent
.capture
.self
.once
.passive

  1. <!-- the click event's propagation will be stopped -->  
  2. <a v-on:click.stop="doThis"></a>  
  3.   
  4. <!-- the submit event will no longer reload the page -->  
  5. <form v-on:submit.prevent="onSubmit"></form>  
  6.   
  7. <!-- modifiers can be chained -->  
  8. <a v-on:click.stop.prevent="doThat"></a>  
  9.   
  10. <!-- just the modifier -->  
  11. <form v-on:submit.prevent></form>  
  12.   
  13. <!-- use capture mode when adding the event listener -->  
  14. <!-- i.e. an event targeting an inner element is handled here before being handled by that element -->  
  15. <div v-on:click.capture="doThis">...</div>  
  16.   
  17. <!-- only trigger handler if event.target is the element itself -->  
  18. <!-- i.e. not from a child element -->  
  19. <div v-on:click.self="doThat">...</div>  



如果要綁定鍵盤事件,可以用 v-on:keyup 後面帶 keycode



若覺得記 keycode 麻煩,也可以用這種寫法
  1. <!-- same as above -->  
  2. <input v-on:keyup.enter="submit">  
  3.   
  4. <!-- also works for shorthand -->  
  5. <input @keyup.enter="submit">  

目前可以使用的鍵盤按鍵如下:

.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.right


Read more

[Vue.js] 列表

可以直接把物件渲染成列表,加入 index 就可以列出當前物件的索引。




輸出 object 的值。



這樣可以把 key 跟 value 都輸出



包含索引




計算後回傳奇數



輸出 1~10 的數字



搭配 v-if 判斷是否是空物件


可以使用一些調整陣列的方式來改變列表內容

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

改變陣列調整 list 內容

See the Pen vue add remove list by deathhell (@deathhell) on CodePen.

Read more

2018年8月3日 星期五

[Vue.js] 條件判斷

使用 v-if 跟 v-else 來判斷不同情況下顯示不同結果



用一個 template 包起來




使用 v-show 來顯示或隱藏,用法跟 v-if 類似,不同的是 DOM 都是存在的,只是切換 display 狀態而已,而 v-show 不支援 template

See the Pen vue v-show by deathhell (@deathhell) on CodePen.





用這樣去切換兩種模式
Read more

CSS 的 grid(3)- grid-template-areas

可以使用 grid-template-columns 和 grid-template-rows 將版面分割為這樣



然後設計好各個區塊的樣式,再利用 grid-template-areas 依序指定每一個區塊想要用哪個樣式,就可以把版排好了。




當版面安排好之後,就可以把內容填進去了,是不是跟以往排版的觀念差很多呢?



最近我很多專案都用 flex 排版了,gird 看起來有他方便的地方,目前也還未知到底哪個比較好,不過多學點總是在專案上有遇到問題就可以用比較好或熟悉的方式來解決。
Read more

CSS 的 grid Layout(2) 對齊

使用 justify-content 可以設定水平對齊方向,分別可以設定
start: 對齊開始
end: 對齊結尾
center: 置中
stretch: 展開
space-around: 平均分散
space-between: 從邊緣平均分散
space-evenly: 平均分配,中間的空隙保持相等


可以對個別元素設定 justify-self,可以用的值為 start, end, center 和 stretch


使用 align-content 可以設定區塊內整體的對齊方向,可以使用的值有
start: 對齊開始
end: 對齊結尾
center: 置中
stretch: 展開
space-around: 平均分散
space-between: 從邊緣平均分散
space-evenly: 平均分配,中間的空隙保持相等


可以對個別元素設定 align-self,可以用的值為 start, end, center 和 stretch
Read more
Related Posts Plugin for WordPress, Blogger...