Vue.jsメモ

#前提
Vue.jsで学んだことを書いていきます。

#Vue.jsで利用できる主なイベント

```
#フォーム
focus 要素にフォーカスが入った時
blur 要素からフォーカスが外れた時
change 要素の値を変更した時（input、select、textareaなど）
select テキストボックス/テキストエリアのテキストを選択した時
submit フォームから送信した時

#マウス
click 要素をクリックした時
dblclick 要素をダブルクリックした時
mousedown 要素をダブルクリックした時
mouseover 要素にマウスポインターが乗った時
mouseenter 要素にマウスポインターが乗った時
mouseleave 要素からマウスポインターが外れた時

#マウス
mouseout 要素からマウスポインターが外れた時
mousemove 要素の中をマウスポインターが移動した時
mouseup マウスのボタンを離した時

#キー
keydown キーを押した時
keyup キーを離した時
keypress キーを押し続けている時

#その他
resize ウィンドウのサイズを変更した時
scroll ページや要素をスクロールした時
error ページ内でエラーが発生した時
contextmenu コンテキストメニューを表示する前
```

```index.html
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: '皆さんこんにちは！'
    }
  });
</script>
</body>
```


#ディレクティブ
{{...}} Mustache構文
v-xxxxx属性 ディレクティブ属性

ディレクティブ
属性やスタイルの操作、条件分岐、繰り返しの処理など、より複雑な機能を組み込みたい場合に利用する。

・{{...}} の無効化（v-pre）

```index.html
<body>
  <div id="app">
    <p v-pre>{{ message }}</p>
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: '皆さんこんにちは！'
    }
  });
</script>
</body>
```

・ブール属性
checked、selected、desabled、multipleなど、値がいらない（＝属性名を指定するだけで意味がある）属性のことを論理属性、またはブール属性という。
これらの値をバインドするにはtrueまたはfalse値を用いる。

#算出プロパティ

```index.html
<body>
  <div id="app">
    <p>{{ localEmail }}</p>
    <input type="button" value="クリック" :disabled="flag">
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      email: 'Y-Suzuki@example.com'
    },
    computed: {
      localEmail: function() {
        return this.email.split('@')[0].toLowerCase();
      }
    }
  });
</script>
</body>
```

##メソッド

```
<body>
  <div id="app">
    <p>{{ localEmail() }}</p>
    <input type="button" value="クリック" :disabled="flag">
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      email: 'Y-Suzuki@example.com'
    },
    methods: {
      localEmail: function() {
        return this.email.split('@')[0].toLowerCase();
      }
    }
  });
</script>
</body>
```



#ライフサイクルフック

```index.html
<body>
  <div id="app">
    <p>現在時刻： {{ current.toLocaleString() }}</p>
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="react.js"></script>
</body>
```

```index.js
new Vue({
  el: "#app",
  data: {
    current: new Date()
  },
  created: function() {
    let that = this;
    //1000ミリ秒スパンでcurrentプロパティを更新
    this.timer = setInterval(function() {
      that.current = new Date();
    }, 1000);
  },
  //終了前にタイマーを破棄
  beforeDestory: function() {
    clearInterval(this.timer);
  }
});
```

・setメソッド

```
Vue.set(target,key,value）
target:追加対象のオブジェクト
key   :キー
value :値
```

※複数のプロパティを追加する場合
Object.assignメソッドを利用する。

```
that.author = Object.assign({}, that.author,
  { company: '〇〇プロジェクト', sex: 'male', age: 18 });
```

```
_.debounce(func,wait)
func:遅延実行すべき処理
wait:遅延時間（ミリ秒）
```
_.debounceメソッドは、処理を直接実行するのではなく、そのための関数を返す点に注意。



<code>toLowerCase() メソッド</code>
小文字に変換された文字列の値を返す。
<code>toLocaleString</code>
この数値を表す言語依存の文字列を返す。