vue修饰符

vue中的事件修饰符

常用：
1.prevent：阻止默认事件

 <!-- 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

2，stop：阻止事件冒泡

  <!--  阻止事件冒泡-->
        <div class="demo1" @click="showInfo">
            <button v-on:click.stop="showInfo">提示信息</button>
        </div>

修饰符可以连续写

  <!-- 阻止默认事件且停止冒泡 -->
        <div class="demo1" @click="showInfo">
            <a href="http://www.baidu.com" @click.stop.prevent="showInfo">提示信息</a>
        </div>

3.once：事件只触发一次

 <!-- 事件只触发一次 -->
        <button @click.once="showInfo">提示信息</button>

4.capture：使用事件的捕获模式

 <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

先触发捕获阶段：由外到内，然后触发冒泡阶段，由内到外 

5.self:只有event.target是当前操作的元素时才触发事件

<div class="demo1" @click.self="showInfo">
            <button v-on:click="showInfo">提示信息</button>
        </div>

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

 <ul @wheel="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

wheel 滚轮滚到底，还可以触发
scroll 滚动条到底就不能拉动了 

CSS代码：

<style>
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background-color: blue;
        }

        .box1 {
            background-color: blueviolet;
            padding: 10px;
            /* height: 200px; */
        }

        .box2 {
            padding: 10px;
            background-color: pink;
        }

        .list {
            height: 200px;
            width: 200px;
            background-color: red;
            overflow: auto;
        }

        li {
            height: 100px;
        }
    </style>

 vue实例代码：

<script>
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京海淀'
                }
            },
            methods: {
                showInfo(e) {
                    // console.log(e.target.innerHTML)
                    // console.log(this)//此处this是vm
                    alert('你好啊')
                    // console.log(e.target)
                },
                showInfo1(number) {
                    console.log(number)
                    // console.log(e.target.innerHTML)
                    // console.log(this)//此处this是vm
                    alert('好啊')
                },
                showMsg(msg) {
                    // alert('捕获')
                    console.log(msg)
                },
                demo() {
                    console.log('A')
                }
            }
        })
    </script>

//vue修饰符

v-model修饰符

v-model.lazy()

输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：

<input type="text" v-model.lazy="value"/>

v-model.trim()

输入框过滤首尾的空格：

<input type="text" v-model.trim="value"/>

v-model.number

先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：

<input type="text" v-model.number="value"/>

​​​​​​​