shie2’s diary

仕事とかエフェクターとかもろもろのために

Vue.jsを使ってみた。ていうか使いたいから勉強中

先に今回作ったソース

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
   <meta charset="UTF-8">
   <title>vue_test</title>
</head>
<body>
    <div id="app">
    <!-- 1 -->
        <p>{{message}}</p>
        <!-- 2 -->
        <div>{{aaa}}</div>
        <!-- 3 -->
        <button class="btn" v-on:click="btnClick">ボタン</button>

    </div>
    <!-- 4 -->
    <script src="https://unpkg.com/vue"></script>
    <script>JSが入る
   </script>
</body>
</html>

JS

// 5
var testViewModel = new Vue({
    //6
    el: '#app',    
    //7
    data: {
        //8
        message: 'テストテスト',
        aaa:'123456789'
    },
    //9
    methods:{
        //10
        btnClick:function(){
            this.aaa = 'qwerr';
            this.message='asdfghhj';
        }
    }
})
// end testViewModel

処理の流れ

初期表示時の動き

  • //6で指定したDOMに対して操作することにするよ～
    この場合はIDがappっていうDivやね。
  • //7で指定したdataの中のkeyを{{key}}といれかえるよ。
    この場合は{{message}}をテストテストに入れ替える。

これで、初期表示は終了

クリックイベント

クリックイベントを登録したいやつにv-n:clickを入れておく

<button class="btn" v-on:click="btnClick">ボタン</button>

これです。

v-on:click：VueのイベントにこのDomのclickイベントを登録するよ～
btnClick：クリックしたときにmethodsのbtnClickっていう関数を実行してね～

です！！！

以上！

大変だ！ Jqueryに戻りたい(泣)