在这个简短的教程中,你将通过实例了解v-on和v-bin指令和速记语法。
v-on指令
vuejs中的v-on指令可以为html模板添加动态行为。
v-on vuejs指令是一个用于监听javascript本地事件的绑定事件处理器。
这将作为一个额外的参数添加到html标签中,如下图所示
语法
<htmltag v-on:Events:modifier="Eventhandler" ></htmltag>
<htmltag @:Events:modifier="Eventhandler" ></htmltag>
事件是指点击事件,例如点击按钮或输入键盘事件。
修改器是事件修改器,用于防止不重新加载页面,例如v-on:submit.prevent是一个用于按钮提交的事件处理修改器。
例子
这是处理事件和处理程序的全长语法
根据文档,按钮点击处理程序可以用不同的语法来处理
v:on click handler按钮的声明方式如下
同样也可以用@语法事件来缩短。
两者的处理功能都是一样的,只是语法上有变化而已
@click和v-on:click指令之间的区别
- 两者的作用是一样的
- 语法上的用法不同
两者都做同样的事情,@click是v-on:click指令的一个简称。
vuejs中的v-bind指令用于绑定标签属性的语法
<htmltag v-bind:attribute="" ></htmltag>
<htmltag :attribute=""></htmltag>
在html元素中添加了v-bind属性。例如,用长的语法将Anchor与href属性绑定。
<a v-bind:href={{this.url}}></a>
同样可以用速记语法进行修饰
<a :href={{this.url}}></a>