Vue2.事件修饰符和v-model修饰符

一、事件修饰符

事件修饰符用法：

.prevent，设置prevent可以清除浏览器默认行为，通俗的讲，点击a标签之后，不会进行页面的刷新

        <a href="" @click.prevent="func()">点我</a>

.stop，设置stop可以阻止冒泡事件，由内到外的事件依次触发，stop阻止由内到外的事件触发，叫冒泡。

		<div @click="func1()" class="box1">
            <p @click="func2()" class="box2">
                <samp @click.stop="func3()" class="box3">

                </samp>
            </p>
        </div>
	//js部分
	 func1(){
                console.log("我是div");
            },
            func2(){
                console.log("我是p");
            },
            func3(){
                console.log("我是samp");
            }

.once ，设置once，事件只会触发一次

		<div @click.once="func1()" class="box1">
            <p @click="func2()" class="box2">
                <samp @click="func3()" class="box3">

                </samp>
            </p>
        </div>
       //js代码同上

.captrue 捕获模式先触发带有该修饰符的元素，多个该修饰符，则由外而内触发打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）

		<div @click="func1()" class="box1">我是div
            <p @click.capture="func2()" class="box2">我是p
                <samp @click="func3()" class="box3">
                    我是samp
                </samp>
            </p>
        </div>
        //会先触发p标签

.self 阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式) 给元素设置self后，点击当前设置的自身元素会触发点击设置self的子类，会跳过设置了self的元素

		<div @click="func1()" class="box1">我是div
            <p @click.self="func2()" class="box2">我是p
                <samp @click="func3()" class="box3">
                    我是samp
                </samp>
            </p>
        </div>
        //阻止自身事件促发

二、v-model修饰符

.lazy 失去焦点后提交数据(data)

		<form action="">
            <input type="text" v-model.lazy="user">
            {{user}}
        </form>

.number可以将字符串转换为有效数字 “1”==1

		<form action="">
            <input type="text" v-model.number="user.suqi">
            {{user.suqi}}
        </form>

.trim清除前后空格

	 	<form action="">
            <input type="text" v-model.trim="user.suqi">
            {{user.suqi}}
        </form>

三、总结

事件修饰符

1.事件.prevent用于阻止浏览器默认行为
2.事件.stop阻止冒泡事件
3.事件.once只能触发一次
4.事件.capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）
5.事件.self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式) 给元素设置self后，点击当前设置的自身元素会触发点击设置self的子类，会跳过设置了self的元素

v-model修饰符

1.v-model.lazy失去焦点后提交数据(data)
2.v-model.number可以将字符串转换为有效数字 “1”==1
3.v.model.trim清除前后空格
- [x] 打卡3.21