Vue.js触ってみた(はじめに) - もがき系プログラマの日常

はじめに

こんばんは。

3post目です。しょっぱい記事ですが、自分の勉強のためにやってるから別にいいや。

Vue.jsってコード見たりサンプルみたりは比較的やってたのですが、自分で書いたことなかったんで、公式のサイトでチュートリアル的なの触ってみようと思いました。

まずはこちらのはじめにページをやってみる。

やってみた

1. 宣言的レンダリング

<div id="app">
  {{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Vueやってみたよ。'
  }
});
</script>

f:id:kojirooooocks:20180514011209p:plain

f:id:kojirooooocks:20180514011223g:plain

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>

f:id:kojirooooocks:20180514011249p:plain

すばらしい。属性をバインディングするってこういうことか。

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>

f:id:kojirooooocks:20180514011316p:plain

f:id:kojirooooocks:20180514011328p:plain

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>

f:id:kojirooooocks:20180514011342p:plain

入れ子ループも問題なかった！！

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>

f:id:kojirooooocks:20180514011402g:plain

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>

f:id:kojirooooocks:20180514011429g:plain

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>