Web竜の巣

知ってることを、知ってるだけ。

Vue.js講義記録2

引き続き今日もやっていこうと思う。
Steamでゲームを買ってしまったのでペースは落ちるかもしれないけれど。
サマーセール万歳だ。

とりあえず、枠組みだけ。
あとで下にテキストを貼り付けていく形にする。

タイトルの付け方

<div id="app">
    <div v-bind:title="one + ' ' + two">title test</div>
</div>
<script>
new Vue({
    el:'#app',
    data:{
      one:'one',
      two:'two',
    }
})
</script>

タイトルをつけるやり方になる。
小難しいことはあまりない。
どちらかというと、v-bindプロパティの中では簡易な式もかける、のがメイン。

ボタンを動かそう

<div id="app">
    <button v-on:click="buttonAct">Click</button>
</div>
<script>
new Vue({
    el:'#app',
    methods:{
        buttonAct: function(){
            alert("button now")
        }
    }
})
</script>

ボタンの動かし方。 v-on:プロパティの後に動作、
その後動かすメソッド名を記述する。 v-on:chenge="workMethod"
のような書き方になるようだ。

eventを使ってみよう

<div id="app">
    <button v-on:click="buttonAct("click msg",$event)>Click</button>
</div>
<script>
new Vue({
    el:'#app',
    methods:{
        buttonAct: function(message,event){
            console.log(event);
            alert(message);
        }
    }
})
</script>

$event でクリックされた際の座標や、スクロールの幅等を取得することができる。
これをfunctionで引数として受け取って処理すると、 画面サイズによってモノを表示する、しないといった処理ができるようだ。