Vue.jsを使ってHTMLのテキスト部分を書き換えてみよう。

バインド（バインディング）とはデータバインディングの略でデーターとテンプレート（HTML）の要素を紐づけることによって、データーの変更をテンプレート側に自動で反映する仕組みのこと。

テキストにバインドする

書式：{{プロパティ名}}

下記のプログラムを書いたらバインドさせて、文字を変えてみよう

　　　　　

コンソールからの確認、変更方法

「console」→「app.message = ‘好きな文字’」を入力 →　ENTER 　　　　

messageの部分が変わると思います

HTML

<div id=”app”>
<p>{{message}}</p>
</div>

　　

JavaScript

var app = new Vue({
el:’#app’,
data:{
message:’HELLO Vue.js!!’
}
});

属性にバインドする

書式：<要素名　v-bind:属性名=”プロパティ名”>

バインドさせて文字を変えてみよう

　　　

コンソールからの確認、変更方法

「console」→「app2.message = ‘好きな文字’」を入力 →　ENTER

HTML

<div id=”app2″>
<input type=”text” v-bind:value=”message”>
</div>

JavaScript

var app2 = new Vue({
el:’#app2′,
data:{
message:’see you！’
}
});

スタイル(style)属性にバインドする

書式：<要素名　v-bind:style=”{cssのプロパティ名（キャメルケース書式で）：アプリケーションのプロパティ名”>

あなたもバインドさせて文字の大きさを変えてみよう

　 　　　

コンソールからの確認、変更方法

「console」→「app3.pSize = ‘(数字）px’」を入力 →　ENTER

HTML

<div id=”app3″>
<p v-bind:style=”{fontSize: pSize}”>文字サイズは{{pSize}}です</p>
</div>

JavaScript

var app3 = new Vue({
el:’#app3′,
data:{
pSize:’30px’
}
});

わからないことはプロフェッショナルから学ぶのが一番