Vue自學之路8-vue模版語法（事件綁定)

事件綁定

一個複雜的前端應用，離不開用戶交互，而用戶交互離不開事件綁定。

Vue中事件綁定語法

//1. v-on指令語法：<input type='button' v-on:click='num++' />
//2. 簡寫方式(經常使用）：<input type='button' @click='num++' />

事件函數的調用方式

//1. 直接綁定函數名稱：<button v-on:click='say'>Hello</button>/2. 調用函數<button v-on:click='say()'>Hi</button>//3. 事件函數參數傳遞：<button v-on:click='say("hi", $event)'>Hi</button>

事件綁定的例子 

<div id='app'>
    <!-- 點擊button，讓num自增-->
    <input type='button' v-on:click='num++'>num++</input>
    <!-- 點擊button，讓num自減-->
    <input type='button' @click='num--'/>num--</input>
    <!-- 點擊button，讓num自增-->
    <input type='button' @click='handle'/>num++</input>
    <!-- 點擊button，讓num自增-->
    <input type='button' @click='handle()'/>num++</input>
   <!-- 點擊button，傳遞具體參數，設置num-->
   <input type='button' @click='handle2(123)'/>num++</input>
   <!-- 點擊button，傳遞具體參數（包括事件），設置num-->
   <input type='button' @click='handle3(123,$event)'/>num++</input>

    <div>{{ num }}</div></div><!-- 先下載vue.js --><script type='text/javascript' src='js/vue.js'></script><script>//1. html中書寫標籤//2. 引入vue.js//3. 使用vue進行數據渲染。var vm = new Vue(
    {
        el: '#app', //綁定到id選擇器        data: {           "num": 1
        },methods: {            //空參數，默認第一個參數傳遞event            handle: function(event){                //須要添加this指針（指向vm自身），不然num沒法被引用到。                console.log(this===vm)                this.num++ ;
            },  
            handle2: function(num){                this.num = num;
            },  
            handle3: function(num, event){
                console.log(event.target.tagName)                this.num = num;
            }
        }
    }
)</script>

 

傳送門：2021最新測試資料&大廠職位

博主：測試生財（一個不爲996而996的測開碼農）

座右銘：專一測試開發與自動化運維，努力讀書思考寫做，爲內卷的人生奠基財務自由。

內容範疇：技術提高，職場雜談，事業發展，閱讀寫做，投資理財，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客園：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公衆號：測試生財（按期分享獨家內容和資源）