0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue.js】各種プロパティについて

Posted at

はじめに

前日からの続きで、月曜からの新規プロジェクトへアサイン前に、引き続き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>

文字反転イメージ

文字反転.gif

こんな感じで文字反転を実装する事ができました。
{{ 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>

イメージ

カウントアップ.gif

座標.gif

こんな感じで動かす事ができるようになりました。
もっとじっくりと確認しながらどのような動きをするのか把握できるようになれたらいいなと感じてます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?