iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

愛寫什麼就寫什麼,開心最重要 系列

愛寫什麼就寫什麼,開心最重要

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 1

DAY1-Alpine.js之一步一腳印

極不專業分享。 首先我想試試Alpine.js這小框架,過去曾使用過vue框架的朋友們應該會覺得比較容易上手,語法大概87%像,功能也沒vue複雜,相對的好處就...

DAY 2

Day2-Alpine.js進場出場簡易動畫

首先把下面這段程式碼丟到html裡面吧~ <div x-data="{ open: false }"> <butt...

DAY 3

Day3-Alpine.js簡易tab切換

先在你的程式中貼上這串吧! <div x-data="{ tab: 'foo' }"> <button :clas...

DAY 4

Day4-Alpine.js之x-data了解一下

依照慣例先附一段程式碼吧~ <div x-data="dropdown()"> <button x-on:clic...

DAY 5

Day5-Alpine.js將打在text中的數字/文字即時印出來

這個我覺得是很重要的語法,而且不會難,大家都可以玩玩再把它變型創新吧! 首先給大家看看數字的範例吧 <div x-data="{ num...

DAY 6

Day6-Alpine.js取得各種input裡面的值

今天示範取得4種不同類型input的值+1種多選,分別為Text、Checkbox、Radio、Select、Multiple Select,在Text的部分昨...

DAY 7

Day7-Alpine.js進入x-for迴圈吧!

這篇來講解簡易的for迴圈吧。先上範例:這裡為了要有滑進滑出的效果,附上css,當然變更就可以客製化了! css .opacity-0 { opacit...

DAY 8

Day8-Alpine.js之x-for迴圈跑數字

繼昨天的字串for迴圈後,希望大家對x-for有基本的了解了。接著今天要將數字帶入迴圈,請看下面範例: 認識for裡面的index <div x-data...

DAY 9

Day9-Alpine.js之把js資料丟進html

<div x-data="initialData()" x-init="init()"> <d...

DAY 10

Day10-Alpine初入"魔術屬性"

今天講三種基本的魔術屬性 $el <div x-data> <button @click="$el.innerHTML =...

٩۹(๑•̀ω•́ ๑)۶的收藏
٩۹(๑•̀ω•́ ๑)۶的追蹤
٩۹(๑•̀ω•́ ๑)۶的Like
٩۹(๑•̀ω•́ ๑)۶的紀錄