GSO vue(02)

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

• .stop 阻止事件冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
  （给父类装上后，父类会在子类前触发事件）
• .self 只当事件在该元素本身（而不是子元素）触发时触发回调
• .once 事件只能点击一次，2.1.4版本新增

<a v-on:click.stop="doThis"></a>

v-model（双向绑定）

• v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定。

• 使用 v-model 指令,可以实现表单元素和model中数据(data)的双向绑定。(m->V,V->M)

<input type="text" v-model="msg" />

vue属性绑定设置class

第一种使用方式，直接传递一个数组，v-bind绑定(此种方法类名必须加引号)

  <h1 :class="['red','thin']">好大啊</h1>

第二种，在数组中使用三元表达式

<h1 :class="['red','thin',flag?active:null]">

第三种，在数组中使用对象来代替三元表达式

<h1 :class="{red:true,thin:true,active:true}">好大啊</h1>

属性绑定内联样式

 <h1 :style="[s1,s2]">就是好长啊</h1>
      data:{
            s1:{"color":"red"},
			s2:{"font-style":"italic"}
			   }