vue入門：屬性綁定與事件綁定

簡介

vue中的html元素的屬性和事件是支持經過變量方式動態修改，和原始js的dom操做有一些區別。這裏總結一下vue的屬性綁定與事件綁定的方法，以及與原生js的對比。

屬性綁定

屬性綁定指的是將html元素的一個屬性值設置成變量。

原生的html中，好比<input type="text" />，這裏的type的值就是text。

在vue中，咱們能夠把text設置成一個變量:input_type。

能夠寫成<input :type="input_type" />，這裏就實現了一個vue的屬性綁定，type的值會隨着input_type變化而變化。

屬性綁定語法

屬性綁定有兩種寫法

1. :attr="var"
2. v-bind:attr="var"

上面的例子裏面寫的是<input :type="input_type" />，對應了第一種寫法；也能夠寫成<input v-bind:type="input_type" />。項目通常採用第一種縮寫方式。

對比原生js

若是使用原生js去操做dom元素的屬性的話，通常是先獲取到input元素，而後經過js的屬性設置方法去修改這個input元素。

事件綁定

和屬性綁定相似，html元素中的事件也能夠綁定到一個特定的變量，好比<button @click="changeType()"></button>。

這裏click方法就綁定到了changeType函數，點擊這個button，就會調用changeType函數。

事件綁定也有兩種寫法

1. @event="eventhandler(param..)"
2. v-on:event="eventhandler(param..)"

event表明某個事件，如click。eventhandler指的是處理函數，其中能夠傳入變量（一個或多個），記住屬性綁定的函數裏面必須有()，不能只是一個函數名。

<button id='testBtn' @click="changeType()"></button>對應的是第一種寫法。

也能夠寫成<button  id='testBtn'  v-on:click="changeType()"></button>，通常採用第一種寫法。

對比原生js

若是使用原生js去綁定事件的話，能夠對元素設置事件監聽和事件綁定。

#js事件綁定方式，只能給button綁定一個事件
document.getElementById("testBtn").onclick = changeType;

#js事件監聽方式，能夠給button綁定多個事件
document.getElementById("testBtn").addEventListener("click",changeType);

vue中的元素使用原生js事件監聽，好比某個自定義的vue組件ms-nav，我要給這個組件綁定一個click事件，正常狀況下是不生效的。

#這裏應該加上.native註明監聽的是原生js的事件
<ms-nav @click.native='handleJsClick'></ms-nav>

實際例子

vue屬性綁定和事件綁定的代碼片斷

<input v-bind:type="input_type" />
<button @click="changeType()"></button>
export default {
    data() {
        return {
　　　　　　　　input_type : 'text'
　　　　　　 }
　　},methods:
　　{
　　　　changeType() {
　　　　　　this.input_type = "radio"
　　　　}
　　}
}

博主：測試生財

座右銘：專一測試與自動化，致力提升研發效能；經過測試精進完成原始積累，經過讀書理財奔向財務自由。

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

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

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