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  只当触发自身时才触发事件