MEMO[Vue.js]

# Vue.jsのメモ

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

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

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

### プロパティ値を変更されたくない場合
以下を適用する。

```js:example
Object.freeze(obj)
```

### プロパティへのアクセス
接頭辞「＄」を使用して呼び出す事が可能。

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

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

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

```js:example
new ({
    data : {a:1},
    created : function (){
        console.log('インスタンス完了')
    },
})
```
その他にも関数が用意されている。
[★](https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム)

## テンプレート
HTMLパースを適切に行うために。

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

```html: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要素として認識させないといけない。

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

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

```html:example
<div v-bind:id="example"></div>
```
desable設定時は挙動が変わる。
以下は、値が存在する時には、ボタンが非活性にする記述。

```js:example
var vm = new Vue ({ 
    el  :'#example',
    data: {
      example: 'desable',
    }
})
```
```html: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-」で定義した箇所へ、動的な処理を施せる。

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

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

```html: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>
```

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

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

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

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

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

### 省略記法
冗長さを避けたい人へ。
[こちら](https://jp.vuejs.org/v2/guide/syntax.html#省略記法)

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

### 基本的な例

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

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

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

```js:example
vm.msg = 'small' // 出力 ->  smallWorld
```

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

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

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

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

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

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

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

```js: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,
            }
        }
    }
})
```

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


## 条件付きレンダリング

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

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

```html: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
同時に利用することは推奨されていない。
[こちら](https://jp.vuejs.org/v2/style-guide/#v-for-%E3%81%A8%E4%B8%80%E7%B7%92%E3%81%AB-v-if-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%AE%E3%82%92%E9%81%BF%E3%81%91%E3%82%8B-%E5%BF%85%E9%A0%88)

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

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

```html:example
<div v-for="item in items" v-bind:key="item.id"></div>
```
keyが必要のない場合には、付与しなくてもいいが、基本的には適用しておけば、不具合を回避できる。

### リストの状態を操作する時
変更メソッドが用意されているので、適宜活用しよう。

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

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


## イベントハンドリング
v-on:の使用について。

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

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

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

### その他おもしろ機能
**イベント修飾子**
使いこなせばきっと良いことがありそう。

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

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

## コンポーネントもろもろ
コンポーネント名登録時には、スタイルガイドを読んで、適切に適用しよう。
[こちら](https://jp.vuejs.org/v2/style-guide/#%E5%9F%BA%E5%BA%95%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%90%8D%E5%89%8D-%E5%BC%B7%E3%81%8F%E6%8E%A8%E5%A5%A8)

### グローバル登録、ローカル登録
目的に沿って、記述しよう。

```js:グローバル記述
Vue.component('example', { ... })
```

```js:ローカル記述
var Component = { ... }
```

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

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

```html:example
<button v-on:click="$emit('exmaple-cmp')">PUSH</button>
```
- コンポーネントで呼び出したいメソッドを指定 

```html:example
<ex-component
  ...
  v-on:exmaple-cmp="exampleMethod"
>
</ex-component>
```
- 定義したMethodが呼び出される

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



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