06|Vue组件的核心概念:事件

文章目录

    • 1.click事件
    • 2.鼠标事件
      • mouseup
      • mousedown
      • mouseleave
    • 3.dblclick
    • 4. touch
    • 5.实例

1.click事件

2.鼠标事件

mouseup

mousedown

mouseleave

3.dblclick

4. touch

5.实例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id='app'>
    {{message}} {{message + message}}
    <div :id="message">div>
    <todo-list>todo-list>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
    Vue.component('todo-item', {
        props: {
            title: String,
            del: {
                type: Boolean,
                default: false
            }
        },
        template: '' +
            '
  • \n' + '{{title}}\n' + '{{title}}\n' + '\n' + '
  • '
    , data: function () { return {} }, methods: { handlerClick: function (e) { e.stop console.log('点击删除按钮') this.$emit('delete', this.title) } } }) Vue.component("todo-list", { template: '' + '
      \n' + '\n' + '
    '
    , data: function () { return { list: [ { title: '课程1', del: false }, { title: '课程2', del: true } ] } }, methods: { handlerDelete(val) { console.log('handlerDelete', val) } } }) var vm = new Vue({ el: '#app', data: { message: 'hello world', list: [ { title: '课程1', del: false }, { title: '课程2', del: true } ] } })
    script> body> html>

    你可能感兴趣的:(vue学习,vue.js,javascript,前端)