Vue.jsのメモ

データの反映

作成されたVueインスタンスは、プロパティ値が変更されると、関連付いているメソッドの値も変更される。

example

// 定義
var data = { a: 1 }
var vm = new Vue({
  data: data
})

// プロパティ操作
vm.a = 2
data.a // 2

プロパティ値を変更されたくない場合

以下を適用する。

example

Object.freeze(obj)

プロパティへのアクセス

接頭辞「＄」を使用して呼び出す事が可能。

example

var data = {'data' : 1}
var vm = ner Vue ({
    el = $example,
    data = data
})

// 呼び出す
vm.$data
vm.$el

ライフサイクルフック

インスタンス生成処理に、特定の処理を挟むことが出来る機能が、備わっている。
以下は、インスタンス生成後への処理追加方法。

example

new ({
    data : {a:1},
    created : function (){
        console.log('インスタンス完了')
    },
})

その他にも関数が用意されている。
★

テンプレート

HTMLパースを適切に行うために。

初歩

基本的には、Mustache構文を利用する。
特にプロパティを指定しない場合には、要素の操作で、データバインディング箇所は、可変式になっている。

example

//表示データが変わってもいい場合
<span> Message: {{ msg }} </span> // 画面上 -> Message: example!
vm.msg = 'change!'                //  画面上 -> Message: change!

// 表示データを変えられたく無い場合
<span v-once> Message: {{ msg }} </span> // 画面上 -> Message: example!
vm.msg = 'change!'               　　　  //  画面上 -> Message: example!

HTML要素の追加

Mustacheは、値をただの文字列としか認識しない。
そのため、v-htmlを使用して、HTML要素として認識させないといけない。

example

// 以下はHTMLタグが文字列として画面に出力
<div>太字にするつもり　→ {{ bold_chara }}</div>
// 以下であれば成功
<div>太字にするつもり　→ <div v-html="bold_chara"></div>

属性

Mustacheは属性値では使用できない。
代わりに、v-bindディレクティブを使用する。

example

<div v-bind:id="example"></div>

desable設定時は挙動が変わる。
以下は、値が存在する時には、ボタンが非活性にする記述。

example

var vm = new Vue ({ 
    el  :'#example',
    data: {
      example: 'desable',
    }
})

example

<button id="example" v-bind:disabled="example">Button {{ example }}</button>

javascriptの処理を活用

バインディング内で、javascriptを利用できる。

example

{{ number + 1 }} 　　　　                   // 定義した値に１を足す。文字列の場合には連結。
{{ ok ? 'YES' : 'NO' }}                    // 条件式
{{ message.split('').reverse().join('') }} // scriptを適用

適用されない記述方式もあるので、仕様を把握するのがよい。
三項演算子でしか適用されな等。

ディレクティブ

接頭辞「v-」で定義した箇所へ、動的な処理を施せる。

引数

引数を既述することにより、要素を動的に扱うことが出来る。

example

var vm = new Vue({
  el: '#example',
  data: {
    bool: false,
    url: 'http://',
  },
  methods: {
  	go:function(e){
      alert('Hello ' + this.name + '!')
    },
  },
})

表示例。

example

<div id="example">
    以下要素は表示されない
    <p v-if="bool">Now you see me</p>
    href属性にurl変数展開
    <a v-bind:href="url"> ... </a>
    go関数実行
    <button v-on:click="go"> DODODO </button>
</div>

<p class="example" v-if="bool">Now you see me</p>

href属性にurl変数展開
<a class="example" v-bind:href="url"> ... </a>

動的引数

鉤括弧にて、動的引数を利用して、値の展開が可能。

example

var vm = new Vue({
  el: '#example',
  data: {
    el: 'class',
    clsnm : 'example',
  },
})

example

<div id="example">
    el変数展開、clsnm変数展開
    <p v-bind:[el]="clsnm"></p>
　　イベントハンドラも動的記述可能
　　<a v-on:[eventName]="doSomething"> ... </a>
</div>

引数は、stringが扱われることを想定されている。
nullはバインディングを削除する場合に活用できる。

スペースや、引用符を既述すると、正しく動作しないので注意。
また、eventNameのようなキャメルケースは、ブラウザが全て小文字にするので注意。

省略記法

冗長さを避けたい人へ。
こちら

算出プロパティ

テンプレート内に、ロジックを埋め込めるのは便利だけど、保守、運用の観点から、あまり良く無いため、算出プロパティを利用する。

基本的な例

example

var vm = new Vue ({	
    el:'#example',
    data:{msg : 'Hello'},
    computed: {
        joinStr: function(e){
            return this.msg + 'World'
        },
    },
})

example

<div id="example">
    出力 -> HelloWorld
    <p>{{ joinStr }}</p>
</div>

プロパティ操作も適用される。

example

vm.msg = 'small' // 出力 ->  smallWorld

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

メソッド記法により、同様の結果を得られることは可能。
しかし、処理のパフォーマンスに違いが生まれる。

算出プロパティは、依存関係が変化しなければ、キャッシュされ続ける特質を持っている。
すなわち、プロパティの変更が行われなければ、再度計算を行われず、保持された値を返すのみなので、アプリケーション負荷が低くなる利点がある。

必要で無い限りは、算出プロパティの使用をこころがけよう。

要素のclassを動的に操作

利用者の操作によって、見た目を変えたい時の処理。
v-bind:classを使用する。
有効化したい場合は、

example

var vm = new Vue ({	
    el:'#example',
    data: {
      is_active: true,
      is_a     : false,
    },
})

example

<div id="example" v-bind:class="{'active':is_active, 'cls_a':is_a}"></div>
↓
<div id="example" class="active"></div>

算出プロパティの利用も可能。

example

var vm = new Vue ({ 
    el  :'#example',
    data: {
        'el_activ': true,
        'error': true,
    },
    computed: {
        ExampleObj: function(){
            return {
                'active': this.el_activ,
                'error_cls' : this.error,
            }
        }
    }
})

example

<div id="example" v-bind:class="ExampleObj"></div>
↓
<div id="example" class="active error_cls"></div>

条件付きレンダリング

v-if

真偽値、条件結果を利用して、画面描写結果を変化させる。
要素自体を削除してくれるので、アクセス制限、表示制限等に利用すると良さそう。

入力項目の制御

input等に関しては、条件操作によって、要素の表示操作を行ったとしても、入力項目が切り替わらない場合がある。
その際には、一意の属性をもたせると良い。

example

<div v-if="login_type == 'usr_id'">
  <input placeholder="username" key="username-input">
</div>
<div v-if="login_type == 'email'">
  <input placeholder="mail addless" key="email-input">
</div>

v-show

display要素により、表示、非常時を切り替える。
template要素、v-else要素に対応していないので、注意する。

v-ifとv-else

特性を理解して、適切に扱う。
v-ifは、描画時に要素の操作を、スクリプトによってシステム的に処理するため、比較的、動作が遅くなる。
v-elseは、要素を非表示にするだけ。
入力項目等の、不正操作による、不具合、アプリケーションの脆弱性を緩和することができそう。

v-ifとv-for

同時に利用することは推奨されていない。
こちら

リストレンダリング

類似した形式の情報を一覧で表示する場合には、v-forが利用できる。
pythonのforと似ているの。
inの代わりにofを使用できる。

状態の維持

リストを並び替える処理を行った際に、情報が正しく保持されない場合がある。
例えば、インプットの値等。
適切に保持させるためには、key属性を適用するとよい。

example

<div v-for="item in items" v-bind:key="item.id"></div>

keyが必要のない場合には、付与しなくてもいいが、基本的には適用しておけば、不具合を回避できる。

リストの状態を操作する時

変更メソッドが用意されているので、適宜活用しよう。

注意点
Vueが検知できない場合がある。

インデックスを利用した、直接な値操作
vm.items[key] =
配列の長さの操作
vm.items.length =

イベントハンドリング

v-on:の使用について。

イベント記述箇所

イベントを、DOMへ記述すると、コードが無駄に肥大化して良くない。
なので、methodへ追記するのが良い。

example

var example = new Vue({
  el: '#example',
  data: {
    counter: 0
  },
  methods: {
    countUp: function(e){
        this.counter += 1
    }
  }
})

example

<div id="example">
  <button v-on:click="countUp">１増やす</button>
  <p>{{ counter }} </p>
</div>

その他おもしろ機能

イベント修飾子
使いこなせばきっと良いことがありそう。

キー修飾子
キーボードの入力で制御ができて良いことがありそう。
キーコードも使える。

システム修飾子キー
OSに備わっているキーで制御が出来て良いことがありそう

コンポーネントもろもろ

コンポーネント名登録時には、スタイルガイドを読んで、適切に適用しよう。
こちら

グローバル登録、ローカル登録

目的に沿って、記述しよう。

グローバル記述

Vue.component('example', { ... })

ローカル記述

var Component = { ... }

子コンポーネントのイベントを受け取る

親要素（親コンポーネント）の状態を、子要素（子コンポーネント）のアクションで操作する。

$emitを利用して、アクションさせる、コンポーネントを指定。

example

<button v-on:click="$emit('exmaple-cmp')">PUSH</button>

コンポーネントで呼び出したいメソッドを指定

example

<ex-component
  ...
  v-on:exmaple-cmp="exampleMethod"
>
</ex-component>

定義したMethodが呼び出される

example

...
methods : {
  exampleMethod : function(v){
    console.log('Hello!!')
  }
}

追記中

情報を集めているだんかい。
間違ってたらごめんなさい。