はじめに
前日からの続きで、月曜からの新規プロジェクトへアサイン前に、引き続きVue.jsについて勉強を進めていきました。
備忘録として、学んだコードを踏まえて補足等記載していきます。
HTMLファイルにscriptタグを記述して1ファイルで完結するようコードを作成しています。
HTMLファイルのフォーマットは前回やったので、こちらをご確認ください。
入力文字の反転
最初はv-onを使って入力した文字を反転する簡単のボタンを設置しました。
html
<div id="app">
<p> {{ message }} </p>
<p v-text=message></p>
<p v-once> {{ message }} </p>
<button v-on:click="reverseMessage">メッセージ反転</button>
</div>
vue.js
<script>
var app = new Vue({
el: '#app',
data: {
message: 'いろはにほへと',
}
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
文字反転イメージ
こんな感じで文字反転を実装する事ができました。
{{ message }}
v-text=message
この2つは、記述方法は違いますが、意味は同じです。
もし記載内容を変更したくない場合、v-onceを使用する事で、反転しないようにすることができています。
event関連
ここでは、以下を実装しています。
- クリックしたら数字が上がっていくカウントアップのボタン
- 座標を取得する実装
- URLのリンクを遷移しないように処理を止める
- input内でenterを押したらポップアップ表示
以上を実装しました。
html
<div id="app2">
<p>現在{{ number }}回クリックしています</p>
<!-- カウントアップの操作 -->
<button v-on:click= "countUp(1)">カウントアップ</button>
<!-- マウスを載せている間の処理 -->
<p v-on:mousemove="changeMousePosition(3, $event)">この文字上でマウスを動かすと座標が動きます
<span v-on:mousemove.stop>【ここの要素はマウスを動かしても反応しない】</span></p>
<p>X軸:{{ x }},Y軸:{{ y }}</p>
<!-- .preventでURLへ遷移しないようにできる -->
<a v-on:click.prevent href="https://google.com">このGoogleリンクはpreventで無効</a>
<br>
<!-- キーアップを使う事でキーボード処理に介入できる -->
<p>⬇︎エンターを押したらポップアップ表示</p>
<input type="text" v-on:keyup.enter="myAlert">
</div>
vue.js
<script>
var app2 = new Vue({
el: '#app2',
data: {
number: 0,
x:0,
y:0
},
methods: {
countUp: function(times){
this.number += 1 * times
},
changeMousePosition: function(divideNumber,event) {
this.x = event.clientX;
this.y = event.clientY;
},
myAlert() {
alert('エンターを押下したら表示されるアラート');
}
}
})
</script>
イメージ
こんな感じで動かす事ができるようになりました。
もっとじっくりと確認しながらどのような動きをするのか把握できるようになれたらいいなと感じてます。