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で引数として受け取って処理すると、
画面サイズによってモノを表示する、しないといった処理ができるようだ。