Vue.js  v-on 呼び出しの際関数に「()」を入れるか入れないかの違いについての考察  

#「v-on:click=onlcick」 or 「v-on:click=onlcick()」 ってどう使い分ける？

今回はこの件について

以下のコードで検証

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Vueの練習</h1>
    <div id="app">
    <p>{{test}}</p>
    <button v-on:click='func'>クリック</button>
    <!--<button v-on:click='func()'>クリック</button>
    ()があってもなくてもscriptタグは以下の記述で動いている。。 -->
    <!--<button v-on:click='test="くりっくされた">クリック</button>-->
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
    el:'#app',
    data:{
        test:'',
         }, 
     methods:{
            func:function(){
              this.test='くりっくされた'
            }![スクリーンショット 2020-07-19 16.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/3ec25962-1b1e-550b-fd64-9e1dedd88623.png)
![スクリーンショット 2020-07-19 16.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/6e1f330b-06d8-5237-d8cd-8b5907eab2f2.png)

        }
});



    
</script>
</body>
</html>
```


##ポイント
v-onclickで関数を呼び出す書き方は３通り

①上記のように「v-on:click」でscriptないの関数を呼び出す。
②上記コメント部分のように「v-on:click()」で関数を呼び出す。
③ <button v-on:click="test = 'くりっくされた'" >クリック</button>
 と直接タグに関数を書く

今回の実行結果は
![スクリーンショット 2020-07-19 16.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/7f82f774-1ab4-8723-7cab-9a14fcc006cd.png)

ボタンを押すと
![スクリーンショット 2020-07-19 16.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/00288011-230b-6593-a1b9-68cd909add18.png)

くりっくされた
と表示する関数が実行される。

##結論は
①でも②でも実行される。
　①は関数のメソッド野名前を指定している
　②はメソッドの呼び出しの式を記入している。

この使い分けについての理解がこのサンプルコードでは読み解けなかった。
ここについての理解も深めたい。

2020/7/19

#v-on:click="func()"  の考え方（解決）

（）をつけると引数を与えることが可能になる。
サンプルコード

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Vueの練習 65-</h1>
    <div id="app">
        <button v-on:click="func('ようこそ',$event)">クリック</button>
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
    el:'#app',
    data:{

    },
    methods:{
        func:function(e,a){
            console.log(e,a)
        }
    }
});

</script>
</body>
</html>
```

結果
![スクリーンショット 2020-07-19 18.16.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/c806f3d3-928b-7695-dcbd-ce2cc67d08e4.png)

クリックすると、、、
![スクリーンショット 2020-07-19 18.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/95d49110-c69f-9f7d-3776-2956654137c8.png)
コンソールに第一引数の「ようこそ」と第二引数の引数aのイベントデータが取得され表示される。

上記コードでfuncの第二引数に**「$event」**とあるが、これは**Vue.jsで決められた「イベントオブジェクトを取得するための名前」**

**ちなみに引数を一つにした場合はmethods内のfunction(){}の引数は「v-on:click="func('ようこそ')"」としていた場合、クリックイベントのデータではなく、「ようこそ」を取得しコンソールに表示する。**


以下はその例

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Vueの練習 65-2</h1>
    <div id="app">
        <button v-on:click="func('ようこそ')">クリック</button>
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
    el:'#app',
    data:{

    },
    methods:{
        func:function(e){
            console.log(e)
        }
    }
});
  
</script>
</body>
</html>
```

結果
<img width="1431" alt="スクリーンショット 2020-07-19 18.22.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/0a87a78e-b838-f4f2-f5c1-4482bec0926f.png">

クリックすると

<img width="1426" alt="スクリーンショット 2020-07-19 18.22.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/a0f2e9d4-28f2-e527-7e23-8887af2fb11d.png">

ようこそがコンソールに表示される
**→イベントデータではなく、ようこそが優先される点が、今回のポイント**

このように（）を使うことが出来る。
2020/7/19-2