Blog

javascriptフレームワークのvue.jsを使ってみる②(ソート機能っぽいもの)

2017.04.11Cat:javascript プログラマー

以前、vue.jsの記事を書いたのですが、
今回もうちょっと機能を使い、DEMOを作ってみました。

前回は入門編と書いたのですが、基礎編とか応用編とか、ちょっとどう切り分けたらよいかわからなくなりそうなのでやめました笑

javascriptフレームワークのvue.jsを使ってみる(入門編)

今回のDEMOは「ECサイトでソートする機能みたいなもの」です。
公式サイトにある例のグリッドコンポーネント – Vue.js

DEMO

価格、レビュー、口コミ数等をクリックすると順番が、昇順、降順で切り替わるようになっています。
あとはテキストフィールドに文字を入力するとその文字が入ったものを表示します。

コード

html

javascript

使用しているタグ(API)と実際にDEMOで仕様している例を使い簡単に説明します。

まずは、ディレクティブになります。
ディレクティブとは、主にhtmlに設定するもので、値が変更になった時反映させるための記述になります。
基本的にはv-で始まるものになります。
複数用意されているのですが、今回はDEMOで仕様した4つのみの紹介になります。

v-on

要素にイベントリスナーを設定するものです。

この場合、thをクリックすると、sortByという関数が呼び出されるということになります。
このsortBy関数は、methodsに記述されています。

ちなみに、

このように記述してありますが、これはv-onを省略した形になります。

v-bind

公式には 「1つ以上の属性またはコンポーネントのプロパティと式を動的に束縛します。」とありますが、
いまいちよくわからないとも思います。

vueのdataの値により、動的に変更される値を付与するみたいな感じでしょうか。。。

いきなり省略した形で書いてありますが、

がv-bindの記述になります。(省略しないと、v-bind:class=”” になります)
これは、class属性をdataのsortKeyが’viral’だった場合、activeを付与するという記述になります。

このclassですが、動的なactiveだけじゃなく、元々付けたいという場合は、

という形か(配列・オブジェクト形式で記述することができます。)、

普通に、class=”sortable”を書いてしまって大丈夫です。

v-for

これは繰り返しの記述で、foreach文とfor文とかみたいな感じです。

computedのfilteredDataのデータを表示しています。

基本は、{{}}で囲い表示させるのですが、
v-bindで表示する時は、{{}}は必要ありません。

v-model

こちらは、input要素,textarea等で使用することが主になるようですが、
記入した情報を送り、変化があった場合、受け取る記述になります。

今回はこのテキストは記入でしか変更されないので一方向的な感じになりますが、
このinputに記載した情報が、dataのwordにその情報が登録され、その登録された情報がこのinputの値に挿入される形になります。
(今回初期が空になっていますが、なにかテキストを入れてみると最初からその文字が入るようになります)

次は、script部分、Vueインスタンス部分の紹介になります。

el

公式では、「既存の DOM 要素に Vue インスタンスを与えます。CSS セレクタの文字列、実際の HTML 要素をとることができます。」
とありますが、
どこの要素でvueを動かしたいかというのを記述します。
今回は、id=”sort”の中なので、

と記述します。

data

表示させる情報や、変更させる元の情報を記載しておく場所です。
このdataを元に、computed,methods等で処理していきます。

ちょっとよくわからないのですが、基本的には、このdataの中で、状態を変えたりするような処理はしない方が良いみたいです。

なので、今回dataは、vueの外側でobject(columnsData)で設定したものを読み込んでいます。

computed

公式では「Vue インスタンスに組み込まれる算出プロパティ」とあり、よくわからないのですが、
この中に記述したものは、使用しているdataが変更されると自動で更新されるようです。

つまり、

使用しているitemsが変更された場合、filteredDataの処理が実行されるということだと思います(たぶん…)
ちなみに、このthisというは、dataを指すことになります。
この文では、dataの中のitemsの値を変数dataに定義、ということになります。

このfilteredDataが処理されると、html側に書いたv-forのfilteredDataに反映され、
動的にソートされるということになります。

methods

公式では、「Vue インスタンスに組み込まれるメソッドです。」とありますが、
私としては、Vueの情報を扱える関数を設定しておける場所という認識でいます。
html側からv-onで呼び出すこともできます。

ここのthisもdataを指しています。

このdemoでは、ソートの発火を担っており、
流れとしては、

  1. 見出し部分をクリックする
  2. このsortByが処理される
  3. dataのsortKeyとsortOrdersが変更される
  4. dataの値が変わったので、filteredDataが処理される
  5. htmlのfilteredDataが更新される

という感じになります。

おまけ

本日でvistaのサポートが終了になりました。
ということは…IE9を考慮しなくてすみます!!
すぐという訳にはいかないだろうと思いますが、その流れは加速していくことでしょう!
嬉しい限りです。

考慮しなくてすむとなるということは…
Flexbox
CSSアニメーション
を使用できる!!
ということです。

制作時、ブラウザ対応の仕様をしっかり決めて、IE11以上になれば、
堂々と使えるようになりますね!

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ