技術標籤：vue前端vuejavascript前端html

v-on指令的作用其實就是繫結事件。
事件是JavaScript的靈魂，事件驅動著JavaScript程式的執行。
vue為我們提供了v-on指令用於繫結事件。

<button v-on:click="add">加分</button>
<button @click="reduce">減分</button>

這是兩種基本的語法格式。
其中的add和reduce必須在vue例項中的methods中提前宣告好。
vue語法具有很強的靈活性，其實我們可以將事件寫成動態

<button v-on:[event]="add">加分</button>
<button @[event]="reduce">減分</button>

event的值我們需要在data中宣告好。
除了正常的事件觸發機制，vue也為我們提供了很多的事件修飾符，應用於各種業務場景。

• .stop - 阻止冒泡
• .prevent - 阻止預設事件
• .capture - 阻止捕獲
• .self - 只監聽觸發該元素的事件
• .once - 只觸發一次
• .left - 左鍵事件
• .right - 右鍵事件
• .middle - 中間滾輪事件
  
  下面為大家提供一個小案例學習v-on的用法。
  一個簡單的計數程式

    <div id="app">
        本場得分：{{count}} <br/>
        <button v-on:click="add">加分</button>
        <button @click="reduce">減分</button>
        <br/>
        <input type="text" v-on:keyup.
 
enter="enterAdd" v-model="test" />
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                count:0,
                test:'',
                event:'click'
            },
            methods: {
                add(){
                    this.count++;
                },
                reduce(){
                    if(this.count == 0){
                        alert("得分不能小於0");
                    }else{
                        this.count--;
                    }
                },
                enterAdd(){
                    if(this.count + parseInt(this.test) < 0){
                        alert('得分不能小於0');
                    }else{
                        this.count = this.count + parseInt(this.test);
                    }
                        this.test = '';
                }
            }
        });
    </script>

可以通過按鈕的點選事件觸發分數的改變，也可以通過下方的input輸入事件改變分數。

技術積累都是通過一點一點的程式碼量堆起來的，多多敲程式碼，要在具體的業務場景中懂得如何運用自己學到的知識。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料