ラック
Home > ブログ > 記事 > 2018年3月 > ハンズオンで学ぶVue.js勉強会 on Webエンジニア交流会@足利 参加レポート

ハンズオンで学ぶVue.js勉強会 on Webエンジニア交流会@足利 参加レポート

カテゴリ: ホームページ,プログラム

Vue.jsのハンズオン勉強会に参加したのでそのレポートをアップします。

講演

Mio氏講師

  • 2016年まで: node.js?webpack?
  • 2017年2月: Vue.jsはじめる

1.Vue.jsとは?

  • UIを作るためのJSフレームワーク
  • jQueryと同じブン屋
  • Github Javascriptカテゴリ: Star数2016年2017年連続1位
  • DOMを操作するのではなく、データからDOMを生成する(DOM付与)
    • データを書き換えれば、リアルタイムで書き変わる
    • jQueryでは値を書き換えた後に$(elm).text()などで書き換えないと書き変わらないが
  • Vue.jsの特徴
    1. データバインディング
      • 上記の特徴。データを書き換えれば、即座に出力まで反映される
      • 仮想DOM
        • DOMへのアクセスを最適化する
    2. テンプレート
      • v-xxxの形式で属性を記述、if, bind, on:clickなど定義済みのものがある
        • こうした属性地をディレクティブ
      • refなど、v-で始まらないものもある。こちらはただのテキスト値
    3. コンポーネント指向
      • Web Componentsが最近の流れで、パーツ化することが標準の流れになっている
      • この考え方を受けている
    4. 柔軟なスケール
      • 最小限はVue.jsのスクリプトを読み込みさえすれば動かせるので、jQueryに近い感覚で開始することができる

2.Vue.jsの基本機能

  1. インスタンスの作成
    • new Vue({ //処理 });でインスタンス作成
    • idをhtmlに指定、これをelメンバーに記述して紐付け(マウント)を行う 2: データ、メソッド
    • Vueインスタンスの中にdata, methodsオプションで記述する
    • ライフサイクルフック: created:インスタンス生成時, destroyed:インスタンス破棄時など、予め決められたタイミングで呼び出し可能なタイミングにフックすることができる
    • データバインディング: テキスト出力 はhtmlの属性値には使えない
    • 属性のデータバインディング: v-bind
      • v-bindはよく使うので省略可。例: v-bind:value:value
      • クラスのデータバインディングも可。データで真偽値を持っておけば漬外しが楽
        • インタラクティブなアニメーションで使えそう
      • スタイルのデータバインディングも可: v-bind:style=
      • ループ: v-for。記述はinだが、of forに近い。インデックスではなく要素が返ってくる
        • key指定が推奨v-bind:key
      • イベントハンドリング: v-on, 省略で@も可。例: v-on:click@click
      • フォームバインディング: v-model
      • 条件分岐: v-if, v-show
        • falseの際、v-showはdisplay:noneするだけ。v-ifはDOM削除される
          • 操作が解除されてしまう
      • 算出プロパティ: comupted: 中の処理は元の値が変わらない限りキャッシュされる
      • ウォッチャ: watch

3.ハンズオン

実際に作ってみる

参考

その他情報

Vue.js周り

仮想通貨

Headless CMS

CMSはデータハウスで、デザインやフロントは好きにして良い、と。WordPressもREST API使えばできますし、こちらの流れも気になりますね。

ホスティング

静的サイトならサーバサイドはこれでも良さそう。

タグ: javascript,イベント,ニュース・時事・トレンド,Vue.js

 



関連する記事一覧