vue.jsのチュートリアルをやってみた

#1.参考にした記事
@sin_tanakaさんによる[チュートリアル](https://qiita.com/sin_tanaka/items/29769266b3b078ea0f7c)をやってみた。

#2.完成したもの
作成したものをあげたのでこちらのURLから試せる。
https://yunomiyako.github.io/pshare/#/test

<img width="356" alt="スクリーンショット 2018-02-19 17.04.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/234396/ffb9ba88-49df-0ede-3f2a-4b5ae7e1baad.png">

#3. プロジェクトの作成してみた
[チュートリアル](https://qiita.com/sin_tanaka/items/29769266b3b078ea0f7c)を参考に、pshareというプロジェクト名で作成した。

#4. ルーティングをいじってみた

```router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test_script from '@/components/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },

    {
      path: '/test',
      name: 'test_script',
      component: test_script
    }

  ]
})

```
初期プロジェクトでは、componentsフォルダの中に入っているHelloWorldを呼び出しコンポーネントを表示させているようなので、/testにアクセスするとtest_scriptというコンポーネントを呼び出すようにしてみた。
test_script内で今回のチュートリアルの内容を書いていきたいと思う。

#5. templateの記述
```test.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="addRed">Red</button>
    <button v-on:click="addBlue">Blue</button>
    <button v-on:click="addBrown">Brown</button>
    <form>
      <p>color name: {{newColor}}</p>
      <p>input: <input type="text" v-model="newColor" v-on:input="updateNewColor($event.target.value)"> <button v-on:click="addColor">追加</button>
      </p>
    </form>
    <div class="color-list">
      <button v-on:click="deleteColor">チェック済み削除</button>
      <label class="color-list-item" v-for="color in colors" v-bind:class="{'checked':color.checked}">
        <p>
          <input type="checkbox" v-model="color.checked">
          <button @click="color.editing = !color.editing">EDIT</button>
          <span v-if="color.editing"> <input type="text" v-model="color.text" @keyup.enter="color.editing = !color.editing"></input> </span>
          <span v-else>{{color.text}}</span>
          <label v-if="color.checked">(チェック済み)</label>
        </p>
      </label>
    </div>
  </div>
</template>
```

1行ずつ簡単に説明していく。
1)vueファイルには\<template>と\<script>と\<style>を書く必要がある。まずその\<template>を書いてみた。
2,3)class名が"hello"のdivを作り、msgという名前のデータを表示させる。データの中身はあとで\<script>にて記述する。
4~6)ボタンを三つ配置し、それぞれ押された時に関数であるaddRedやaddBlueが呼ばれるようにした。この内容もあとで\<script>で記述
7~11)フォームやボタンを置いた。フォームに文字が入力されるたびにupdateNewColorが呼び出されnewColorにその値が代入される。送信ボタンを押すとaddColorが呼び出される。
12~14)チェック済み削除が押されるとdeleteColorが呼び出されるようにした。また、v-forを使い、colorsという名前の配列を一つずつ呼び出し表示させている。colorsには３つのプロパティがあり、「text」と「checked」と「editing」である。それぞれの定義はあとで\<script>で記述する。colorsの要素であるcolorのcheckedがtrueであれば、classをcheckedにして\<style>で定義したスタイリングをするようにした。
15~)チェックボックスはcolor.checkedにバインディングし、EDITボタンはcolor.editingを反転させる仕組みにした。その下でcolor.editingの内容に応じてフォームにするのかテキスト表示にするのかをif文で切り替えて表示させている。またcolor.checkedがtrueだと(チェック済み）という表記が出るようにした。


#6. scriptの記述

```test.vue

<script>
export default {
  name: 'test_script',
  data () {
    return {
      msg: 'Choose your color',
      colors : [
      ] ,
      newColor : ""
    }
  },
  methods : {
    addRed : function(event){
      this.colors.push({
        text:"Red" ,
        checked:false ,
        editing : false
      })
    } ,
    addBlue : function(event){
      this.colors.push({
        text:"Blue" ,
        checked:false ,
        editing : false
      })
    } ,
    addBrown : function(event){
      this.colors.push({
        text:"Brown" ,
        checked:false ,
        editing : false
      })
    },
    addColor: function (event) {
      let text = this.newColor && this.newColor.trim()
      if (!text){
        return
      }

      this.colors.push({
        text:text ,
        checked:false,
        editing : false
      })

      this.newColor = ""
    },
    deleteColor: function (event) {
      for (let i = this.colors.length - 1; i >= 0; i--) {
        if (this.colors[i].checked) this.colors.splice(i, 1)
      }
    },
    updateNewColor: function(value){

      this.newColor = value
    }

  }

}
</script>
```

さて、templateの中で出てきたデータや関数は全てここで定義する。
dataの中に、msg,colors,ndwColorの変数を記述した。
methodsの中に、add\*\*\*やdeleteColor、updateNewColorを記述した。add\*\*\*についてはcolorsにデータをプッシュする記述がされている。deleteColorはcheckedがtrueのものを全て削除する記述を書いた。最後に、updateNewColorは引数で入ってきた文字列をnewColorに代入する処理を書いた。
ちなみにデータバインディングしているのだからupdateNewColorをわざわざ書くつもりはないように思えるが、日本語などは入力が終わるまでバインディングが行われないため見た目的に良くない感じになる。そこで入力が行われるたびにその内容をデータに代入した方がリアルタイム性が上がる。

#7.styleの記述

```test.vue
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .checked { color: red; }
</style>
```
最後にcheckedクラスを定義して終了。

#8.感想
他のwebフレームワークはチュートリアルで挫折したが、vueはそれらに比べて簡単で使いやすいと思った。