vue 的v-on與v-bind

<div class="app">
    <button v-on:click="myclick">click me</button>
</div>  

注意：後面的值是一個方法，可以寫成myclick()，如沒有引數也可以寫成myclick。另外這種事件對應的方法不是定義在data裡面，而是定義在vue例項的methods裡

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log(111111);
        }
    }
});

v-on可以繫結多個事件

<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
</div>  
<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
</div>  
<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave' v-on:click="myclick">click me</button>
</div>  
<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>  

當繫結多個事件時，需要傳入一個物件，物件的鍵名就是事件名，物件的鍵值就是對應事件要執行的方法。注意在vue例項中方法一定要有，不然就報錯。

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log("clicked");
        },
        onenter:function(){
            console.log("mouseented");
        },
        leave:function(){
            console.log("mouseleaved");
        }
    }
});

在繫結form表單中的提交事件時

<div class="app">
    <form v-on:submit='onSubmit($event)'>
        <!-- $event是vue裡面的事件物件，vue能認識 -->
        <input type="text" >
        <button type="submit">提交</button>
    </form>
</div>  

<scripe>
var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onSubmit:function(e){
            e.preventDefault();
            //阻止瀏覽器的預設行為，因為在表單提交的時候，瀏覽器會預設傳送一個get或者post請求到指定頁面，重新整理整個頁面。
            console.log("onSubmited");
        }
    }
});
</scripe>

注意：
$event是vue裡面的事件物件，vue能認識
在表單提交的時候，瀏覽器會預設傳送一個get或者post請求到指定頁面，重新整理整個頁面。阻止瀏覽器的預設行為，可以用事件物件e.preventDefault();

像上述form表單提交的這種瀏覽器預設事件，其實vue也想到了，它封裝好了，只要在事件的後面新增一個.prevent修飾符，表示阻止預設事件。

<div class="app">
    <form v-on:submit.='onSubmit'>
        <input type="text" >
        <button type="submit">提交</button>
    </form>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onSubmit:function(){
            console.log("onSubmited");
        }
    }
});

繫結事件中，除了prevent阻止預設事件，還有stop,表示停止冒泡事件

另外,當我們繫結的事件是keyup、keypress、keydown鍵盤事件時，而且需要判斷按下是回車時。這在以前我們需要判斷事件物件的keyCode，雖然功能特別簡單，但是每次去寫還是特別麻煩。vue也想到了這點，只需要在鍵盤事件後面新增一個.enter修飾符即可。

<div class="app">
    <div v-on:keydown.enter='mykeydownFn'>
    </div>
</div>  

另外跟v-bind一樣，v-on也有快捷方式：
v-on:事件名 可以簡寫為 @事件名，如

<div class="app">
    <div @keydown.enter='mykeydownFn'>
    </div>
</div>  

作者：jCodeLife
連結：https

<div class="app">
    <a v-bind:href="url">click me</a>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});

以上程式碼中，使用v-bind繫結了a標籤的href屬性，當a標籤被點選時，會根據對應vue中的對應的url資料進行跳轉到https://www.baidu.com
不光是href屬性可以被v-bind指令繫結，任何屬性都可以被繫結
例如，繫結src屬性、class屬性

<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>  
```javascripe
var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        kclass:"btn btn-default"
    }
});

上述程式碼中，同時繫結了a標籤的href屬性和class屬性，以及img標籤的src屬性，其資料分別對應data裡中的資料
也許你會奇怪，為什麼它會知道a標籤的href值url對應的就是data中的url？這其實就是vue背後的一種預設機制，它就是知道。但需要注意他們的名字得對應

用v-bind的繫結的屬性的值也可以是一個物件，例如：

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div>  

以上程式碼，active表示要新增的類名，isActive對應vue中的資料，表示在什麼情況下新增該類名，對應isActive為真才新增active類

由於使用頻繁，通常將v-bind:屬性名=" “的格式簡寫成:屬性名=” "

<div class="app">
    <a :class="{active:isActive}">click me</a>
</div>  

以上是v-bind基本使用！

作者：jCodeLife
連結：https://www.jianshu.com/p/3515e5aa3ade
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。