在Vue中，通過v-on 來監聽DOM事件，可以通過@簡寫代替。
一個簡單的在組件中的事件調用示例
- 在template的Html中使用v-on或@監聽一個click事件，並指定事件執行handleClick方法。
- handleClick需要在組件的methods集合中定義。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<todo-item v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [
{
title: "新課程1",
del: false
},
{
title: "新課程2",
del: true
},
{
title: "新課程3",
del: false
}
]
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("點擊刪除按鈕！");
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>
效果如下
組件的事件調用如何觸發上級節點的事件？通過$emit來觸發。
this.$emit('自定義事件名',參數);//參數如有多個，可以用逗號隔開繼續增加，如this.$emit('自定義事件名',參數1,參數2)
示例：組件todo-item上的事件，繼續觸發父組件todo-list上的自定義事件。
- 在事件方法handleClick中通過$emit繼續觸發父組件自定義事件。並傳入參數title
this.$emit('delete',this.title);
- 在父組件todo-list的template中的html中監聽自定義事件@delete="handleDelete"或v-on:delete="handleDelete"
- 在父組件件todo-list的methods定義handleDelete方法(帶參數)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<todo-item @delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [
{
title: "新課程1",
del: false
},
{
title: "新課程2",
del: true
},
{
title: "新課程3",
del: false
}
]
};
},
methods:{
handleDelete(vtitle){
console.log("刪除工程！",vtitle)
}
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("點擊刪除按鈕！");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>
Vue事件還提供了大量的事件修飾符
- .stop
- .prevent
- ....
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
Vue事件還提供大量的按鍵修飾符
如常用的回車提交
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">