Vue绑定事件

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

应用实例html

<div id="content_area" class="aui-content aui-margin-b-15 mid">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-header aui-text-center" style="background: #fff;padding: 1rem 0;">
            <h1 class="color_organ aui-padded-b-10" style="font-size: 2rem;"><span v-cloak>{{DiamondAmount}}钻</span></h1>
            <h3>账户余额</h3>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">10
                    <!--<span class="color_organ aui-font-size-12">+7钻石（首充奖励）</span>-->
                </div>
                <div class="aui-list-item-right" v-on:click="buy('10');">
                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 1</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">60</div>
                <div class="aui-list-item-right" v-on:click="buy('60');">
                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 6</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">300</div>
                <div class="aui-list-item-right" v-on:click="buy('300');">
                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 30</div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">980</div>
                <div class="aui-list-item-right" v-on:click="buy('980');">
                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 98</div>
                </div>
            </div>
        </li>
    </ul>
</div>

js

var vm = new Vue({
    el: '#content_area',
    data: data,
    methods: {
        buy : function (count) {
            alert(count);
        }
    }
});

注意这里要用methods，不要忘记了s。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6693670.html，如需转载请自行联系原作者