Vue.jsでinputタグを用いた入力文字の字数カウント

① v-onディレクティブの利用

v-onディレクティブを用いることで、イベント発火時の JavaScript の実行が可能になります。
例えば

//v-on:イベント="関数"
<button v-on:click="hello()">ハローボタン</button>

と記述すると、ボタンクリック時にhello関数が実行される。

②イベントにkeyupイベントを記述する

keyupイベントはkeyが離されたタイミングで発火するイベントです。
→テキストに文字が打たれてキーが離れたタイミングでイベントを発火させるのに利用します。

<input @keyup="hello()"></input>

※@は「v-on:」の代わりに使えるものです
　keyupイベントによく似たものにkeydownイベントがあります。そのイベントはkeyが押されたタイミングで
　イベントが発火します。

③文字数をカウントし、表示する関数を作成する

実際に文字数をカウントし、表示する関数を「countWord」という名前で作成してみましょう。

//関数の書き方はvue.jsのmethod内の書き方で記述しています
1  countWord:function(){
2      const inputElement = document.getElementById("word");//inputの要素を取得する
3      console.log(inputElement.value.length);//入力されている文字数を表示する
4    }

④inputタグと先ほどの関数を合わせる

HTML側
<input id="word" @keyup="countWord()"></input>

vue側
1　countWord:function(){
2      const inputElement = document.getElementById("word");//inputの要素を取得する
3      console.log(inputElement.value.length);//入力されている文字数を表示する
4    }