vue基础篇(一)
vue基础篇(一)
1.v-bind 可以用于绑定任何属性
例子:<div v-bind:class="class_arr"></div>
简写模式:<div :class="class_arr"></div>
注意:v-bind对于class和style的绑定有些特别!如下
在vue中的data处的设置:1.针对class: class_arr:['aa' , 'bb' ,'cc'] ==>设置为数组形式
2.正对于style的绑定:style_json:{width:200px, height:230px,background:'yellow'} ==》设置为对象形式
style绑定形式:
1.2 v-bind绑定多个属性
<h1 v-bind="{id:myid,class:mycolor}">单身狗一个!!!</h1>
等同于:<h1 :id="myid" :class="mycolor">单身狗一个!!!</h1>
注意:当使用了vue指令过后,想使得绑定成为动态绑定,若想要实现直接绑定到指定类名或是属性,需要使用对象形式,并给予true或者false来设置。
例如:
在html中的style中存在一个类名样式:
.red{ color:"red" }
标签中:<h1 :class="red"></h1> 由于使用了vue中的v-bind成为了动态绑定,此时red就无法直接成为类名,除非vue中存在red数据源。
解决方法:<h1 :class="{ red:true / false }"></h1>
2.常见事件修饰符
.stop 防止冒泡 .prevent 阻止默认事件 .once 所绑定的事件 只触发一次
.self 只当触发自身时才触发事件