v-kansai meetup #13 の発表資料です。
7VF%SBHHBCMFͰखܰʹϦετΛυϥοάυϩοϓͰฒͼସ͑ΔWLBOTBJNFFUVQ4"8
View Slide
$(whoami)w ࢯ໊Ճ౻फҰ ࡀ‣ ϋϯυϧωʔϜ4"8 ϗϥʔ͕ۤखͳͷͰөըl4"8zΛݟͨ͜ͱͳ͍‣ େࡕࡏॅɾѪग़‣ ॴଐגࣜձࣾ.4&/ w 5XJUUFS!B[[email protected]Vue.jsmacOSLinuxFreeBSD
ओͳ׆ಈw ษڧձͷൃදొஃ‣ WLBOTBJNFFUVQ‣ 7VF+40TBLB‣ 0QFO4PVSDF$POGFSFODF‣ 8FCº1)15FDI$BGFw $PEFS%PKPകాϝϯλʔ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ
WLBOTBJNFFUVQࢀՃྺw ࢀՃճճ‣ ొஃճ WLBOTBJNFFUVQηογϣϯൃද WLBOTBJNFFUVQ-5ൃද WLBOTBJNFFUVQηογϣϯൃද ࠓճ‣ ௌߨճ WLBOTBJNFFUVQ 7LBOTBJNFFUVQ
ൃද֓ཁ7VFKTͰυϥοάυϩοϓʹΑΔϦετͷฒͼସ͑Λ༰қʹ࣮ݱ͢Δํ๏ͷհ
υϥοάυϩοϓʹΑΔཁૉͷฒͼସ͑w త7VFKTͰϦετͷཁૉΛυϥοάυϩοϓͰฒͼସ͑‣ 5SFMMPͷΑ͏ʹϦετͷཁૉΛҠಈ͍ͨ͠w )5.-ʹ%SBHBOE%SPQ"1*Λ࣮͑Մೳ‣ ฒͼସ͑ͱΠϕϯτͷॲཧΛࣗલͰهड़͠ͳ͚ΕͳΒͳ͍
7VF%SBHHBCMFͷ֓ཁw υϥοάυϩοϓͰཁૉͷฒͼସ͑Λ7VFKT্Ͱ࣮ݱ‣ όΠϯυ͞ΕͨϦετϦΞΫςΟϒʹฒͼସ͑‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτͷ༰Λฒͼସ͑ 4PSUBCMFKTͷػೳΛར༻࣮ͯ͠ݱ
7VF%SBHHBCMFͷॴw ฒͼସ͑ػೳΛ༰қʹ࣮ݱՄೳ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹཁૉΛࢦఆ͢Δ͚ͩͰΑ͍‣ ฒͼସ͑ΠϕϯτॲཧΛهड़͢Δඞཁ͕ͳ͍w εϚϗλϒϨοτͳͲͷλονεΫϦʔϯͷॲཧڞ௨‣ σόΠεʹΑͬͯผʑͷΠϕϯτͰॲཧΛهड़͢Δඞཁ͕ͳ͍
7VF%SBHHBCMFͷಋೖͱ͍ํw OQNܦ༝ͰΠϯετʔϧ‣ npm install vuedraggable -Dw 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹฒͼସ͑ΔཁૉΛࢦఆ‣ v-modelσΟϨΫςΟϒͰྻΛࢦఆ{{ item.value }}
࣮ྫͱڍಈ{{ item.value }}<br/>import draggable from 'vuedraggable';<br/>export default {<br/>components: { draggable },<br/>data() {<br/>return {<br/>list: [<br/>{ id: 1, value: 'hoge' },<br/>{ id: 2, value: 'piyo' },<br/>{ id: 3, value: 'foo' },<br/>{ id: 4, value: 'bar' },<br/>],<br/>};<br/>},<br/>}<br/>
ϦετΛ·͕ͨͬͨཁૉͷҠಈw ϦετͷཁૉΛҟͳΔϦετͷཁૉʹҠಈͤ͞Δ͜ͱՄೳ‣ 7VF%SBHHBCMFͷίϯϙʔωϯτʹgroupϓϩύςΟΛࢦఆw λεΫཧΞϓϦͰ5P%P͔Β%POFʹҠಈͤ͞ΔΑ͏ͳڍಈΛ࣮ݱ
࣮ྫͱڍಈ{{ item.value }}{{ item.value }}<br/>export default {<br/>data() {<br/>return {<br/>todos: [<br/>{ id: 1, value: 'hoge' },<br/>{ id: 2, value: 'piyo' },<br/>{ id: 3, value: 'foo' },<br/>],<br/>dones: [{ id: 4, value: 'bar' }],<br/>};<br/>},<br/>};<br/>
ίϯϙʔωϯτλάͷมߋw 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτΛแؚ͢ΔλάΛมߋՄೳ‣ σϑΥϧτͰdivλάͰεϩοτͷཁૉΛแؚ‣ ϦετͷliཁૉΛulλάͰғΉΑ͏ͳ߹ʹར༻
σϕϩούπʔϧʹΑΔλάͷൺֱ{{ item.value }}{{ item.value }}λάΛࢦఆ͠ͳ͍߹liλάΛulλάͰғΉ߹
υϥοάՄೳͳཁૉΛݶఆw λονσόΠεͰεΫϩʔϧͱυϥοάΠϕϯτ͕ॏͳΔ‣ ҙਤ͠ͳ͍υϥοάΠϕϯτ͕ൃੜw υϥοάՄೳͳཁૉΛݶఆͯ͠εΫϩʔϧͱ͔ͿΔ͜ͱΛ͙‣ handleϓϩύςΟͰυϥοάՄೳͳཁૉͷηϨΫλΛࢦఆ 4PSUBCMFKTͷΦϓγϣϯػೳ
࣮ྫͱڍಈ{{ item.value }}<br/>export default {<br/>data() {<br/>return {<br/>list: [<br/>{ id: 1, value: 'hoge' },<br/>{ id: 2, value: 'piyo' },<br/>{ id: 3, value: 'foo' },<br/>{ id: 4, value: 'bar' },<br/>],<br/>};<br/>},<br/>}<br/>
ΠϕϯτൃՐ࣌ʹॲཧΛՃw υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕ՃՄೳ‣ ฒͼସ͑ͷલॲཧޙॲཧΛಠࣗʹ࣮Մೳ‣ 4PSUBCMFKTͷΠϕϯτΛαϙʔτw 7VF%SBHHBCMFͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ‣ moveϓϩύςΟυϥοά࣌ʹཁૉ͕Ҡಈͨ͠ࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ‣ @startσΟϨΫςΟϒυϥοά։࢝࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ‣ @endσΟϨΫςΟϒυϥοάऴྃ࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ‣ @addσΟϨΫςΟϒཁૉ͕ผͷϦετʹυϩοϓ͞ΕͨࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
࣮ࡍͷར༻ྫw ཱྀߦͷεέδϡʔϧௐΞϓϦ‣ ϓϥϯͷॱ൪ఔΛυϥοάυϩοϓͰҠಈՄೳ‣ 6*ίϯϙʔωϯτ7VFUJGZΛར༻w ϨεϙϯγϒσβΠϯΛ࣮ݱ‣ ฒͼସ͑ॲཧ1$ͱλονσόΠεͰڞ௨
ಈ࡞ྫ
૯ׅw 7VF%SBHHBCMFͰυϥοάυϩοϓͷฒͼସ͑Λ༰қʹ࣮Մೳ‣ ฒͼସ͑Πϕϯτॲཧͷهड़͕ෆཁw ୯ҰͷϦετ͚ͩͰͳ͘ෳͷϦετΛ·͕ͨͬͨฒͼସ࣮͑ݱՄೳ‣ 5SFMMPͷΑ͏ͳλεΫཧΞϓϦͷ࡞࣮ݱՄೳ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
azuki
little_rubyist
77web
tmokmss
mraible
syossan27
ivargrimstad
ffjlabo
kinocoboy2
dunglas
hirokunimaeta
akatsuki174
gishi_yama
keavy
addyosmani
bryan
keathley
paulrobertlloyd
smashingmag
erikaheidi
bluesmoon
pedronauck
myddelton
notwaldorf
chrisshort