34-尚硅谷-尚医通-前端知识点-Vue-绑定事件

各位同学大家好，咱们继续来学习vuee中的基本语法，刚才呢，我们演示了单向绑定和双向绑定两个指令，那下面呢，给大家来演示在voe中如何来绑定一个事件。事件这个词各位同学应该不陌生，咱们在学javau的时候应该学过这个东西，比如说在Java中有我们的鼠标单击事件，有双击事件，有改变事件等等不同的事件，而现在在VE中，咱也可以对我们的标签绑定事件，然后进行相应操作。那怎么做给各位写一下，就是我们的做法，其实很简单，你在标签上面写一个叫V杠二冒号，加上你的事件的名称就可以了，然后在里边等于你要调用那个方法。这是关于事件的绑定方式，各位把它记住，这里边用到一个叫V杠二加上实验名称，而这个呢，还有一个简写的方式，怎么简写，咱们接来一个艾特，加上你的事件的名称，也可以达到相同的效果，那我下面给大家就演示一下在VE中如何来绑定一个事件，咱们看它的具体效果是什么样的，那我们来做操作。

首先在里边我再重新复制一个新的这么一个页面，我们再做复制。比如把这个复制一个新的，然后咱们起名就是这个零次，我们叫绑定世界，或者说世界绑定。然后把这个页面创建之后，在里边我们写一下相关的代码。我们怎么写呢？首先第一个呢，在这里边呢，我们先加上一个按钮，按钮呢你可以写input type等于T，或者说写一个button吞都可以，那我现在就来一个button，然后我们的按钮，比如说我们就写这个按钮，我们就叫做。

事件。然后洗完之后在按钮里边呢，咱们可以加上一个事件，怎么做呢，就是刚才我说到的。V杠二加上你事件我们叫C考，等于你要调的方法就可以了，然后这个调的方法咱可以在这VE中可以做个定义，怎么定义给各位说一下，我们加上一个属性，名字是固定的，叫做methods。冒号，大括号，然后在里边呢，加上你要调用的方法名称和你的内容，比如说我们写个方法做这个受显示，然后在里边写上你的具体内容，加咱们现在就来一个console.log，我就做个输出，就写这个受。所以这样的话呢，我们现在就完成了一个方法定义，这各位记住，在voe中我们加个methods大括号里面加上你的方法名称和值，而这里边它有多个方法，那多个方法咱就加个逗号，咱再加上你的不同方法，咱目前以一个为例，然后写完之后，咱们在这可学课里边把方法给他拿过来做个调用就可以了。

这就是关于如何来在VE中绑定事件，那咱们来看一下效果什么样的，现在我打开大家看，在我这里边呢，就是咱们目前。这里边有我们这个按钮叫事件绑定，而我现在先把F12打开，打开之后当我点击事件绑定，大家看受是不是输出了，证明咱这事件是不是生效了，我一点就做输出，所以现在我们用这个V-on click就完成了一个事件绑定，各位把这个给他记住。然后这个写法刚才提到它还有一个简写的方式，给各位也写一下，那简写怎么做，不需要加这个，咱直接加个艾特，加上你的事件名称就可以了，比如说我这个是一，这个是二，然后咱们再看一下效果，现在你看啊，我点一执行了，点二是不是也执行了，所以这个效果应该都是正确的。

这样的话，咱们现在就完成了，在voe中如何来绑定事件，就是我们的这个写法。我现在给大家就演示完成了，那你把这个记住，因为咱们在后面的项目中，事件绑定我们肯定会用到，而事件这里边的具体事件跟我们的扎中是类似的，它里边有clickli，鼠标单击还有一个叫这制事件。还有一个叫submit事件等等，跟我们的扎组中都是类似的，所以这个给各位就演示完成了。