vue常用事件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 1             <!-- 方法处理器 -->
 2             <button v-on:click="doThis"></button>
 3             <!-- 内联语句 -->
 4             <button v-on:click="doThat('hello', $event)"></button>
 5             <!-- 缩写 -->
 6             <button @click="doThis"></button>
 7             <!-- stop停止冒泡 -->
 8             <button @click.stop="doThis"></button>
 9             <!-- 阻止默认行为.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
10             <button @click.prevent="doThis"></button>
11             <!-- 阻止默认行为，没有表达式 -->
12             <form @submit.prevent></form>
13             <!--  串联修饰符 -->
14             <button @click.stop.prevent="doThis"></button>
15             <!-- 键修饰符，键别名 -->
16             <input @keyup.enter="onEnter">
17             <!-- 键修饰符，键代码 -->
18             <input @keyup.13="onEnter">
19 
20             <!-- 阻止单击事件冒泡 -->
21             <a v-on:click.stop="doThis"></a>
22             <!-- 提交事件不再重载页面 -->
23             <form v-on:submit.prevent="onSubmit"></form>
24             <!-- 修饰符可以串联  -->
25             <a v-on:click.stop.prevent="doThat"></a>       v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
26             <!-- 只有修饰符 -->
27             <form v-on:submit.prevent></form>
28             <!-- 添加事件侦听器时使用事件捕获模式 -->
29             <div v-on:click.capture="doThis">...</div>
30             <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
31             <div v-on:click.self="doThat">...</div>
32             <!--只触发一次-->
33             vue2.1新增，也有 v-once
34             <a v-on:click.once="doThis"></a>      @click.native  可以在 router-link 中使用原生事件
35         全部的按键别名：
36             @keyup.enter=""
37             .tab
38             .delete (捕获 “删除” 和 “退格” 键)
39             .esc
40             .space
41             .up
42             .down
43             .left
44             .right
45 
46             2.1.0 新增
47             .ctrl
48             .alt
49             .shift
50             .meta

 1 多个class绑定[]，类似jq.addclass
 2 <div id="app" class="bor" :class="[colr,bgo]">
 3 v-model.lazy离开焦点生效
 4 v-model.trim去首尾空格
 5 
 6 使用v-if/else会影响内部数据,需要v-model:key标识，:key相同的文本一起单独渲染
 7   <div v-if="name == 'yuge'">
 8     用户名：<input :key="1" type="text">
 9   </div>
10   <div v-else>
11     密码：<input :key="2" type="text">
12   </div>
13   <input type="text" v-model="name">
14   data () {return {name:'yuge'}}
15    tip:输入yuge或其他切换用户名、密码,key分开渲染
16 
17 $set/Vue.set动态生成数据的控制
18 
19 directives自定义指令对DOM元素进行底层操作：https://cn.vuejs.org/v2/guide/custom-directive.html   获取dom用ref
20 
21 钩子直译hook，事件劫持机制，比事件执行更早。

1 beforeRouteEnter(to,from,next){
2 //在渲染组件的对应路由被confirm前调用，不能获取组件实例this，钩子未执行，组件实例也未被创建
3 }
4 beforeRouteLeave(to,from,next){
5 //导航离开该组件的对应路由时用，可用this
6 }

v-model.lazy 只有在input输入框发生blur事件时才触发
v-model.trim 去除首尾空格
v-model.number 输入的字符串转换成number

以上是 vue常用事件 的全部内容， 来源链接： utcz.com/z/376233.html

回到顶部