- web design -

blog

こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第3回：ディレクティブ / メソッド］

JavaScript

posted : 2018.10.16

vue_article3

 

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

こまのんVue（※こま（けぇこたぁいいんだよ）のん（びり）Vue（.js超入門））第3回。

 

第1回、2回ではちっとも楽しさを感じられなかったVue.js。

今回、もしかするとそんなあなた（そしてぼく）のアンテナがピクリと反応するかもしれません。

 

ディレクティブによるデータバインディングとメソッド

後述しますがディレクティブというのはHTML中に出てくるv-○○の部分のこと。

vueでアレコレするためにHTML側から出すサインのようなものです。

イメージの湧きにくい横文字かもしれませんがただそれだけのことなんで、まずはソースを見ていきましょう。

Resultもいじって見て下さい。

 

 

やっていること

  1. ボタンクリックでイベントを発生させる
  2. そのイベントでテキストを「ごちそうさまでした」に変更
  3. そのイベントでボタンテキストを「済」に変更
  4. そのイベントでテキスト色変更（CSS適用）
  5. そのイベント後にボタンを押せなくする（disabled属性付与）

ざっくり言うとクリックイベントを発生させます。

更にそのイベント内容①～④を各種実装していきます。

 

①イベントを発生させる

HTML（抜粋）

<button v-on:click="eated(index)"></button>

JS（抜粋）

var vueTest = new Vue({
  el : "#vueTest",
  data : {
    //割愛
  },
  methods : {
    eated : function(index){
      //ここに処理
    }
  }
})

関係のない所を割愛して見るとわかりやすくなりました。

要は、

  • HTML側でクリックイベントを起こしたい要素に v-on:click=”メソッド名”を付与。
  • JS側で「methods」というVue.jsのオプションプロパティを指定。その中の関数で好きなイベント処理を書く。

ということ。「eated」は任意のイベント名ですが「methods」はVue.jsのオプションプロパティなので固定です（el / dataも同様）。

今回のイベントではHTML側の繰り返し描画時に使う変数indexを関数の引数に取らせてイベントを各々発生させています。

 

他イベントもあり〼

イベント種類はクリックイベント以外にも各種揃ってるようなのでその都度調べたらいいと思います。

［ 参考 ］
Vue.js v2 イベントハンドラ一覧

 

②③テキスト内容を変更する

HTML（抜粋）

<span>{{item.food}}</span>
<button>{{item.btnText}}</button>

※{{●●●}}部分の説明は連載第1回記事を参照。

 

JS（抜粋）

eated : function(index){
  this.foods[index].food = "ごちそうさまでした";
  this.foods[index].btnText = "済";
}

ここからイベントによって何をどうするか、を書いてくわけですがポイントはthis。

 

thisはVueインスタンスを指す

こまけぇことは置いといて、ここのthisが参照しているのはVueインスタンス、すなわち上記サンプルではnew Vueで作成したvueTestを指します。

勘のいい方はここであれ？っとなるかもしれません。

だったら値の指定はthis.data.foods～とかになるんじゃないの？と。

これは、まあ、もうそういうもんなんです。仕様です。諦めてdataとかは省いちゃってください。まあ省いた方が楽だし（適当）

ざっくりいうと、Vue.jsのオプションであるdataさんやmethodsさんたちは配下のプロパティをVueインスタンス自体のプロパティにしたてあげてくれる職人さん達だそうです。

関数の引数で繰り返し描画のindex値を受け取り、個々のデータにアクセス

今回はdataにリスト各々のデータをオブジェクト単位で格納しています。

以下のように、繰り返し描画したアイテム個々でイベントを発生する場合は（よほどシンプルなイベント内容ではない限り）オブジェクト単位でそれぞれデータを格納します。その方が操作もしやすくていい感じ（たぶん）。

 

JS（抜粋）

 data : {
　foods : [
　　//リストそれぞれの内容・状態をオブジェクト単位で格納
　　{food : "麺珍亭の油そば", btnText : "完食", isEated : false, pushed : false},
　　{food : "武蔵屋のラーメン", btnText : "完食", isEated : false, pushed : false},
　　...
　],
},

その上でmethods内で this.foods[index].food = “ごちそうさまでした”; のように各オブジェクトの値にアクセス、変更後の値を代入します。

 

④⑤テキストにCSSを適用、ボタンにdisabled属性を付加

HTML（抜粋）

<span v-bind:class="{ eated : item.isEated }">{{item.food}}</span>
<button v-on:click="eated(index)" v-bind:disabled="item.pushed" >{{item.btnText}}</button>

JS（抜粋）

 //data
foods : [
　{food : "麺珍亭の油そば", btnText : "完食", isEated : false, pushed : false},
],
//methods
eated : function(index){
　this.foods[index].isEated = true;
　this.foods[index].pushed = true;
}

ディレクティブ

HTML中にv-○○という書き方をすることで様々な要素の属性などとVueインスタンス（new Vue({})の中のデータ）を紐づける（バインディングする）ことができます。

サンプルでいうと、

v-bind:class="{ eated : item.isEated }"

の部分ですね。

これは要するに、isEatedがtrueになったら”eated”というクラスを付けますよ、ということ。

こんな感じでVue.js氏はクラス名や属性など、様々な値を動的に切り替えてくれるのです。

 

クラスをバインディングする場合はオブジェクト形式で記述して切替が可能です。

v-bind:class="{ クラス名 : JS式（data内プロパティの真偽値） }"

クラス名に続く値にはJavascript式が入ります。

基本的に、バインディングしたディレクティブの値では比較演算子や三項演算子を使用した式が使えると覚えとくといいかと。

 

値が真（true）となればバインドしたクラスや属性が付与され、偽（false）となれば付与されないというわけです。

 

なので上記がもし eated : !item.isEated であればisEatedがfalseになったら”eated”というクラスを付けますよ、という意味になるのです。

v-bind:disabled="item.pushed"

さらに、↑のようにbutton要素にバインディングした属性（”disabled”）はもっとシンプルに考えられます。

pushedというdataがtrueになったら”disabled”属性を付与しますよ、ということですね。

 

基本的なところであればサンプルを見ただけで直感的にわかるのがVue.jsのイイところみたい。

 

第3回感想

ここまで来てようやく、おっ！おもろいかも！と思えた気がします（僕は）。

「ああいう実装はVueだとこう実装できるかな～」なんてイメージもなんとなーく湧き始めました。

 

今回はタイトルに反して色々余計なことも書いちゃったかもしれませんが、ある程度の範囲までは説明を読むよりもソースを眺めていじって見た方が理解がはやいと思うので、先ずはいろんなサイトのサンプルを眺めるのも良いと思いますよ！

 

What's new?

- the latest post -

Awwwards Honorable Mention

blog

posted on

Awwwardsでサイト「HOPPY DAYS」が入賞しました

 check