Vue事件处理与各类修饰符

事件处理器

---

• 1.v-on：事件处理器，可简写为：@
• 2.事件对象：

  methods:{
  	方法名(){}
  	}
  

  • 注意：不再是绑定data， vue中的事件是原生事件对象
• 3.事件参数
  • argHandler(a,b){……}
  • argHandler(arg1,arg2)—调用在标签中
• 4.事件修身符
  • 事件修饰符就是用来修饰事件的，它的作用是更加便捷的来使用一些重复的代码，比如事件冒泡。
  • 绑定形式如下：

    • .stop - 阻止事件冒泡

    • .prevent - 阻止浏览器默认行为

    • .capture - 阻止事件捕获

    • .self - 阻止自身事件

    • .once - 一次性事件

    • .passive - 不需要触发onscroll事件

    • 举个栗子：

      <!-- 阻止单击事件继续传播 -->
      <a v-on:click.stop="doThis"></a>
      
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      
      <!-- 修饰符可以串联 -->
      <a v-on:click.stop.prevent="doThat"></a>
      
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      
      <!-- 添加事件监听器时使用事件捕获模式 -->
      <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
      <div v-on:click.capture="doThis">...</div>
      
      <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
      <!-- 即事件不是从内部元素触发的 -->
      <div v-on:click.self="doThat">...</div>
      <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
      <!-- 而不会等待 `onScroll` 完成  -->
      <!-- 这其中包含 `event.preventDefault()` 的情况 -->
      <div v-on:scroll.passive="onScroll">...</div>
      <!-- 点击事件将只会触发一次 -->
      <a v-on:click.once="doThis"></a>
      

      • 注意：使用事件修饰符时，顺序很重要，相应的代码会以同样的顺序产生，因此用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击。
• 5.按键修饰符
  • 用来修饰键盘事件
    • .enter/13
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • 注意：键码也可以作为键盘修饰符
• 6.系统修饰符
  • 用来修饰鼠标事件
  • .ctrl
  • .alt
  • .shift
  • .meta - windows系统下的win键，mac本下是command
• 7.鼠标修饰符
  • 修饰鼠标
    • .left
    • .right
    • .middle
      【详细参照vue官网】
• 8.扩展：自定义事件 - 参照node.js的events模块
  • 事件的发布 - $on 声明一个事件
    • vm.$on.(事件名称，事件处理程序)
  • 事件的订阅 - $emit 订阅（触发）一个事件
    • vm.emit(事件名称，事件参数)

其他指令

---

• 1.v-pre:原样输出，可以显示原始mustache标签，跳过编译过程
• 2.v-cloak：在页面中加入如下代码：
  [ v-cloak ] { display:none }
  功能类似于v-text，即解决花括号闪现的问题
• 3.v-once：只渲染一次，只保留第一次元素和组件的渲染

自定义指令

---

• 全局定义：

  • Vue.directive( ‘指令名称’ ，‘指令的配置选项’)

• 局部定义：

  • directive:{ 指令名称，选项 }

• 举个栗子

  Vue.directive('focus',{
  	bind:function(){……},//当指令绑定在dom元素插入时触发
  	insert:function(el,b,c,d){
  		el.focus();//指令绑定的dom
  		if(b.modifiers.stop){
  			……
  		}
  		el.value = b.expression;
  		console.log(c);//vNode
  		console.log(d);//oldNode
  	}
  })
  

敲黑板：为什么在HTML中监听事件？

---

• Vue中的事件监听方式违背了关注点分离，但是所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的VM上，它不会导致任何维护的2困难。
• 有以下好处：
  • 1.扫一眼HTML模板就能轻松定位JS代码里的方法；
  • 2.无需在js里手动绑定事件，VM代码可以是非常纯粹的逻辑·，和DOM完全解耦，易于测试；
  • 3.当一个VM被销毁时，所有的事件处理器都会被手动删除，无须担心清理。