Vue.js 1ヶ月使ってみて まとめ2

## １ヶ月Vueを使って、実際に繰り返し見て、使った事のまとめ2

## v-onの省略記法と[ ]を使った方法
```html:index.html

<div id="app">
   <p>現在{{ number }}回クリックされています</p> 
   <button v-on:click="countUp">カウントアップ</button>  
   <button @click="countUp">カウントアップ</button>  <!-- v-onは省略記法で＠が使える -->
   
<!-- []の中をデータで動的に変更できる -->
   <button v-on:[event]="countUp">カウントアップ</button>   
   <button @[event]="countUp">カウントアップ</button>  
</div>

<script>
 new Vue({
    el: '#app',
    data: {
      number: 0 ,
      event: 'click'
    },
    methods: {
      countUp: function() {
        this.number += 1; //vueでデータにアクセスしたい場合はthis.をつける
      }
    }
 })
</script>
```
## v-model ディレクティブ 　双方向データバインディング
単一方向　v-modelを使わない時は

```html:index.html

<div id="app">
   <h1>{{ message }}</h1>  <!-- Hello World と表示される -->　<!-- {{ messageを違うデータに変えたい }} -->
</div>

<script>
 new Vue({
    el: '#app',
    data: {
      message: 'Hello World' //ここを変えたら⬆️の{{ message }}も変わる
    },
    methods: {
    
    }
 })
</script>
```
v-modelを使っての双方向とは　テンプレート側で入力した値がデータ側に反映できる仕組み

```html:index.html

<div id="app">
   <input type="text" v-model="message">  <!-- 入力したテキストが{{ message }}に表示される -->　
   <h1>{{ message }}</h1>
</div>

<script>
 new Vue({
    el: '#app',
    data: {
      message: '' //　空で定義
    }
 })
</script>
```
## computedプロパティ
```html:index.html

<div id="app">
   <p>{{ counter }}</p> 
   <button v-on:click="counter += 1">カウントアップ</button>  
   <p>{{ lessThanThree }}</p> <!-- counterの値が3より上か下かで表示を変える' -->
</div>

<script>
 new Vue({
    el: '#app',
    data: {
      counter: 0 ,
    },
    computed: { // 関数のように書くが、あくまではデータの続きのような扱い
      lessThanThree: function() {
        return this.counter > 3 ? '3より上です' : '3より下です' += 1 ; //vueでデータにアクセスしたい場合はthisをつける
      }
    }
 })
</script>
```
##ウォッチャとは　非同期処理などで使う
```html:index.html

<div id="app">
   <p>{{ counter }}</p> 
   <button v-on:click="counter += 1">カウントアップ</button>  
   <p>{{ lessThanThree }}</p> <!-- counterの値が3より上か下かで表示を変える' -->
</div>

<script>
 new Vue({
    el: '#app',
    data: {
      counter: 0 ,
    },
    computed: { 
      lessThanThree: function() {
        return this.counter > 3 ? '3より上です' : '3より下です' += 1 ; 
      }
    },
    watch: {
      const vm = this;  // 非同期処理の中ではthisが使えないので 変数に代入して扱う
      counter: function() { // counterの値を監視する
        setTimeout(function() {
          vm.counter = 0  // counterの値が変更されたら３秒後にcounterの値が0になる
        }, 3000)
      }
    }
 })
</script>
```
##クラスをデータにバインディングする方法
```html:index.html
<div id="app">
  <h1 :class="classObject">Hello</h1> <!-- 普通の class="" は "" の中身は文字列 :class=""の中身はJavascriptの式として扱われる -->
  <button @click="isActive = !isActive">切り替え</button> <!-- isActiveをtrueかfalseを切り替える -->
</div>

<script>
new Vue({
   el: '#app',
   data: {
     isActive: true
   },
   computed: {
     classObject: function() {
       return {
         red: this.isActive, 'bg-blie' : this.!isActive // red がtrueなら .redクラスがあたり、'bg-blue'がfalseなら.bg-blueクラスがあたる
       } //* なぜ'bg-blue'だけ ''で囲むか javascriptのオブジェクトの中では - が文字列と判断されずにエラーが出るから注意
     }
   }
 })
</script>

<style lang="scss" scoped>
  .red {
    color: red;
  }
  .bg-blue {
    background-color: blue;
  }
</style>
```
##インラインスタイルにオブジェクトを用いてバインディングする
```html:index.html
<div id="app">
  <h1 :style="styleObject">Hello</h1> <!-- 普通の style="" は "" の中身は文字列 :class=""の中身はJavascriptの式として扱われる -->
</div>

<script>
new Vue({
   el: '#app',
   data: {
     styleObject: {
       color: 'red',
       'background-color': 'blue' 
     }
   },
 })
</script>

```