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 (  //图片路径   )；  即可。