Vue

Vue.js methods, computed and filters

クラスとインスタンス

Vueの基本はクラスとインスタンス。Pythonのプログラムでもやったように、まずはVueクラスをインスタンス化する。

new Vue ({
}); // ; を忘れない

オプション

インスタンスを作って設定していくのがオプション。

elオプションはDOMツリーの頂点となるルート要素(単語の意味はまだよく分かっていない)。指定したIDやClassにプログラムを適用させる。

new Vue ({
    el: "#app1",  // これはelオプション
    data : { // これはdataオプション
        message1: "Hello! Vue!" ,  // プロパティ:値の形式
        list: [1,2,3] // 最後のプロパティの末尾はカンマ不要
    }
}):

new Vue ({
// 複数インスタンスを作っても大丈夫
});

HTML側への展開

最も基本となるのは、ムスタッシュな利用。参照したいプロパティの値を出力することができる。

<div id="app1">
{{ message1 }} <br>
{{ list[0] }}
</div>

Javascriptの式を使うこともできる。

See the Pen use js in HTML by git-cat-meow (@git-cat-meow) on CodePen.

.get~はjsのもの。dataプロパティで設定した現在時刻dateから年月日を取得している。getMonth()メソッドは月からマイナス1した値が返ってくるので、取得後に+1して値を元に戻す。

.toLocaleString()もjsのメソッドで、数値にカンマを設定して出力する。こちらもdateプロパティのpriceに対して適用させている。

ただだんだん見にくくなってくるので、Vueの機能を使ってもっと分かりやすく表現できる(らしい)。

メソッドオプションを使ったアプローチ

methodsオプションを使って、関数を連続して記述することができる。js側に処理を集約することで、HTML側をシンプルに記述することができる。

See the Pen Untitled by git-cat-meow (@git-cat-meow) on CodePen.

computedオプションを使ったアプローチ

computedオプションを使うと、戻り値のある関数を連続記述することができる。こちらもHTMLの見通しが良くなる。

See the Pen computed option by git-cat-meow (@git-cat-meow) on CodePen.

thisがよく分からない。これは別途調べる。

filtersを使ったアプローチ

また同様にFiltersオプションを使用しても同様の結果が得られる。

See the Pen Filters by git-cat-meow (@git-cat-meow) on CodePen.

どのデータを呼び出しているのかがHTML側から把握しやすい。

3つのアプローチの違い

大きな違いはキャッシュするかしないか。フィルターオプションは共通化したい処理で使用すると分かりやすくて良い(らしい)。

とりあえずはmethodかcomputedの2択で考える。キャッシュがポイントになるので、使用するシチュエーションで選ぶ。

カテゴリー: Vue
このサイトの主
投稿を作成しました 115

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る