vue中事件修饰符.native

v-model的修饰符

.lazy

• 在输入框中，v-model 默认是同步数据，使用 .lazy 会转变为在 change 事件中同步 ，也就是在失去焦点 或者 按下回车键时才更新

.number

• .number 修饰符可以将 输入的值转化为Number类型 ，否则虽然你输入的是数字，但它的类型其实是String，在数字输入框中比较有用

.trim

• .trim 修饰符会自动过滤掉输入的首尾空格

<input type="text" v-model.lazy="val">
<input type="number" v-model.number="val">
<input type="etxt" v-model.trim="val">

事件修饰符 @click

1. .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
2. .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
3. .capture：与事件冒泡的方向相反，事件捕获由外到内
4. .self：只有点击自己范围内的区域才触发事件，子元素无法触发父元素事件
5. .once：只会触发一次
   

// 1、 正常父子关系绑定点击事件
	// 点击父盒子 ———— 父
	// 点击子盒子 ———— 子、父 ———— 默认为事件冒泡
<div @click="log('父')" class="pd-30 bg-yellow">
   <div @click="log('子')" class="border-blue">内部子盒子</div>
</div>
// 2、 正常父子关系绑定点击事件
	// 点击父盒子 ———— 父
	// 点击子盒子 ———— 父、子 ———— 改变事件冒泡为事件捕获
<div @click.capture="log('父')" class="pd-30 bg-yellow">
   <div @click="log('子')" class="border-blue">内部子盒子</div>
</div>
// 2、 正常父子关系绑定点击事件
	// 点击父盒子 ———— 父
	// 点击子盒子 ———— 子 ———— 子元素无法触发父元素事件
<div @click.self="log('父')" class="pd-30 bg-yellow">
   <div @click="log('子')" class="border-blue">内部子盒子</div>
</div>

键盘修饰符 @keyup

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

鼠标修饰符 @click

.left：鼠标左键
.middle：鼠标中间滚轮
.right：鼠标右键

<!--点击鼠标左键触发事件：-->
<div @click.left="divEvent">点击鼠标左键触发事件</div>

.native

• vue维护了自己的事件机制。所以就有了原生DOM事件和自定义事件的区别
• 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

那么如何给自定义组件添加原生事件呢

给自定义组件绑定原生事件的做法是：把原生事件绑定到组件的根节点

<!-- 以下无论你怎么点击hello都不会触发父组件的事件的 -->
<!-- 除非在子组件中加上@click="$emit('click')"，也就是触发自定义事件 -->
<template>
  <div class="hello">
    hello
  </div>
</template>

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" @click="clickEvent"/>
  </div>
</template>
<script>
  methods: {
    clickEvent(){
      console.log('事件触发')
    }
  }
</script>

//.native 就可以直接将组件上的自定义事件识别为原生事件
<HelloWorld msg="Welcome to Your Vue.js App" @click.native="clickEvent"/>