Vue.js 基礎 [クリックイベント/データバインド]

- 2月 03, 2019

Vue.js 基礎 [クリックイベント/データバインド]:

Vue.jsが気になっていたので、猫本を買ってきました。

しばらく自分のOUTPUTに記事を書いてこうと思います。

クリックイベントとデータバインド

hoge.js

var app = new Vue({ 
    el: '#app', 
    data: { 
        show :true, 
        message :'HelloWorld!!', 
    }, 
    methods: { 
        handleClick: function(event) { 
            if( app.show == false) 
            { 
                app.show = true; 
            } 
            else 
            { 
                app.show = false; 
            } 
        } 
    } 
})

hoge.html

<div> 
    <p v-if="show">{{message}}</p> 
    <input v-if="show" v-model="message"> 
    <button v-on:click="handleClick">button</button> 
</div>

理解

divタグのid"app"と、jsの"#app"が紐づく
dataはモデル、これがバインドされる
methodsはイベント、ここにクリックイベントとか書くらしい

ボタンを押すとラベルと入力フォームが消えたり表示されたりします。

入力フォームの値が、ラベルにバインドされているのでリアルタイムで連動します。

バインドがWPFのMVVMよりわかりやすくてとても良い。

コメント