vuejsテンプレート構文

#v-bind
v-bind:href="url"
:href="url"でも可能

#attribute
attribute:'href'と書いた後に
:[attribute]="url"で動的にhrefを作れる

#v-bindでobjectをひもづける
```
<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <a v-bind="twitterObject">twitter</a>
    </div>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                twitterObject:{
                    href:'https://twitter.com',
                    id:31
                }
            }
        })
    </script>
</body>

```
#v-onで関数をひもづける
```


<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp()">カウントアップ</button>
    </div>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0
            },
            methods:{
                countUp:function(){
                    this.number+=1
                }
            }
        })
    </script>
</body>
```
#v-on:mousemove
```
<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition">マウスを乗せてください</p>
        <p>X:{{x}},Y:{{y}}</p>
    </div>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                x:0,
                y:0
            },
            methods:{
                countUp:function(){
                    this.number+=1
                },
                changeMousePosition:function(event){
                    this.x=event.clientX;
                    this.y=event.clientY;
                }
            }
        })
    </script>
</body>
```
#$event
```
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition($event,2)">マウスを乗せてください</p>
        <p>X:{{x}},Y:{{y}}</p>
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp(3)">カウントアップ</button>
    </div>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0,
                x:0,
                y:0,
            },
            methods:{
                countUp:function(times){
                    this.number+=1*times
                },
                changeMousePosition:function(event,divide){
                    this.x=event.clientX / divide;
                    this.y=event.clientY / divide;
                }
            }
        })
    </script>
</body>
```
#event.clientX
```
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition($event,2)">マウスを乗せてください
        <span v-on:mousemove="noEvent">反応しないでください</span>
        </p>
        <p>X:{{x}},Y:{{y}}</p>
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp(3)">カウントアップ</button>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0,
                x:0,
                y:0,
            },
            methods:{
                countUp:function(times){
                    this.number+=1*times
                },
                changeMousePosition:function(event,divide){
                    this.x=event.clientX / divide;
                    this.y=event.clientY / divide;
                },
                noEvent:function(event){
                    event.stopPropagation()
                }
            }
        })
    </script>
</body>
```
#noevent
```
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition($event,2)">マウスを乗せてください
        <span v-on:mousemove.stop="">反応しないでください</span>
        </p>
        <p>X:{{x}},Y:{{y}}</p>
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp(3)">カウントアップ</button>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0,
                x:0,
                y:0,
            },
            methods:{
                countUp:function(times){
                    this.number+=1*times
                },
                changeMousePosition:function(event,divide){
                    this.x=event.clientX / divide;
                    this.y=event.clientY / divide;
                },
            }
        })
    </script>
</body>
```

```
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition($event,2)">マウスを乗せてください
        <span v-on:mousemove.stop="">反応しないでください</span>
        </p>
        <p>X:{{x}},Y:{{y}}</p>
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp(3)">カウントアップ</button>
        <a v-on:click="noEvent" href="https://google.com">google</a>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0,
                x:0,
                y:0,
            },
            methods:{
                countUp:function(times){
                    this.number+=1*times
                },
                changeMousePosition:function(event,divide){
                    this.x=event.clientX / divide;
                    this.y=event.clientY / divide;
                },
                noEvent:function(event){
                    event.preventDefault();
                }
            }
        })
    </script>
</body>
```


```
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition($event,2)">マウスを乗せてください
        <span v-on:mousemove.stop="">反応しないでください</span>
        </p>
        <p>X:{{x}},Y:{{y}}</p>
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp(3)">カウントアップ</button>
        <a v-on:click="noEvent" href="https://google.com">google</a>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0,
                x:0,
                y:0,
            },
            methods:{
                countUp:function(times){
                    this.number+=1*times
                },
                changeMousePosition:function(event,divide){
                    this.x=event.clientX / divide;
                    this.y=event.clientY / divide;
                },
                noEvent:function(event){
                    event.preventDefault();
                }
            }
        })
    </script>
</body>
```
```
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-on:mousemove="changeMousePosition($event,2)">マウスを乗せてください
        <span v-on:mousemove.stop="">反応しないでください</span>
        </p>
        <p>X:{{x}},Y:{{y}}</p>
        <p>現在{{number}}回クリックされています</p>
        <button v-on:click="countUp(3)">カウントアップ</button>
        <a v-on:click.prevent="" href="https://google.com">google</a>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                number:0,
                x:0,
                y:0,
            },
            methods:{
                countUp:function(times){
                    this.number+=1*times
                },
                changeMousePosition:function(event,divide){
                    this.x=event.clientX / divide;
                    this.y=event.clientY / divide;
                },
            }
        })
    </script>
</body>
```
```

<input type="text" v-on:keyup="myAlert">

<input type="text" v-on:keyup.enter="myAlert">

<button v-on:[event]="countUp">カウントアップ</button>
data:{
                number:0,
                event:'click'
            },

<button @[event]="countUp">カウントアップ</button>

<input type="text" v-model="message">
        <h1>{{message}}</h1>

```
<div id="app">
        <p>{{counter}}</p>
        <button @click="counter+=1">+1</button>
        <p>{{lessThanThree}}</p>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                counter:0,
            },
            computed:{
                lessThanThree:function(){
                    return this.counter>3? '3より上': '3以下'
                }
            }
        })
    </script>
```

watch:{
                counter:function(){
                    var vm=this;
                    setTimeout(function(){
                        vm.counter=0
                    },3000)
                }


<div id="app">
        <h1 :class="classObject">hello</h1>
        <button @click="isActive=!isActive">切り替え</button>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                isActive:true
            },
            computed:{
                classObject:function(){
                    return {
                        red:this.isActive,
                        'bg-blue':!this.isActive
                    }
                }
            }
        })
    </script>

<div id="app">
        <h1 :style="[styleObject,baseStyles]">hello</h1>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                styleObject:{
                    color:'red',
                    'background-color':'blue'
                },
                baseStyles:{
                    fontSize:'60px'
                }
            },
        })
    </script>