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"
　　　　}
　　}
}    

 

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

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

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

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

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

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

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