Vueテンプレート構文
code:vue.html
<div id="app">
<p>現在{{ number }}回クリックされているよ</p>
<button v-on:click="countUp(3)">カウントアップ</button>
<p v-on:mousemove="changeMousePosition($event, 10)">マウスを載せてください</p>
<p>X: {{x}}, Y: {{y}}</p>
</div>
code:vue.js
new Vue({
el: "#app",
data: {
number: 0,
x: 0,
y: 0
},
methods: {
countUp: function(times){
this.number += 1 * times;
},
changeMousePosition: function(event, divideNumber){
this.x = event.clientX / divideNumber;
this.y = event.clientY / divideNumber;
}
}
})
JSfidle作業中
code:js.js
<div id="app">
<input type="text" v-model="message">
<h1>{{ message }}</h1>
</div>
動的なデータを表現する
code:vue.js
<div id="app">
<p>{{ counter }}</p>
<button @click="counter += 1">+1</button> //クリックイベント
<p>{{ lessThanThree }}</p>
</div>
new Vue({
el: '#app',
data: {
counter: 0
},
computed: {
lessThanThree: function(){
return this.counter > 3 ? '3以上' : '3以下'
}
}
})
dataはあくまでも初期値を入れるだけ、動的に使いたいならcomputed:を使う
computedとmethodsは同じ働きをするが、methodsは何かの処理をするもの(例:Clickイベントに対応する処理など)。
methodsは関係ない値でもページが変わると、methodsも変化してしまうから非常に使いづらい。
ウォッチャとは?→特定のデータが変わったときの処理をする
非同期で処理をするときに使う。