【vue.js入門 #2】初心者プログラマーでもveu.jsが理解できるようになる3つのポイント

前回、vue.js入門の基本中の基本である、インスタンスを作成してテキストを表示させるという内容でした。

しかし、初心者プログラマーの方は、これだけだとまだよくわからないという人も多いと思います。

こんなことできてなんの意味があるの？

どこで活用するんだ？

こんな疑問も湧いてくるかと思います。

そこで、今回はvue.js入門の中でも、よりプログラミング的な処理の書き方について解説していきます。

そして、vue.jsの理解を深め、初心者プログラマーから脱却するためのる3つのポイントを解説していきたいと思います。

ディレクティブ
算出ポロパティ
メソッド

この3つはvue.jsをやっていく上では欠かせない土台となる知識です。

ディレクティブとは？
算出プロパティを処理を見やすくする
1. 算出プロパティを使った書き方
算出プロパティとメソッド

ディレクティブとは？

{{…}}の構文で与えられた値を埋め込むのは基本の手法なので、できることが限られてしまいます。

あくまでも、テキストを操作するだけなのです。

htmlタグの属性や、スタイルを操作することが出くなくて、条件分岐や繰り返しのループ処理をする場合はディレクティブという記述を行います。

v-○○で様々なディレクティブの機能が集約されているので、ディレクティブこそvue.jsそのものといっても良いのではないでしょうか。

では、試しにリンクを操作するコードを書いてみます。

ここでは、データを埋め込む（バインドする）v-bindを利用してみます。

v-bindでデータを埋め込む

html

<div id="app">
   <a v-bind:href="url">ここのリンクが設定されます。</a>
</div>

var app = new Vue({
   el: '#app',
   data: {
       url: 'http://liberty-dock.com'
   }
})

id=”app”の中にあるv-bind:href:urlが、jsのdataオブジェクトにあるurlを利用して、hrefを設定されるというコードです。

v-bindは省略できる

v-bindはディレクティブの中でも非常によく使うので、コロン（:）だけに省略することもできます。

html

<div id="app">
   <a :href="url">ここのリンクが設定されます。</a>
</div>

ブール属性の操作

htmlタグにはブール属性を利用するものがいくつかあります。

formに使われるinputタグ系ですね。

checked
selected
disabled

などなど。

ブール属性を使ったコードを書いてみます。

html

<div id="app">
   <input type="text" :disabled="flag" placeholder="入力できないinputタグ">
</div>

var app = new Vue({
   el: '#app',
   data: {
       flag: true
   }
})

inputタグのdisabledををv-bindでtrueにして入力を無効化しています。

算出プロパティを処理を見やすくする

算出プロパティを使わない悪い例を紹介します。

new Date()で日付を取得して、形式を○年○日○日にするコードを書いてみます。

html

<div id="app">
   <p>{{today.getFullYear() + '年' + today.getMonth()  + '月' + today.getDate() + '日'}}</p>
</div>

var app = new Vue({
   el: '#app',
   data: {
       today: new Date()
   }
})

構文的には正しいので、今日の日付が年月日に変換されています。

しかし、見た目を表すテンプレートとなっているhtmlに、プログラミングの処理を書いてしまうと、読みにくくなってしまいます。

なので、このような書き方をするのではなく、算出プロパティを使うのがvue.jsの正しい書き方なのです。

算出プロパティを使った書き方

html

<div id="app">
   <p>{{date_format}}</p>
</div>

var app = new Vue({
   el: '#app',
   data: {
       today: new Date()
   },
   computed: {
       date_format: function() {
           return this.today.getFullYear() + '年' + this.today.getMonth()  + '月' + this.today.getDate() + '日'
       }
   }
})

日付の表示形式を○年○月○日にフォーマットさせる処理をdate_formatの算出プロパティにまとめています。

算出プロパティでは、「this.プロパティ名」でデータオブジェクトにアクセスできます。

そして、作成した算出プロパティはhtmlの側で{{プロパティ名}}とするだけです。

算出プロパティとメソッド

メソッドとは、算出プロパティとほぼ同じです。

コードの書き方はこのように変わります。

html

<div id="app">
   <p>{{date_format()}}</p>
</div>

var app = new Vue({
   el: '#app',
   data: {
       today: new Date()
   },
   methods: {
       date_format: function() {
           return this.today.getFullYear() + '年' + this.today.getMonth()  + '月' + this.today.getDate() + '日'
       }
   }
})

ほぼ同じですよね。

ぶっちゃけ、算出プロパティでできることは全てメソッドできてしまいます。

しかし、若干違うところもあり、具体的な違いはこの3つ。