Vue.jsの基礎を思いだす

備忘録をかねて視覚的にわかりやすいようにVue.jsの動きをまとめていきたいと思います。

今回はMDNを使用しています。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>

対象読者様

・Vue.jsを学び始める方
・Vue.jsを学んでいるけど、「あれここどうなってたっけ？」気分の方
・Vue.jsを学んだが、忘れてしまったので、即思い出したい方。

htmlとjs間のデータの受け渡しに関して

v-bind

aタグのhref属性をVueインスタンスのdataから引っ張りたい時

    <div id="app">
        <a v-bind:href="url">Google</a>
    </div>

    省略記法
    <a :href="url">Google</a>

js側


new Vue({
	el:'#app',
	data: {
        url: 'https://google.com',
  },
})

v-bind応用(オブジェクトを渡す)

以下のように書きます。


    <div id="app">
        <a v-bind="{ href: 'https://google.com',id: 32}">Google</a>
    </div>

こんな風に色々渡したい時はVueインスタンスのデータにオブジェクトごと保持して簡潔にかけます。

new Vue({
	el:'#app',
	data: {
        googoleObj: { //これを渡したい場合
            href: 'https://google.com',
            id: 32,
        },
  },
})

html


    <div id="app">
        <a v-bind="googoleObj">Google</a>
    </div>

v-onとイベントオブジェクト

マウスカーソルに合わせてマウスの位置を表示させるようなコードを書いてみようと思います。

    <div id="app">
        <p v-on:mousemove="mousePosition">マウスを乗せてください</p>
        <p>X: {{x}} Y:{{y}}</p> //表示領域 {{}}内はJavascript構文が適用できることに注意(着目)
    </div>

    mousePositionメソッドをjs側で作ります

new Vue({
	el:'#app',
	data: {
        x:0,
        y:0,
  },
  methods: {
    mousePosition(event) {
        console.log(event)//ここでeventオブジェクトの様々なプロパティをコンソールで確認できます。
        //自インスタンスのデータにアクセスするにはthisを使います    
        this.x = event.clientX
        this.y = event.clientY
        //clientXYというのは下記のコンソール画面に見られるようなeventオブジェクトのプロパティの一つです
    }
  }
})

v-onでeventオブジェクトの他に引数を渡したい時の表現方法

x, yを割り算してその値を出力したい！といった場合の記述方法を紹介します

html側に特徴があります。「$event」というものを使って、あとは好きな引数をポンポン入れていきます。

    <div id="app">
        <p v-on:mousemove="mousePosition($event, 10)">マウスを乗せてください</p>
        <p>X: {{x}} Y:{{y}}</p>
    </div>

new Vue({
	el:'#app',
	data: {
        x:0,
        y:0,
  },
  methods: {
    mousePosition(event, divide) { //ここに新たな引数追加。
        console.log(event, divide) 
        this.x = event.clientX / divide
        this.y = event.clientY / divide
    }
  }
})

終わりに

続きます(笑)

【保存版】Vue.jsの基礎、テンプレート構文 v-bind、v-on