<div id="app">
<div class="p-5">
<h3>觸發事件 與 縮寫*</h3>
<div class="box" :class="{ rotate: isTransform }"></div>
<hr>
<button class="btn btn-outline-primary" v-on:click="changeClass">選轉物件</button>
<br>
<h3>帶入參數*</h3>
<div class="box" :class="{ rotate: isTransform }"></div>
<hr>
<button class="btn btn-outline-primary" @click="change('isTransform')">選轉物件</button>
<hr>
<h3>原生 DOM 事件*</h3>
<!-- https://developer.mozilla.org/en-US/docs/Web/Events -->
<h4>input change 事件</h4>
<input type="text" @change="onChange">
<br><br>
<h4>form submit 事件</h4>
<form @submit.prevent="submitForm">
<input type="text" v-model="name">
<button>送出表單</button>
</form>
<hr>
<h3>動態事件 []</h3>
<input type="text" @[event]="dynamicEvent">
<input type="text" v-model="event">
<hr>
<h3>動態物件方法 {}</h3>
<!-- 此方法無法傳入參數 -->
<button class="box" v-on="{
mousedown:down,
mouseup:up
}">
</button>
</div>
</div>
const App = {
data() {
return {
name: '小明',
isTransform: true,
num: 10,
event: 'click'
}
},
methods: {
changeClass() {
this.isTransform = !this.isTransform;
},
change(key) {
this[key] = !this[key];
},
onChange(evt) {
console.log(evt)
},
submitForm() {
console.log('表單已送出', `name 為 ${this.name}`)
},
dynamicEvent() {
console.log('這是一個動態事件', this.event)
},
down() {
console.log('按下');
},
up() {
console.log('放開');
},
}
};
Vue.createApp(App).mount('#app');
