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">









Logo

前往低代码交流专区

更多推荐