Vuejs的V-on和v-bind指令示例|速记语法

286 阅读1分钟

在这个简短的教程中,你将通过实例了解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>