Vue--事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

例子

 1   <head>
 2     <title>Vue监听事件</title>
 3     <script src="vue.js"></script>
 4   </head>
 5   <body>
 6    <div id="app">
 7       <button v-on:click="counter+=1">add 1</button>
 8       <p>你一共点击了 {{counter}} 次</p>
 9    </div>
10    <script>
11      new Vue({
12        el:"#app",
13        data:{
14          counter:0
15        }
16      })
17    </script>
18   </body>
19 </html>

浏览器打开如下：

每点击一次按扭数字就会加1

事件处理方法：

但这种情况不适合逻辑很复杂的时候,当逻辑很复杂时我们用v-on接收一个需要调用的方法名称

如下:

 1 <html>
 2   <head>
 3     <title>Vue事件处理方法</title>
 4     <script src="vue.js"></script>
 5   </head>
 6   <body>
 7    <div id="app">
 8      <button v-on:click="greet">greet</button>
 9    </div>
10    <script>
11      new Vue({
12        el:"#app",
13        data:{
14          name:"Vue.js"
15        },
16        methods:{
17          greet:function(){
18             alert("Hello " + this.name + "!");
19          }
20        }
21      })
22    </script>
23   </body>
24 </html>

浏览器打开显示：

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

 1 <html>
 2 <head>
 3 <title>Vue内联处理器的方法</title>
 4 <script src="vue.js"></script>
 5 </head>
 6 <body>
 7 <div id="app">
 8 <button v-on:click="greet('小明')">say 小明</button>
 9 <button v-on:click="greet('小红')">say 小红</button>
10 </div>
11 <script>
12 new Vue({
13 el:"#app",
14 methods:{
15 greet:function(name){
16 alert("Hello" + name);
17 }
18 }
19 })
20 </script>
21 </body>
22 </html>

事件修饰符：

我们来看一个例子

1 <div id="app">
2   <form action="form.php" method="POST">
3      <label>用户名</label>
4      <input type="text" placeholder="请输入用户名" v-model="name"><br><br>
5      <label>密 码 </label>
6      <input type="password" placeholder="请输入密码" v-model="password"><br><br>
7      <input type="submit" value="提交" @click="submit">
8   </form>
9 </div>

 1 new Vue({
 2   el:"#app",
 3   data:{
 4     name:"",
 5     password:""
 6   },
 7   methods:{
 8      submit:function() {
 9         if (this.name === "" || this.password === "") {
10            
11            alert("必填项不得为空!");
12         
13         } 
14      
15       
16      }
17   }
18 })

我们希望在提交表单之前做下校验,检测输入框是否输入了值,如果没输入提醒用户输入,页面不进行跳转,我们遇到一个问题现在是提醒了但它还是回跳转,这是因为点击submit会自动提交form

我们可以用JavaScript去阻止它

 1 new Vue({
 2   el:"#app",
 3   data:{
 4     name:"",
 5     password:""
 6   },
 7   methods:{
 8      submit:function(event) {
 9         if (this.name === "" || this.password === "") {
10            event.preventDefault(); // 阻止默认事件
11            alert("必填项不得为空!");
12         
13         } 
14      
15       
16      }
17   }
18 })

这样我们就解决了这个问题。

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once

1 <input type="submit" value="提交" @click.prevent="submit">

js也不去处理 DOM 事件细节。很轻松的就可以解决问题。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

还有一个重要的事件对象的例子:

 1 <html>
 2   <head>
 3     <title>Vue事件对象</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6     </style>
 7   </head>
 8   <body>
 9    <div id="example"> 
10      <button @click="doSomething($event)">按扭</button>
11    </div>
12    <script>
13      new Vue({
14        el:"#example",
15        methods:{
16           doSomething(event){
17              alert(event.target.tagName);
18           }
19        }
20      })
21 
22    </script>
23   </body>
24 </html>

$event就是指向的原生js对象

顺便也解决了以下的问题

 1 <html>
 2   <head>
 3     <title>Vue事件对象</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6     </style>
 7   </head>
 8   <body>
 9    <div id="example"> 
10      <button @click="doSomething(msg,$event)">按扭</button>
11    </div>
12    <script>
13      new Vue({
14        el:"#example",
15        data:{
16           msg:"Hello"
17        },
18        methods:{
19           doSomething(msg,event){
20              alert(this.msg + " " +  event.target.tagName);
21           }
22        }
23      })
24    </script>
25   </body>
26 </html>