vuejs之路之--事件绑定
vuejs中的事件绑定,使用v-on:事件名 = 函数名来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法;如果定义的函数有参数,那么你可以像原生js那样把参数携带进来就可以了在,注意引号;如下所示:点我有变化//click事件名,clickFun是在methods中定义的方法;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">
更多推荐
已为社区贡献8条内容
所有评论(0)