指令修饰符 

在vue使用指令过程中，还提供了一些增加或者削弱指令效果的修饰符。

　　

@事件名.stop="js代码"      阻止事件冒泡
@事件名.once="js代码"      限制事件只能触发一次
@事件名.prevent="js代码"   阻止页面刷新，常用于a元素或者form元素中

v-model.number="变量"     把用户输入到输入框的数据转换成数值类型(整数、小数)
v-model.trim="变量"       去除用户输入到输入框的数据左右两边的空格

　　

  • 阻止事件冒泡

事件冒泡是js里面的事件过程中的现象。所谓事件冒泡，指代的就是在父子元素绑定同类事件时，子元素的事件触发以后，父元素的同类事件也会被触发到。

  • 阻止刷新页面

针对表单中的提交按钮或者提交事件、a元素被点击时都会刷新页面，但是有时候，我们希望阻止页面刷新这种默认行为，则可以使用@事件.prevent。

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.6.14.js"></script>
</head>
<body>
    <div id="app">
        <p><button @click.once="num++">点赞({{num}})</button></p>
        <p @click="show('p')">
            <span href="" @click="show('span')">
                一个标题内容
                <button @click.stop="show('button')">点击更多</button>
            </span>
        </p>
        <a href="http://www.baidu.com" ref="link" @click.prevent="confirm">点击</a>
        <hr>
        <input type="text" v-model.number="num"><br>
        <input type="password" v-model.trim="password">
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    num: 0,
                    password: "",
                }
            },
            watch:{
                num(){
                    console.log(this.num, typeof this.num);
                },
                password(){
                    console.log(this.password);
                }
            },
            methods:{
                show(data){
                    console.log(data);
                },
                confirm(){
                    ret = window.confirm("您确认要跳转到站外吗？");
                    console.log(ret);
                    if(ret){
                        // 获取ref绑定的元素
                        console.log(this.$refs.link.href);
                        location.assign(this.$refs.link.href);
                    }
                }
            }
        });
    </script>
</body>
</html>

　　

 

posted @ 2021-10-01 21:05  映辉  阅读(94)  评论(0)    收藏  举报