Vue.js自定義標籤屬性並獲取屬性，及綁定img的src屬性的坑

1、定義屬性：

　　通常定義屬性都是爲了動態的去獲取屬性的值，或者動態的設置屬性的值，若是想僅僅是設置一個普通的屬性，直接在便籤上設置屬性便可，就像使用html的title、name等屬性同樣，如<h1  myProp ='it is my value'  >H1標籤</h1>。

　　下面具體說動態綁定自定義屬性：

　　在元素標籤上經過v-bind:propName = ‘valueInData’   解釋：propName 是本身指定的屬性名，valueInData是定義在Vue實例的data中的屬性名。v-bind的指令也能夠使用半角的冒號代替。

　　

2、獲取屬性：

　　三種方法：

　　　　1. 通用方法：

　　　　　　在添加了自定義屬性 的元素上，綁定點擊事件（你也能夠換成其餘的事件，好比mouseEnter等等，此處以點擊事件爲例），在綁定的事件處理函數中接受一個參數（一般是event,e等等，你也能夠自定義，此處以event參數爲例），經過：event.currentTarget.getAttribute('propName ');就能夠獲取到，此處用currentTarget是指你點擊的元素的外層包裹的元素，若是換成target,就指的是你實際點擊的元素，建議使用currentTarget，由於若是你的自定義屬性的元素內層含有子元素，使用target獲取到的是子元素，獲取的屬性天然也是null,若是想了解target與currenTarget更多區別，請猛戳這裏：http://www.javashuo.com/article/p-wlwghsfd-ct.html

　　　　2. 函數傳參的形式：　　　　

　　　　　　 <div id='app'>

　　　　　　　<button @click='handleSubmit(e,300)'>提交</button>

　　　　  </div>

　　　　　

　　　　　　 methods:{

　　　　　　handleSubmit(a,b){

　　　　　　　　console.log(b);        //300 

　　　　　　}

　　　　　}

　　　　　　

　　　　3. 經過設置ref屬性：

　　　　　　原理：經過給元素設置ref屬性，獲取到該元素，而後再獲取該元素的屬性值；方便使用。

　　　　　　代碼：　

　　　　　　 <div id='app'>

　　　　　　　　<button    ref='myTargetEle'    name='definedNAME'     @click='handleSubmit(e)'>提交</button>

　　　　  </div>

 

　　　　　methods :{

　　　　　　handleSubmit(event){

　　　　　　　　const  theEle = this . $refs . myTargetEle;     //獲取到元素

　　　　　　　　console.log(theEle . name);

　　　　　　}

　　　　 }

3、綁定img標籤的src屬性時，圖片不顯示的問題：

　　　　在生成src值的位置（注意不是在html標籤上），給圖片路徑外層加上 require (  //圖片路徑   )；  便可。