初心者がVue.jsの公式ガイドを勉強するメモ　クラスとスタイル編

# クラスとスタイルのバインディング
* 今日のお題はこちらです。
* https://jp.vuejs.org/v2/guide/class-and-style.html

## HTML クラスのバインディング
### オブジェクト構文

* App.vue

```html
<template lang="pug">
  #app
    div.static(:class="{ active: isActive, 'text-danger': !isActive }") see class
    button(@click="isActive=!isActive") ClassChangeToggle

    div(:class="classObject") see class

    div(:class="classObjectComputed") see class
    button(@click="toggleMethod") ClassChangeToggle

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      isActive: true,
      error: false,
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  },
  computed: {
    classObjectComputed () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error
      }
    }
  },
  methods: {
    toggleMethod () {
      this.classObject.active = !this.classObject.active,
      this.classObject['text-danger'] = !this.classObject['text-danger']
      this.error = !this.error
    }
  }
}
</script>

```

* これだけでも、十分いろんなことができそうです。
* 簡単なものは、テンプレートに書く。
* ゴチャゴチャしたら、data側に置くまたは、computedでclassを管理する。
* 細かい条件が必要なら、computedになりますね。


### 配列構文

* App.vue

``` html
<template lang="pug">
  #app
    div(v-bind:class="[activeClass, errorClass]") Array
    div(:class="[isActive ? activeClass : errorClass]") array ３項演算子
    div(:class="[{ active: isActive}, isActive ? '' : errorClass]")

    button(@click="isActive = !isActive") Toggle Button

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      isActive: true,
      activeClass: 'active primary-color bg-md-12',
      errorClass: 'text-danger'
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>


```
* 最初、配列にしてなにが便利なのかと思いましたが、長いclass名をつけているときなどにもつかえます。
* ３項演算子で一気に変えれますね、尚切り替える場合、配列要素が必要です。 
* 書き方としては、外を配列でくるんで、中をオブジェクトで書けば両方対応できます。
* class指定を、object形式にするのは、jsらしいですが、最初は、class名とキーと値がごっちゃになりややこしいです。（笑）

### コンポーネントにおいて

* App.vue

``` html
<template lang="pug">
  #app
    my-component
    my-component.baz.boo
    my-component(:class="{active: isActive}")

</template>

<script>
import Vue from 'vue'

Vue.component('my-component', {
  template: `<p v-bind:class="{componentActive: isActiveComponent}" class="foo bar" > component p </p>`,
  data: () => ({
      isActiveComponent: true
    })
  })

export default {
  name: 'app',
  data () {
    return {
      isActive: true
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>

```

* コンポーネントは、最初使いませんので、飛ばしてもいいようにも思います。
* コンポーネントに置いたclass属性がどうなるかの説明です。
* コンポーネント側に書いてある、class名は通常上書きされず、後から追加した分と合わせて表示されるみたいです。
* コンポーネントに書くclass属性ですが、書く場所によりdataプロパティが違うので、違いの把握をしておいてください。

## インラインスタイル
### オブジェクト構文

* App.vue

``` html

<template lang="pug">
  #app
    div(:style="{ color: activeColor, fontSize: fontSize + 'px'}") Style
    div(:style="styleObject") StyleObject
    div(:style="styleComputed") styleComputed

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      activeColor: 'blue',
      fontSize: '30',
      styleObject: {
        color: 'red',
        fontSize: '20px'
      }
    }
  },
  methods: {
  },
  computed: {
    styleComputed () {
      return {
        color: this.activeColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

```
* css styleもオブジェクトで書きます。
  * ケバブケース、キャメルケースお好みで書けるみたいです、ここではJSで書きやすいキャメルで書くことにします。
* styleもテンプレート、dataプロパティ、computedにお好みでおけます。
* 最初サブ扱いと思っていたのですが、activeに切り替える要素は、ここがメインなのかもしれないですね。

### 配列構文

* App.vue

``` html
<template lang="pug">
  #app
    div(:style="[baseStyles, overridingStyles]") ArrayClass

</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data () {
    return {
      activeColor: 'blue',
      fontSize: '30',
      baseStyles: {
        color: 'red',
        fontSize: '20px',
        fontFamily: 'Arial'
      },
      overridingStyles: {
        color: 'blue',
        fontSize: '30px',
        fontWeight: 'bold',
      }
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>



```

* こちらも、配列がつかえるみたいです、この場合は基本スタイルと上書きスタイルがマージされて適用されます。
      
      
### 自動プリフィックス

* App.vue

``` html
<template lang="pug">
  #App
    div(style="user-select: none") auto prefix

</template>

<script>

export default {
  name: 'app',
  data () {
    return {
    }
  },
  computed: {
  }
}

</script>
```

* 自動プリフィックス搭載済みみたいです。　たしかに現在のchromeでは、prefixついていませんが、safariで見ると、-webkit- がつけられているのがわかります。
* これは、safariもupdateされると、見れなくなると思います。


### 複数の値

* App.vue

``` html
<template lang="pug">
  #App
    div(:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }") Vue 2.3 over support

</template>
```
* 対応しているのを選んで使用してくれるということでしょうか。

* 今回は、これで終了です。　　次回は、条件付きレンダリングです。