美文网首页
vue学习笔记(二)属性绑定,鼠标事件,事件修饰符,按键修饰符

vue学习笔记(二)属性绑定,鼠标事件,事件修饰符,按键修饰符

作者: 帝王弦 | 来源:发表于2019-04-14 14:06 被阅读0次

    vue中属性绑定

    <a :href="url">属性绑定</a>
    
    在标签属性名前加 : 进行属性数据绑定 a标签href属性成功绑定url数据

    vue中事件绑定

    <button @click="addfn">事件绑定-{{add}}</button>
    
    data() {
            return {
                add:1
            }
        },
        methods: {
            addfn:function(){
                this.add++
            }
    
     },
    

    在标签方法名前加 @ 进行事件绑定![a标签click成功绑定add方法]

    事件修饰符

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    

    按键修饰

    点击此处进行查看了解

    相关文章

      网友评论

          本文标题:vue学习笔记(二)属性绑定,鼠标事件,事件修饰符,按键修饰符

          本文链接:https://www.haomeiwen.com/subject/yvdxwqtx.html