[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"blog:\u002Fblog\u002Fvue\u002Fv-on":3},{"id":4,"title":5,"author":6,"body":7,"category":284,"date":285,"description":286,"draft":287,"extension":288,"image":289,"meta":290,"navigation":94,"path":291,"seo":292,"series":289,"seriesOrder":289,"seriesTitle":289,"stem":293,"tags":294,"updatedAt":297,"__hash__":298},"blog\u002Fblog\u002Fvue\u002Fv-on.md","v-on 事件綁定指令","charles",{"type":8,"value":9,"toc":279},"minimark",[10,22,26,51,150,153,160,265,268,275],[11,12,13,14,21],"p",{},"v-on 是 Vue 提供的",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fbuilt-in-directives.html#built-in-directives#v-on",[19],"nofollow","🔗 指令 (directive)"," 之一，用來綁定事件。透過 v-on 可以讓元素觸發事件，例如點擊、滑鼠移入、滑鼠移出等事件發生時，執行指定的方法。",[23,24,25],"h2",{"id":25},"基本使用方式",[27,28,29,37],"ol",{},[30,31,32,36],"li",{},[33,34,35],"code",{},"v-on:event=\"function\"","：在元素上使用 v-on 指令，並指定 event 與 function 。",[30,38,39,42,43,46,47,50],{},[33,40,41],{},"@event=\"function\"","：",[33,44,45],{},"v-on"," 的縮寫，可以直接使用 ",[33,48,49],{},"@"," 符號來綁定 event。",[52,53,61],"pre",{"className":54,"code":55,"highlights":56,"language":59,"meta":60,"style":60},"language-vue:line-numbers shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup>\n  import { ref } from 'vue';\n  const counter = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>Counter: {{ counter }}\u003C\u002Fh1>\n  \u003Cbutton v-on:click=\"counter++\">\n    Increment\n  \u003C\u002Fbutton>\n  \u003Cbutton @click=\"counter--\">\n    Decrement\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[57,58],8,11,"vue:line-numbers","",[33,62,63,71,77,83,89,96,102,108,115,121,127,133,139,144],{"__ignoreMap":60},[64,65,68],"span",{"class":66,"line":67},"line",1,[64,69,70],{},"\u003Cscript setup>\n",[64,72,74],{"class":66,"line":73},2,[64,75,76],{},"  import { ref } from 'vue';\n",[64,78,80],{"class":66,"line":79},3,[64,81,82],{},"  const counter = ref(1);\n",[64,84,86],{"class":66,"line":85},4,[64,87,88],{},"\u003C\u002Fscript>\n",[64,90,92],{"class":66,"line":91},5,[64,93,95],{"emptyLinePlaceholder":94},true,"\n",[64,97,99],{"class":66,"line":98},6,[64,100,101],{},"\u003Ctemplate>\n",[64,103,105],{"class":66,"line":104},7,[64,106,107],{},"  \u003Ch1>Counter: {{ counter }}\u003C\u002Fh1>\n",[64,109,112],{"class":110,"line":57},[66,111],"highlight",[64,113,114],{},"  \u003Cbutton v-on:click=\"counter++\">\n",[64,116,118],{"class":66,"line":117},9,[64,119,120],{},"    Increment\n",[64,122,124],{"class":66,"line":123},10,[64,125,126],{},"  \u003C\u002Fbutton>\n",[64,128,130],{"class":129,"line":58},[66,111],[64,131,132],{},"  \u003Cbutton @click=\"counter--\">\n",[64,134,136],{"class":66,"line":135},12,[64,137,138],{},"    Decrement\n",[64,140,142],{"class":66,"line":141},13,[64,143,126],{},[64,145,147],{"class":66,"line":146},14,[64,148,149],{},"\u003C\u002Ftemplate>\n",[23,151,152],{"id":152},"傳入參數使用",[11,154,155,156,159],{},"有時候我們需要在觸發事件時，傳入一些參數給方法。這時可以透過 ",[33,157,158],{},"$event"," 來取得事件物件，或是直接在事件名稱後面加上參數。",[52,161,164],{"className":54,"code":162,"highlights":163,"language":59,"meta":60,"style":60},"\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const name = ref('');\n\n  const changeName = (newName, e) =>{\n    name.value = newName;\n    console.log(e);\n    \u002F\u002F PointerEvent {isTrusted: true, _vts: 1725820441615, pointerId: 1, width: 1, height: 1, …}\n    console.log(e.target);\n    \u002F\u002F \u003Cbutton> Change \u003C\u002Fbutton>\n  }\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>Your name is: {{ name }}\u003C\u002Fh1>\n  \u003Cbutton @click=\"changeName('John', $event)\">\n    Change\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[98,146],[33,165,166,170,174,178,183,187,193,198,203,208,213,218,223,227,232,237,243,249,255,260],{"__ignoreMap":60},[64,167,168],{"class":66,"line":67},[64,169,70],{},[64,171,172],{"class":66,"line":73},[64,173,76],{},[64,175,176],{"class":66,"line":79},[64,177,95],{"emptyLinePlaceholder":94},[64,179,180],{"class":66,"line":85},[64,181,182],{},"  const name = ref('');\n",[64,184,185],{"class":66,"line":91},[64,186,95],{"emptyLinePlaceholder":94},[64,188,190],{"class":189,"line":98},[66,111],[64,191,192],{},"  const changeName = (newName, e) =>{\n",[64,194,195],{"class":66,"line":104},[64,196,197],{},"    name.value = newName;\n",[64,199,200],{"class":66,"line":57},[64,201,202],{},"    console.log(e);\n",[64,204,205],{"class":66,"line":117},[64,206,207],{},"    \u002F\u002F PointerEvent {isTrusted: true, _vts: 1725820441615, pointerId: 1, width: 1, height: 1, …}\n",[64,209,210],{"class":66,"line":123},[64,211,212],{},"    console.log(e.target);\n",[64,214,215],{"class":66,"line":58},[64,216,217],{},"    \u002F\u002F \u003Cbutton> Change \u003C\u002Fbutton>\n",[64,219,220],{"class":66,"line":135},[64,221,222],{},"  }\n",[64,224,225],{"class":66,"line":141},[64,226,88],{},[64,228,230],{"class":229,"line":146},[66,111],[64,231,95],{"emptyLinePlaceholder":94},[64,233,235],{"class":66,"line":234},15,[64,236,101],{},[64,238,240],{"class":66,"line":239},16,[64,241,242],{},"  \u003Ch1>Your name is: {{ name }}\u003C\u002Fh1>\n",[64,244,246],{"class":66,"line":245},17,[64,247,248],{},"  \u003Cbutton @click=\"changeName('John', $event)\">\n",[64,250,252],{"class":66,"line":251},18,[64,253,254],{},"    Change\n",[64,256,258],{"class":66,"line":257},19,[64,259,126],{},[64,261,263],{"class":66,"line":262},20,[64,264,149],{},[23,266,267],{"id":267},"延伸閱讀",[11,269,270],{},[15,271,274],{"href":272,"rel":273},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Fevent-handling.html",[19],"🔗 事件處理 (Event Handling)",[276,277,278],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":60,"searchDepth":79,"depth":79,"links":280},[281,282,283],{"id":25,"depth":73,"text":25},{"id":152,"depth":73,"text":152},{"id":267,"depth":73,"text":267},"Vue.js","2024-09-09","透過 v-on 事件綁定，讓元素可以觸發事件",false,"md",null,{},"\u002Fblog\u002Fvue\u002Fv-on",{"title":5,"description":286},"blog\u002Fvue\u002Fv-on",[295,296],"Vue","Frontend","2024-09-21","1KUzCmlSQ7MKo4sd0fpOpfxI5hQvztkmMynov-lCvro",1780512501709]