Vue v-on 事件指令

by deniro

HTML

<div id="app4">
    <input @keyup.alt.83="save">
</div>
<div id="app3">
    <input @keyup.13="enterClick">
</div>
<div id="app2">
    <a href="www.163.com" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
</div>
<div id="app">
    <h3>已点击 {{count}} 次</h3>
    <button @click="count++">点我</button>
    <button @click="quickAdd(3)">快速增长</button>
</div>

Vue

var app4 = new Vue({
        el: '#app4',
        data: {},
        methods: {
            save: function () {
                console.log("save");
            }
        }
    });
    var app3 = new Vue({
        el: '#app3',
        data: {},
        methods: {
            enterClick: function () {
                console.log("enterClick");
            }
        }
    });

    var app2 = new Vue({
        el: '#app2',
        data: {
            count: 0
        },
        methods: {
            openUrl: function (param, event) {
                event.preventDefault();
                console.log("param:" + param);
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            quickAdd: function (i) {
                i = i || 1;//为避免参数为 null 或 undefined 值，这里设定了默认值 1
                this.count += i;
            }
        }
    });