VueJS

VueJSメモ

はじめに

速習Vue-jsを読んだのでメモ。 主に自分が間違えたり忘れやすい箇所中心なのでVueJSの基本機能ばかり。コンポーネントとかルーティングに関しては今回は対象外

ガリガリ計算した値をdataプロパティに代入するのはおすすめしない

• 案1）computedを使う
• 案2）methodsを使う
  ↓
• computed/methodsの違いはキャッシュするかしないか
  • キャッシュする：computed → 早い。依存関係があるプロパティが変更されたら再描画。基本はこっちでOK
  • キャッシュしない：methods → 値を常に更新したいときはこっち

VueJSのv-onにはclick以外にもkeyupがある（特定のキーを押下したときにイベント発生）

• こういう機能があるってことだけ覚えてたら十分な印象（必要なときに調べる）
• キーボードの組み合わせ（ctrl押したあとにalt押してなど）も大丈夫
• キーの割当は
  • キーコード（esc=27とか）で指定する
  • VueJSが準備しているエイリアスを使う
  • 自分で別名を設定する（Vue.config.keyCodes）

チェックボックス

• 単一でON/OFFを表すときは値はbooleanが基本。trueならXX,falseならYYとか、値を変更したいときは
  　true-value="XX",false-value="YY"とすればOK
• 複数の場合は値を配列で持つ

バインドのオプション

• 数値としてバインド → v-model.number
• トリムしてバインド → v-model.trim
• 遅延してバインド → v-model.lazy
  • 指定しないと入力したら即座に反映、lazyをつけたらフォーカスが外れたときにバインド

v-modelによる双方向バインディングはv-bindとv-onchangeの合わせ技

• なので下記の2つは同じ意味

   <input v-model="emails"></input>
  

    <input v-bind:value="emails" v-on:input="emails=$event.target.value"></input>
  

  使い所はバインドするときに何らかの処理をはさみたい時（例えばsplitしたいとか、methodsのを呼び出したいとか）

v-if/v-show の使い分け

• v-if：DOMの存在自体が消える。描画コスト大。
• v-show：display:noneが設定される （DOMはいる）描画コスト小。
  → 基本はv-showを使えばOK

v-forとv-ifの併用はよろしくない

<tr v-for="user in users" v-if="user.age<="20">

• 可読性が悪化する
• 常にフィルタ前の配列をループするのでパフォーマンスも良くない
• 正解はcomputedとの合わせ技

  <tr v-for="user in adultUsers" >

  computede:{
    adultUsers:functions(){
      return this.books.filter(function(b) {
        return b.price < 2500;
    })
  }
  

v-ほにゃほにゃを使うためにdivタグでまとめていたなら、templateを使いましょう

• v-if/v-for とかに使えます

配列の中身を変更して、それを画面に反映したいならVue.setを使いましょう

     Vue.set(this.list,1,'変更後の値')

• もしくは下記でもOK（JS標準のspliceをVue側でラップしてるので配列の中身が変更されたらVueが検知できる）

  this.list.splice(1,1,'変更後の値')
  

• spliceの他にもpush,pop,shift,unshift,sort,reverse がある

v-bindに複数の値を一括で設定できる

  <input type="text" v-bind="attrs">

    data:{
      attrs:{
        size:12,
        maxlength:15,
        required:true,
      }
   }

描画前の{{...}}に画面がチラつくのをなくしたい

• v-cloak を使います。htmlにv-cloakを持たす。
• CSSに下記を追加します。

  [v-cloak]{
   display:none;
  }
  

投稿の設定 ラベル スケジュール パーマリンク 場所 検索向け説明 オプション