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>
{{counter}}
+1{{lessThanThree}}
watch:{
counter:function(){
var vm=this;
setTimeout(function(){
vm.counter=0
},3000)
}