Vue.js 構文

#Vue.jsスクリプトタグの記載


```html
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>    
</body>
```

#id属性とバインド
`id="app"`にVueインスタンスの`el:'#app'`がバインド
` {{ message }}`へ` data:{message:'Hello'}`が表示される。

```html
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'Hello'
            }
        })
    
    </script>
</body>
```


#v-forでデータをループする

```html:
    <div id="app">
        <ul>
            <li v-for="person in persons">
                {{ person.name }}{{ person.age }}
            </li>
        </ul>

    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                persons:[{
                    name:'田中',
                    age:25,
                },
                {
                    name:'中田',
                    age:28,
                },
                {
                    name:'山田',
                    age:32,
                }]
            }
        })
    
    </script>
```


#イベント発生時の関数実行する

```html
    <div id="app">
        <div>{{ counter }}</div>
        <div>
            <button v-on:click="increment">ボタン</button>  //v-onを@clickで省略可
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                increment: function(){
                    this.counter++;  //thisはVueインスタンスの中
            }
        })
```


#v-bindで動的に変化させる(1)
ボタンで動的にリンク先を変更する

```html
    <div id="app">
        <a v-bind:href="url">リンクはこちら</a>
        <div>
            <button @click="yahoo">yahoo</button>
            <button @click="google">google</button>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                url: ''
            },
            methods: {
                yahoo: function(){
                    this.url= 'https://www.yahoo.co.jp/';
                },
                google: function(){
                    this.url= 'https://www.google.com/?hl=ja';
                }
            }
        })
    </script>
```

#v-bindで動的に変化させる(2)
ボタンで動的にclassを変更させる

```html
    <style>
        .warning{
            background-color: red;
        }
    </style>
<body>
    <div id="app">
        <a v-bind:class="{ warning: isActive }">こちら</a>
        <a v-bind:class="styleObj">こちら</a>
        <div>
            <button @click="switch">カラー変更</button>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                isActive: false,
                styleObj: {
                    warning: false
                }
            },
            methods: {
                switch: function(){
                    this.isActive = !this.isActive;
                    this.styleObj.warning = !this.styleObj.warning;
                }
            }
        })
    </script>
```


#v-ifで条件付きレンダリング

```html
    <div id="app">
        <input v-if="formtype === 'user'" type="text" placeholder="ユーザー">
        <input v-else-if="formtype === 'password'" type="text" placeholder="パスワード">
        <input v-else type="text" placeholder="その他">
        <button @click="chenge">切り替え</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                formtype: 'user',
            },
            methods: {
                chenge: function(){
                    this.formtype = !this.formtype;
                }
            }
        })
    </script>
```

#v-showで条件付きレンダリング

```html
    <div id="app">
        <input v-show="formtype === 'user'" type="text" placeholder="ユーザー">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                formtype: 'user',
            },
        })
    </script>
```

#v-ifとv-showの使い分け
`v-if`は処理が重くなる。`v-show`は最初の処理は重いが、再描画時に軽くなる。
条件実行時、変更することがほとんどない場合は`v-if`。
頻繁に切り替える場合は`v-show`。


#入力フォームバインディング

```html
    <div id="app">
        <input v-model="user" type="text"> 　　//textのバインディング
        <div>{{ user }}</div>
        <textarea v-model="etc"></textarea> 　　//textareaのバインディング
        <pre>{{ etc }}</pre>
        <input type="checkbox" v-model="agree" value="音楽">音楽<br> 　　//checkboxのバインディング
        <input type="checkbox" v-model="agree" value="スポーツ">スポーツ<br>
        <input type="checkbox" v-model="agree" value="映画">映画<br>
        <div>{{ agree }}</div>
        <input type="radio" v-model="hobby" value="音楽">音楽<br> 　　//radioのバンディング
        <input type="radio" v-model="hobby" value="スポーツ">スポーツ<br>
        <input type="radio" v-model="hobby" value="映画">映画<br>
        <div>{{ hobby }}</div>
        <select v-model="selected">　　 //selectのバインディング
            <option v-for="friend in friends" :value="friend.name">{{ friend.name }}</option>
        </select>
        <div>{{ selected }}</div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                user: '',
                etc: '',
                agree: [],
                hobby: '',
                selected: '',
                friends: [
                    {
                        id: 1,
                        name: '吉田'
                    },
                    {
                        id: 2,
                        name: '川口'
                    },
                    {
                        id: 3,
                        name: '木村'
                    },
                ],
            }
        })
    </script>
```

#props

propsを書き換える

変更前

```javascript:
 <static-info
      class="mb-4"
      :url="localePath('/flow')"
      :text="$t('自分や家族の症状に不安や心配があればまずは電話相談をどうぞ')"
      :btn-text="$t('相談の手順を見る')"
 />
```

変更後

```javascript
<static-info class="mb-4" v-bind="staticItem" />

 const staticItem = (url, text, btnText) => {
      return {
        url: localePath('/flow'),
        text: this.$t('自分や家族の症状に不安や心配があればまずは電話相談をどうぞ'),
        btnText: this.$t('相談の手順を見る')
      }
    }
```