vue组件 事件(极客时间Vue视频笔记)

vue组件核心:事件

 

<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">删除</button>
                课程名:{{title}}
                价格:{{prize}}
            </li>`,
            data: function () {
                return {}
            },
            methods: {
                //按钮点击事件
                handleClick(){
                    console.log("handleClick");
                    //向父组件的@delete事件传递this.title参数,在父组件中delete(var){}即可接收到此参数
                    this.$emit('delete',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>

 

 

  • 还有一些事件修饰符,比方说 v-on:keyup.enter="submit" 监听键盘enter键调用submit方法
  • 阻止单击事件继续传播 v-on:click.stop=""

 

 

上一篇:day_10猜年龄游戏函数版


下一篇:来,做一个问卷调查(有抽奖!)