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事件綁定方式，隻能給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

微信公衆号：測試生财（定期分享獨家内容和資源）