はじめに
こんばんは。
3post目です。しょっぱい記事ですが、自分の勉強のためにやってるから別にいいや。
Vue.jsってコード見たりサンプルみたりは比較的やってたのですが、自分で書いたことなかったんで、公式のサイトでチュートリアル的なの触ってみようと思いました。
まずはこちらのはじめにページをやってみる。
やってみた
1. 宣言的レンダリング
<div id="app"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Vueやってみたよ。' } }); </script>
consoleで値を変更すると、HTML内のmessageの文字列も変わるのが気持ちいい。
2. 属性をバインディングする(v-bind)
<div id="app"> <span v-bind:data_name="message">Kojirock!!</span> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { message: "kojirock" } }); </script>
すばらしい。属性をバインディングするってこういうことか。
3. 条件分岐(v-if, v-else)
<div id="app"> <span v-if="is_sleep">寝てますよ</span> <span v-else>寝てませんよ！！！</span> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { is_sleep: true } }); </script>
if - else文も問題なし
v-else-ifもあるみたいだけど、ココまで来たらなんとなく想像つくから抜かした。
4. ループ(v-for)
<div id="app"> <div v-for="album in album_list"> <p>{{ album.title }}</p> <ol> <li v-for="music in album.music_list">{{ music.name }}</li> </ol> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { album_list: [ { title: 'I co Y', music_list: [ { name: "ソーダ" }, { name: "ふっかつのじゅもん" }, { name: "リグレット" } ] }, { title: 'そりゃ弾けなくて', music_list: [ { name: "ゾンビの祭り" }, { name: "人間の歌" }, { name: "世界平和ロックンロール" } ] }, { title: 'DANCEABLE', music_list: [ { name: "Oh Yeah" }, { name: "Crazy Dancer" }, { name: "By My Side" } ] }, { title: 'thread', music_list: [ { name: "Jungles" }, { name: "その向こうへ" }, { name: "hammer ska" } ] } ] } }); </script>
入れ子ループも問題なかった！！
5. ユーザー入力の制御(v-on)
<div id="app"> <p>{{ message }}</p> <button v-on:click="changeMessage">占い実行</button> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { message: "当たるかな？" }, methods: { changeMessage: function() { var result = Math.floor(Math.random() * Math.floor(2)); if (result === 1) { this.message = "おみごと！あたり" } else { this.message = "残念！はずれ" } } } }); </script>
onclickがbuttonタグにセットされていると思いきや、buttonタグはなにもセットされてなかった。おもしろい
6. 双方向バインディング(v-model)
<div id="app"> <p>{{ message }}</p> <input v-model="message"> <p>{{ message_2 }}</p> <select v-model="message_2"> <option value="test_select_1">テストセレクト1</option> <option value="test_select_2">テストセレクト2</option> </select> <p>{{ message_3 }}</p> <input type="radio" v-model="message_3" value="test_radio_1">テストラジオ1<br /> <input type="radio" v-model="message_3" value="test_radio_2">テストラジオ2<br /> <p>{{ message_4 }}</p> <input type="checkbox" v-on:click="changeMessage" value="test_check_1">テストチェックボックス1<br /> <input type="checkbox" v-on:click="changeMessage" value="test_check_2">テストチェックボックス2<br /> <input type="checkbox" v-on:click="changeMessage" value="test_check_3">テストチェックボックス3<br /> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { message: "テストだよ", message_2: "テストだよ2", message_3: "テストだよ3", message_4: "テストだよ4", message_4_origin: "テストだよ4", }, methods: { changeMessage: function(e) { if (e.target.checked === true) { this.message_4 = e.target.value; } else { this.message_4 = this.message_4_origin; } } } }); </script>
input以外にも色々やってみました。(checkboxはそのままではできなかった)
7. コンポーネント
<div id="app"> <p>{{ message }}</p> <div> <ol> <biography-item v-for="biography in biography_list" v-bind:item="biography"></biography-item> </ol> </div> </div> <script type="text/javascript"> Vue.component('biography-item', { props: ['item'], template: "<li>{{ item.name }}</li>" }); var app = new Vue({ el: "#app", data: { message: "クラプトンバンド遍歴", biography_list: [ { name: "ヤードバーズ" }, { name: "ブルースブレイカーズ" }, { name: "クリーム" }, { name: "ブラインド・フェイス" }, { name: "デレク・アンド・ザ・ドミノス" } ] } }); </script>
こんな感じ。
公式サイトに乗せてくれていた、この画像がわかりやすかった。
つまりこういった、コンポーネント郡をいっぱい作って、組み合わせてサイトを構築していくという感じのようだ。
おわりに
しょっぱいけどココまで。
せっかく最初のページをやってみたから、続けて次のページからもやってみようとおもいます。
ReactNative少しだけやったので、Reactもやりたいんですが、そっちは仕事できそうなのでもう少し後から素振り開始しても良いかなと。
それよりも勢いのあるvueをやってみたかったので、今回は勉強になりました。
おわり。
