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