Vue方法与事件(简单讲解)

Vue方法与事件

  下面这段定义讲解,我只是敲了大概的实现,对定义不是很了解

        1. @click方法名可以不加(),默认会将原生事件对象 event 传入。
        2..Vue 提供了一个特殊变量$event,用于访问原生 DOM 事件
        3.使用的preventDefault()也可以用 Vue 事件的修饰符来实现,在@绑定的事件后加 小圆点“.”,再跟一个后缀来使用修饰符

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <button v-on:click="clickFunc(10)">点击+10:{{count}}button>
        <br>
        百度a>
        <br>
        搜狗a>

        360a>
        

    div>
    <script src="vue.js">

    script>
    <script>
           var app = new Vue({
               el:"#app",
               data:{
                   count:0
               },
               methods:{
                  clickFunc:function(count){
                      this.count = this.count + count;
                      
                  },
                  clickStopFunc:function(event){
                    // 默认会将原生事件对象 event 传入
                    console.log(event);
                    event.preventDefault();
                    alert('阻止a连接打开');
                    // Vue 提供了一个特殊变量$event,用于访问原生 DOM 事件
                      
                  },
                  stopFunc:function(event){
                    // 默认会将原生事件对象 event 传入
                    console.log(event);

                    alert('阻止a连接打开');
                    // Vue 提供了一个特殊变量$event,用于访问原生 DOM 事件
                      
                  }
               }

           })
    script>
body>
html>

  展示效果:
Vue方法与事件(简单讲解)_第1张图片

你可能感兴趣的:(vue)