vue学习经验总结（事件修饰符）

不念不忘少年蓝@ 2022-11-28 13:49 197阅读 0赞

## 1.常见事件修饰符 ##

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat">

<form v-on:submit.prevent></form>

1.0.16 添加了两个额外的修饰符：

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

## 2.数据绑定 ##

`v-bind`    数据的单线绑定
    `v-modle`  数据的双向绑定，用于表单中（input,radio,text,address,email,select,checkbox,textarea等）

## 3.通过动态给元素class名来改变样式 ##

方法一：数组带对象

<p :class=“【class1,class2,{'class3':flag}】”></p>

方法二：单纯的对象

<p :class=“{class1:true,class2:false}”></p>

方法三：三元判断

<p :class=“【class1？‘active’," "】”></p>

方法四：对象升级

<p :class=“classobj”></p>
     data(){
     return{
        classobj:{class1:true,class2:false}
    }

## 4.通过style来实现来实现样式的修改 ##

<p :class=“styleobj”></p>
     data(){
     return{
        styleobj:{color:red}
    }

## 5.按键修饰符： ##

监听pc键盘上的值

<input @keyup.enter='方法名'></input>

自定义全局按键修饰符  
`Vue.config.keyCodes.f2=113,`就可使用了

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

全部的按键别名：

enter
    tab
    delete
    esc
    space
    up
    down
    left
    right

## 6.使用ref获取dom元素 ##

<h3  id='myh3' ref='myh3'> </h3>
     methods:{
       getElement(){
         console.log( this.$refs.myh3.innerText)
      } 
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue框架学习笔记——事件修饰符

文章目录前文提要事件修饰符 prevent（常用） stop（不常用）事件冒泡 stop使用方法三

叁歲伎倆/ 2024年02月17日 10:24/ 0 赞/ 47 阅读

相关 Vue 事件修饰符

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实

心已赠人/ 2022年12月22日 09:20/ 0 赞/ 227 阅读

相关 vue修饰符（事件修饰符，表单元素修饰符，按键修饰符）

注意修饰符可连缀事件修饰符 @事件名.修饰符=“” .prevent 拦截默认事件 .stop 拦截冒泡事件 .capture 改变事件执行顺序 .se

绝地灬酷狼/ 2022年11月29日 11:26/ 0 赞/ 213 阅读

相关 vue学习经验总结（事件修饰符）

1.常见事件修饰符 <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubm

不念不忘少年蓝@/ 2022年11月28日 13:49/ 0 赞/ 198 阅读

相关 Vue 学习笔记 02：事件修饰符

\事件修饰符 Vue 为 `v-on` / `@` 绑定事件提供了修饰符，通过 `.` 来调用修饰符 `.stop` 阻止事件冒泡，调用 `event.

电玩女神/ 2022年05月26日 12:37/ 0 赞/ 240 阅读

相关黑马学习记录--vue 事件修饰符详解

转载：[https://blog.csdn.net/bk\_yzw/article/details/78795182][https_blog.csdn.net_bk_yzw_a

约定不等于承诺〃/ 2022年03月20日 12:09/ 0 赞/ 284 阅读

相关 Vue修饰符（事件修饰符、按键修饰符...）

基本页面 1. 修饰符修饰符是由点开头的指令后缀来表示的 2. 下载vue.js并引入 3. 初始化vue实例 <!DOCTYPE html

秒速五厘米/ 2022年03月18日 08:38/ 0 赞/ 416 阅读

相关 vue 事件修饰符

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

朱雀/ 2022年02月21日 08:55/ 0 赞/ 320 阅读

相关 Vue学习之事件修饰符

Vue事件修饰符事件修饰符概览修饰符 | 说明 -------- | -------

- 日理万妓/ 2021年12月03日 05:37/ 0 赞/ 405 阅读

相关 vue基础事件＼按键修饰符

事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropaga

灰太狼/ 2021年10月09日 03:32/ 0 赞/ 374 阅读