vue编写时的一些注意事项（2）--修饰符篇

一.修饰符 参照 vue.js 事件处理
·（1）事件修饰符
.stop
.prevent
.capture
.self
.once
.passive

1. stop 阻止事件向上冒泡

	<!--阻止单击事件向上传播-->
	<div @click="doThat">
		<div @click.stop="doSomething">子元素</div> 
	</div>
	<!--即加上stop之后,点击子元素的时候,不会触发父元素的 doThat 事件-->
	

<!--修饰符可以串联-->
	<a @click.stop.prevent href="http://www.baidu.com">点击我</a>
	<!--现在点击a元素，不会跳转到baidu, prevent 阻止了a 的 默认跳转行为-->

2. capture 捕获事件，改变事件的冒泡顺序

	<div class='o-div div1' @click.capture="div1Fn">
      div1
      <div class='o-div div2' @click.capture="div2Fn">
        div2
        <div class='o-div div3' @click="div3Fn">
          div3
        </div>
      </div>
    </div>
	<!-- 这个例子里的事件冒泡变成了 div1Fn -> div2Fn -> div3Fn -->
	
	<div class='o-div div1' @click="div1Fn">
      div1
      <div class='o-div div2' @click.capture="div2Fn">
        div2
        <div class='o-div div3' @click="div3Fn">
          div3
        </div>
      </div>
    </div>
	<!-- 这个例子里的事件冒泡变成了 div2Fn -> div3Fn -> div1Fn   -->
	
	<div class='o-div div1' @click.capture="div1Fn">
      div1
      <div class='o-div div2' @click="div2Fn">
        div2
        <div class='o-div div3' @click="div3Fn">
          div3
        </div>
      </div>
    </div>
	<!-- 这个例子里的事件冒泡变成了 div1Fn - > div3Fn -> div2Fn  -->

·自己理解： 加了capture的元素下的子元素被点击的时候，父元素先触发，子元素再按照原有的顺序冒泡
·
2.once 事件只会执行一次

	<div @click.once="doSomething">点击</div>

·
3.passive 不阻止默认行为，不能与prevent 一起使用，会被忽略，passive 优先级比较高，尤其能够提升移动端的性能。
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

·
4.prevent 阻止默认行为 ，如表单的提交刷新，a标签的点击跳转

二、按键修饰符 --对具体的按键进行监听
·
例子：

	<input @keyup.enter="doSomething" value="请回车"/>

可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符，如下：

	<input @keyup.page-down="doSomething" value="翻页-下一页"/>

·
Vue提供了常用的按键的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以通过 Vue.config.keyCodes.f1 = 112 来修改对应键值的别名

三、系统修饰符 这个比较少遇到 (2.1.0 新增)
.ctrl
.alt
.shift
.meta

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

四、鼠标按钮修饰符 会显示函数仅响应特定的鼠标按钮（2.2.0 新增）
.left
.right
.middle

	<div @click.right.prevent="contextMenu"></div>
	<!-- 鼠标按钮修饰符 'right' 结合 事件修饰符 ，可以用来做自定义菜单-->