master

分支 (1)

管理

管理

master

VueStudy
/
1.6事件监听.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
</head>
<body>
<div id="example-1">
    <!--可以用v-on指令监听Dom事件，并在触发时运行一些JavaScript代码-->
    <button v-on:click="counter +=1">添加1</button>
    <p>上面的按钮已经点击 {{counter}}次了</p>
</div>
<br/>
<div>
    事件处理方法
    然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
    <div id="example-2">
        <!--greet是下面定义的方法-->
        <button v-on:click="greet">Greet</button>
    </div>
</div>
<div id="example-3">
    <button v-on:click="Say('hi')">Say Hi</button>
    <button v-on:click="Say('hello')">Say hello</button>
    <button v-on:click="warn('表单还不允许提交',$event)">Submit</button>
</div>
<script type="text/javascript" src="source/vue.js"></script>
<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    })
    var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })

    // 也可以用 JavaScript 直接调用方法
    //example2.greet() // => 'Hello Vue.js!'

    //内联处理器中的方法
    //除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
    var example3 = new Vue({
        el: '#example-3',
        methods: {
            Say: function (message) {
                alert(message)
            },
            warn: function (message, event) {
                if (event) event.preventDefault()
                alert(message)
            }
        }
    })
    //有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

</script>
</body>
</html>