Vue事件修饰符和随机数

事件修饰符：自定义事件行为，配合v-on指令使用，事件后，用“.”符号连接。如“v-on:click.stop”阻止冒泡事件。
1、stop
用法：v-on:click.stop=“”
作用：发生点击事件时，阻止事件冒泡
代码：

    <div id="app">
        <div v-on:click="doParent">
            <button v-on:click="doThis">事件冒泡</button>
            <button v-on:click.stop="doThis">阻止事件冒泡</button>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            methods:{
                doParent(){
                    console.log('我是父元素单击事件');
                },
                doThis(){
                    console.log('我是被单机元素事件');
                }
            }
        });
    </script>

2、prevent
用法：v-on:click.prevent=“”
作用：发生点击事件时，阻止默认事件行为
代码：

    <div id="app">
        <a href="https://www.baidu.com" v-on:click.prevent>阻止默认行为</a>
        <a href="https://www.baidu.com">不阻止默认行为</a>
    </div>
    <script>
        var vm=new Vue({
            el: '#app'
        })
    </script>

3、capture
用法：v-on:click.capture=“”
作用：发生点击事件时，事件捕获
事件捕获的执行顺序是由外到内执行，与冒泡相反
代码：

    <div id="app">
        <div v-on:click.capture="doParent">
            <button v-on:click="doThis">事件捕获</button>
        </div>
    </div>
    <script>
           var vm=new Vue({
            el: '#app',
            methods:{
                doParent(){
                    console.log('我是父元素单击事件');
                },
                doThis(){
                    console.log('我是被单机元素事件');
                }
            }
        });
    </script>

4、self
用法：v-on:click.self =“”
作用：当点击本体时，才会正常触发，否则略过自己。
比如说他是父元素，当点击子元素时，正常冒泡，先输出子元素，在输出父元素，但是父元素设置了.self，于是只输出了子元素。
代码：

    <style>
        .Odiv1{
                width: 100px;height: 100px;background-color: blueviolet;margin: 5px;
        }
        .Odiv2{
            width: 50px;height: 50px;background-color: #ccc;
        }
    </style>

   <!-- click.self 若非点击自身，跳过当前元素继续冒泡 -->
    <div id="app">
        <div class="Odiv1" v-on:click.self="doParent">a
            <div class="Odiv2"  v-on:click="doThis">b</div>
        </div>
        <div class="Odiv1" v-on:click="doParent">c
            <div class="Odiv2"  v-on:click.self="doThis">d</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            methods:{
                doParent(){
                    console.log('父');
                },
                doThis(){
                    console.log('当前元素');
                }
            }
        })
    </script>

5、once
用法：v-on:click.once =“”
作用：只触发一次
代码：

    <!-- click.once 只执行一次事件 -->
    <div id="app">
        <button v-on:click.once="doThis">只执行一次</button>
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            methods:{
                doThis(){
                    console.log("我是当前元素的单击事件且只执行一次");
                }
            }
        })
    </script>

6、keyup.enter
用法：v-on:keyup.enter=“”
作用：当敲下回车键时，触发事件
代码：

    <div id="app">
        <!-- 绑定回车键 -->
        <input type="text" v-on:keyup.enter="submit">
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            methods:{
                submit(){
                    console.log('表单提交');
                }
            }
        });
    </script>

7、随机数
用法：Math.random()
作用：生成一个【0,1）的随机数
代码：

    <div id="app">
        <button v-on:click="count=Math.random()">随机数</button>
        <p>自动生成的随机数是{{count}}</p>
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                count: 0
            }
        })
    </script>