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