01-监听事件

当模板渲染完成后,就可以进行事件的绑定和监听了

v-on:click/ @click

一.方法及内联语句处理器

二.常用修饰符

(1).stop 阻止冒泡事件

(2).prevent  阻止默认事件

  <a href="http:www.cnblogs.com">cnblogs</a>点击跳转

  <a href="http:www.cnblogs.com" @click.prevent>cnblogs</a>  点击不会跳转

  <a href="http:www.cnblogs.com" @click.prevent="hiYourself">cnblogs</a>  点击不会跳转,但会执行hiYourself方法

(3).capture添加事件监听器(父元素中使用)

  a.点击sayHis,会先执行子元素sayHis, 再执行父元素方法sayHif :son father

  <div @click=''sayHif''>

    <button @click="sayHIs">sayHis</button>

  </div>

  b.点击sayHis,会先执行父元素方法sayHif, 再执行子元素sayHis:father son

  <div @click.capture=''sayHif''>

    <button @click="sayHIs">sayHis</button>

  </div>

(4).self 只当事件是从监听元素本身出发时才触发回调

(5)一些按键修饰符

  <input v-on:keyup.13="submit" />

  监听input的输入,回车时触发submit事件,(回车的keycode值为13)

  常见的按键名被提供了别称:enter、tab、delete、esc、space、up、down、left、right
  上面的可以写成:

  <input v-on:keyup.enter="submit" />
  也可以在Vue.config.keyCodes里添加自定义按键别名,无需修改v-on指令,例如:Vue.config.keyCodes.f1 = 112;

猜你喜欢

转载自www.cnblogs.com/bob43992/p/12441486.html
今日推荐