vueの勉強し直し

Javascriptのフレームワーク「vue.js」について書いていきます。

まずは Hello World

<div id="app">{{ message }}</div>

vue

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello World'
    }
})

変数を

{{}}

で囲むことでHTMLとして表示することができます。

双方向データバインディング

vueと言ったらこれが最初に思い浮かびました。

初めて実装したときは感動しました。

<div id="app">
    <p>{{ inputText }}</p>
    <input v-model="inputText">
</div>

vue

const app = new Vue ({
    el: '#app',
    data: {
        inputText: ''
    }
})

テキストフィールドで入力した文字がリアルタイムでテキストとして反映されます。

メソッドも追加できます

<div id="app">
    <p>{{ count }} 回クリックされました！</p>
    <button v-on:click="counter">押してね</button>
</div>

vue

const app = new Vue ({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        counter: function(){
            this.count++
        }
    }
})

vanillaや、jQueryのようにclickなどのイベントのメソッドも設定することがでいます。

<button @click="counter">押してね</button>

と書き換えることができます。