vue core components: Event
<body> <div class="app"> <todo-list></todo-list> {{message}}--{{message+','+message}} <div :id='message' v-if="showMessage">{{title}}</div> <div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div> <div :id='message' v-show="showMessage">{{title}}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('todo-item', { props: { title: String, prize: { type: Number, default: 40 } }, template: `<li> <button @click="handleClick">delete< / The Button> Course Name: {{title}} Price: {{}} Prize < / li> `, the Data: function () { return {} }, Methods: { // button click event handleClick () { Console. log ( " the handleClick " ); // transmitted to the parent component this.title @delete event parameters, delete (var) {} to receive this parameter within parent components the this $ EMIT (. ' Delete ' , the this .title ); } } }) Vue.component('todo-list', { template: ` <ul> <todo-item @delete="handleDelete" v-for="item in classList" :title="item.title" :prize="item.prize"></todo-item> </ul> `, methods:{ //@delete对应的事件 handleDelete(val){ console.log("handleDelete",val); } }, data: function () { return { classList: [ { title: '课程1', prize: 50 }, { title: '课程2', prize: 80 } ] } } }) var vm = new Vue({ el: '.app', data: { message: 'hello world', showMessage: false, title: "是否删除", } }) </script> </body>
- There are some event modifier, for example v-on: keyup.enter = "submit" monitor keyboard enter key to call the submit method
- Stop the click event continues to spread v-on: click.stop = ""