v-on

Posted on Edited on In Views: Disqus:

 

一、

一個 v-on 的 click 事件範例如下

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <button v-on:click="Show">Show</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                Show: function () {
                    let vm = this;
                    console.log(vm.message);
                }
            }
        });
    </script>

</body>

</html>

 

也等於以下縮寫

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <button @click="Show">Show</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                Show: function () {
                    let vm = this;
                    console.log(vm.message);
                }
            }
        });
    </script>

</body>

</html>

 

二、inline statement - $event 的使用

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <table>
            <tr>
                <th>name</th>
                <th>age</th>
                <th></th>
            </tr>
            <tr>
                <td>mary</td>
                <td>13</td>
                <td><button @click="Delete($event)">delete</button></td>
            </tr>
            <tr>
                <td>Mike</td>
                <td>23</td>
                <td><button @click="Delete($event)">delete</button></td>
            </tr>
        </table>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                Delete: function (event) {
                    let target = event.target;
                    target.parentElement.parentElement.remove();
                }
            }
        });
    </script>

</body>

</html>

 

三、一個元素綁定多個事件

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <table>
            <tr>
                <th>name</th>
                <th>age</th>
                <th></th>
            </tr>
            <tr>
                <td>mary</td>
                <td>13</td>
                <td><button v-on="{mousedown:Show,mouseup:Delete}">delete</button></td>
            </tr>
            <tr>
                <td>Mike</td>
                <td>23</td>
                <td><button v-on="{mousedown:Show,mouseup:Delete}">delete</button></td>
            </tr>
        </table>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                Delete: function (event) {
                    let target = event.target;
                    target.parentElement.parentElement.remove();
                },
                Show: function () {
                    console.log("already delete");
                }
            }
        });
    </script>

</body>

</html>

 

四、Modifiers

以下列出一個事件後面還可接續以下修飾子

 

.stop - call event.stopPropagation().

.prevent - call event.preventDefault().

.capture - add event listener in capture mode.

.self - only trigger handler if event was dispatched from this element.

.{keyCode | keyAlias} - only trigger handler on certain keys.

.native - listen for a native event on the root element of component.

.once - trigger handler at most once.

.left - (2.2.0+) only trigger handler for left button mouse events.

.right - (2.2.0+) only trigger handler for right button mouse events.

.middle - (2.2.0+) only trigger handler for middle button mouse events.

.passive - (2.3.0+) attaches a DOM event with { passive: true }.