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

一、定義屬性：

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

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

　　在元素標簽上通過v-bind:propName = ‘valueInData’   解釋：propName 是自己指定的屬性名，valueInData是定義在Vue實例的data中的屬性名。v-bind的指令也可以使用半角的冒號代替。

　　

二、獲取屬性：

　　三種方法：

　　　　1. 通用方法：

　　　　　　在添加了自定義屬性 的元素上，綁定點擊事件（你也可以換成其他的事件，比如mouseEnter等等，此處以點擊事件為例），在綁定的事件處理函數中接受一個參數（通常是event,e等等，你也可以自定義，此處以event參數為例），通過：event.currentTarget.getAttribute('propName ');就可以獲取到，此處用currentTarget是指你點擊的元素的外層包裹的元素，如果換成target,就指的是你實際點擊的元素，建議使用currentTarget，因為如果你的自定義屬性的元素內層含有子元素，使用target獲取到的是子元素，獲取的屬性自然也是null,如果想了解target與currenTarget更多區別，請猛戳這里：https://juejin.im/post/59f16ffaf265da43085d4108

　　　　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);

　　　　　　}

　　　　 }

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

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