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