阿菜的Vue学习之旅（七）

1.在v-on中使用.stop修饰符

当我们想要获取用户在界面上的点击互动之时，可以通过监听用户的点击事件来实现，那么v-on的作用就是绑定事件监听器。

v-on: 也可以使用 @ 来表示

css部分

.myMenu1{
    border: 5px solid skyblue;
    background-color: #84bbf3;
}

html部分

<div class="myMenu">
        <!--停止冒泡： .stop修饰符-->
        <div class="myMenu1" @click="divClick">
            <p>点击此文字</p><br/>
            <button @click="btnClick">按钮</button>
        </div>

js部分

const myMenu1 = new Vue({
    el: '.myMenu1',
    methods: {
        btnClick: function (){
            //当用户点击了按钮时，控制台便会打印下面的语句
            console.log("这是点击了按钮");
        },
        divClick: function () {
            //当用户点击了myMenu1的整个区域时（为了方便看，该区域填充了天蓝色），控制台便会打印下面的语句
            console.log("这是点击了div板块");
        }
    }
})

运行效果：

当我们点击蓝色区域的时候（即myMenu1的div板块），调用了4次divClick方法，控制台打印了4次的对应语句

当我们点击按钮的时候，调用了2次btnClick方法和divClick方法，控制台分别打印了2次的对应语句。

但是我们并不想要在用户在点击按钮的时候，也触发divClick方法，咋办？

那么可以在< button >部分将 @click 改成 @click.stop

.stop ----调用event.stopPropagation()

修改后的html部分

<div class="myMenu">
        <!--停止冒泡： .stop修饰符-->
        <div class="myMenu1" @click="divClick">
            <p>点击此文字</p><br/>
            <button @click.stop ="btnClick">按钮</button>
        </div>
</div>

再次运行结果：

2.在v-on中使用.prevent修饰符

当我们在表格当中设定一个submit的提交按钮的时候，当用户点击该按钮，便会自动跳转到action指定的页面。

.prevent ----调用event.preventDefault()

html部分

<div class="myMenu">
        <!--阻止默认行为： .prevent修饰符-->
        <form action="blank.html">
            <input type="submit" value="提交" @click="submitClick">
        </form>
</div>

js部分

const myMenu = new Vue({
    el: '.myMenu',
    methods: {
        submitClick: function (){
            console.log("用户提交了表格");
        }
    }
})

运行效果：


如果我们不想要该按钮的默认跳转呢？

可以使用.prevent修饰符，即在@click后面添加一个.prevent

修改后的html部分

<div class="myMenu">
        <!--阻止默认行为： .prevent修饰符-->
        <form action="blank.html">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>
</div>

运行效果

3.在v-on中使用键修饰符

当我们想要监听用户到底按了多少次键盘的键帽时，可以使用@keyup修饰符。

.{ keyCode | keyAlias } ----当事件从特定键触发时才会触发回调
html部分

<div class="myMenu">
       <!--阻止默认行为且没有表达式： submit.prevent修饰符-->
        <!--键修饰符 键别名 （监听某个键盘的键帽-->
        
        <input type="text" @keyup="keyupClick">
</div>

js部分

const myMenu = new Vue({
    el: '.myMenu',
    methods: {
       keyupClick: function (){
            console.log("用户按了一次某个键盘的键帽");
        }
    }
})

运行结果：
用户输入hello的时候，一共按了5次键盘

如果我们想要获取的是用户按enter键盘的次数呢？

可以在@keyup的后面添加.enter或者.13

修改后的html部分

<div class="myMenu">
       <!--阻止默认行为且没有表达式： submit.prevent修饰符-->
        <!--键修饰符 键别名 （监听某个键盘的键帽-->

        <!--制定监听的特定条件是：点击了enter-->
        <input type="text" @keyup.enter="keyupClick">
        <!--法二： 13是enter键盘的ACSII码-->
<!--        <input type="text" @keyup.13="keyupClick">-->
</div>

运行结果：

—————————————————————————— —

上一篇
阿菜的Vue学习之旅（六）

上一篇
阿菜的Vue学习之旅（八）