VUE事件修饰符

VUE事件修饰符

v-on的修饰符

1. @click.capture：与事件冒泡的方向相反。比如以前的事件是从子元素到父元素触发，而现在捕获阶段触发，则会从父元素到子元素。如同JS原生代码中addEventListener中的第三个参数设为true，即为捕获阶段触发。
2. @click.stop：阻止事件冒泡。
3. @click.prevent：阻止默认事件，比如在（锚点、表单中）会自动跳转、提交事件。
4. @click.once：只触发一次，比如在刮奖业务中，可能会用到。

<a href="https://www.baidu.com/index.html" @click.prevent="baidu">不要跳转a>
<p @click.once="gua">刮奖p>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
		},
		methods: {
			baidu(){
				console.log("不要去百度")
			},
			gua(){
				console.log("50代金券")
			}					
		}
	})
script>

5. @click.self：只触发自己的业务。阻止其他人的事件冒泡。底层是给子元素写的阻止冒泡。即我们给父元素添加该属性，当我们触发子元素的点击事件，不触发父元素。如下例子，我们给div增加self修饰符，当我们点击子元素button，只触发子元素。当我们点击父元素，只触发父元素。反之，若我们给子元素添加self修饰符，点击子元素button，则会触发子元素事件，再触发父元素事件。

		<div id="app">
			<div class="f" @click.self="f">
				xxxbutton>
			div>
		div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
				},
				methods: {
					f() {
						console.log("父元素")
					},
					son() {
						console.log("子元素")
					}
				}
			})
		script>

v-model的修饰符

1. v-model.lazy：数据懒加载
   比如当我们在input里用户输入自己的用户名，直到用户光标失焦才完成双向数据绑定。底层是把input事件改为change事件。
2. v-model.number：用户输入数据转为数字类型存入JS的数据中。number修饰符并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number类型 。如果用户输入的是数字，那么会得到一个number类型的值，而如果用户输入的不是数字，这个指令并不会产生任何效果。
3. v-model.trim：自动过滤用户输入的空格。
4. 多个修饰符，可直接相连。比如：v-model.trim.lazy
   例子如下：

<div id="app">
	<input type="text" name="input1" id="id01" v-model.lazy.trim="msg1"/><br>
	<p>{{msg1}}p><br>
	<input type="text" name="input2" id="id02" v-model.number="msg2"/><br>
	<button type="button" @click="fn">我是测试number的按钮button>	<br>
	<input type="text" name="input3" id="di03" v-model.trim="msg3"/><br>
div>
		
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			msg1:"我是msg1",
			msg2:"1200",
			msg3:"我是msg3"
		},
		methods:{
			fn(){
				console.log(this.msg2,typeof(this.msg2))
			}
		}
	})
script>