Vue 修饰符

修饰符

stop ：阻止事件冒泡。

    <div id="App">
        <div @click="divclick" style="height: 100px;width: 100px;background-color:dodgerblue;">
            <button @click.stop="btnclick">点我</button>
        </div>
     
    </div>
    <script>
        var App = new Vue({
            el: '#App',
            data: {

            },
            methods: {
                divclick: function () {
                    alert('div被点击了')
                },
                btnclick: function () {
                    alert('btn 被点击了')
                },
            }
        })
    </script>

• 当点击 div 时（不点击 button ），控制台会打印出 "div被点击了" ；
• 当点击 button 时，控制台会打印出 "div被点击了" 和 "btn 被点击了" 。
  这是因为，button 作为 div 的子元素，当点击 子元素button 时，button 的单击事件会冒泡到 父元素div ，从而触发 div 的 click 事件。所以会先执行 button 的 click 事件，再执行 div 的 click 事件。
  很多时候，并不希望事件往上冒泡，对于这个问题， stop 修饰符可以阻止事件冒泡。
  <button @click.stop="btnclick">点我</button>

prevent ：提交事件，并且不重载页面。

<form action="" @submit="hangle">
    <button type="submit">提交表单</button>
</form>

<script>
    var App = new Vue({
        el: '#App',
        data: {

        },
        methods: {
            handle() {
                console.log('表单被提交了') // 3、表单提交后，打印文本
            }
        }
    })
</script>

上面代码中，当点击表单中的提交按钮后，表单就会被提交，控制台会打印文本，并且页面会被刷新。需要注意的是，submit 事件应该定义在 form 元素上，而不是 button 元素上。
页面被刷新不利于用户体验，所以需要阻止页面刷新，可以用 prevent 修饰符：

<form action="" @submit.prevent="hangle">
    <button type="submit">提交表单</button>
</form>

self ：只有当前元素自身才能触发，当前元素的子元素不能触发。

以上面事件冒泡为例：
父元素div 可能会有很多个子元素，如果其他子元素也有 click 事件，那么就要给所有子元素加上 stop 修饰符，很麻烦。
所以，希望所有子元素都不要触发父元素的 click 事件，只让父元素自己触发自己的 click 事件。只需要给父元素加上 self 修饰符即可。

self语法:只是作用在元素本身而非子元素的时候调用
        <br>
        <div @click.self="divclick" style="height: 100px;width: 100px;background-color:dodgerblue;">
            <button @click="btnclick">点我</button>
        </div>

• stop 是写在子元素上的，而 self 是写在父元素上的；
• stop 是为了阻止子元素的事件向父元素冒泡，self 是为了不让子元素触发父元素的事件。

once ：让事件只触发一次。

<div id="app">
    <button @click.once="once">once</button>  
    <button @click="more">more</button>      
</div>



<script>
    var App = new Vue({
        el: '#App',
        data: {

        },
        methods: {
            once() {
                console.log('只执行一次')
            },
            more() {
                console.log('执行多次')
            }
        }
    })
</script>

第一个 button 的 click 后面跟了一个 ".once"，只执行一次；第二个 button 没有 ".once"，可以执行多次。

lazy: 可以使输入框在 失去焦点 或 按回车键 之后再更新。

<div id="app">
  <input type="text" v-model.lazy="text">  
  -- {{ text }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '红豆生南国'
  }
})

可以看到，input 输入新的内容后，后面的文本没有实时更新。只有在 input 失去焦点，或按下回车键时，后面的文本才会更新。

number 修饰符：将输入的 string 类型转换成 number 类型。

<div id="app">
  <input type="text" v-model.number="text"> 
  -- {{ typeof text }}  
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: ''
  }
})

输入文字的内容，是字符串类型。

使用number 修饰符后，就会自动将用户输入的内容转换成 number 类型。

trim ：自动过滤首尾空格。

<div id="app">
  没有使用 trim ：<input type="text" v-model="text1">
  -- {{ text1.length }}
<br>
  
  使用了 trim ：<input type="text" v-model.trim="text2">  
// v-model 指令后，使用 trim 修饰符
  -- {{ text2.length }}  // 输出字符长度
</div>

var app = new Vue({
  el: '#app',
  data: {
    text1: '',
    text2: ''
  }
})

默认都是空字符串，length 都为 0 。

在 input 中输入 十个空格和一些字符再输入十个空格，看看 length 将如何变化。

可以看到，没有使用 trim 的 input，length 属性会将空格也算进去。使用了 trim 的 input，length 属性没有将首尾的空格计算进去，因为首尾空格将会在 input 失去焦点时被去除。