vuejs之路之--事件绑定

Vue.co

vuejs中的事件绑定，使用v-on:事件名 = 函数名来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法；

如果定义的函数有参数，那么你可以像原生js那样把参数携带进来就可以了在，注意引号；如下所示：

<button v-on:click= "clickFun">点我有变化</button>//click事件名，clickFun是在methods中定义的方法；

Vuejs还为我们定义了一些修饰符；通过由点(.)表示的指令后缀来调用修饰符；修饰符可以串联（理解）

.stop:阻止事件冒泡，你懂的；

.prevent:阻止默认事件的发生，一般用在表单的提交上；

.capture:添加时间监听器时使用事件捕获模式；

.self：只有当事件发生在自己（不包括子元素上的时候才会触发）；

.once：事件只会执行一次（可以用在自定义组件上）

事实上，一般而言，事件可以大致分为键盘事件和鼠标事件，说完了鼠标事件，咱们来说说键盘事件：

在Vue中键盘事件一般是可以这样用，如下所示：

<!-- enter事件 --><button v-on:keyup.enter= "keyf">点我有变化</button><!-- tab事件 --><button v-on:keyup.tab= "keyf1">点我有变化</button><!-- 7,8事件, --><button v-on:keyup.ass= "keyf">点我有变化</button>

总结来看呢，是v-on:keyup.按键别名（键值修饰符）= 回调函数，按键盘别名官网自带的有.enter,.tab,.delete (捕获 “删除” 和 “退格” 键),.esc,.space,.up,.down,.left,.right，都很容易理解，上面的第三个例子ass是自定义的按键别名，自定义的方法可以像这样：

Vue.config.keyCodes.ass = [55,56]//当自定义键值修饰符的时候,如果值是一个数组,那么说明你按数组中任意一个元素所对应的键的时候都会触发事件Vue.config.keyCodes = {"media-play-pause": 67,//当你自定义键盘事件的时候,如果出现多单词,就应该用"-"链接起来，修饰符还要用“”引起来"we-are":86}

到现在为止，我们所见到的键盘事件都是一些单键（按一个键），如果按多个键才触发事件该怎么办呢，方法也是有的，这里就涉及到了修饰键；

常见的修饰键如下：.ctrl,.alt,.shift,.meta，其用法可以像这样：

<!-- alt+c --><input @keyup.alt.67="keyf" value="世家" type="button"><!-- alt+click --><input @click.alt="keyf" value="世家" type="button">