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

「テキストにバインドする。」| Bind to text.

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

あなたもバインドさせてみよう！（文字を変えてみよう）| Let's bind you too! (Let's change the letters)

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

HTML

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

　　

JavaScript

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

「属性にバインドする。| Bind to an attribute. 」

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

あなたもバインドさせてみよう！（文字を変えてみよう）| Let's bind you too! (Let's change the letters)

「F12」→「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)属性にバインドする。| Bind to the style attribute. 」

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

あなたもバインドさせてみよう！（文字の大きさを変えてみよう）| Let's bind you too! (Let's change the size of the characters)

　 「F12」→「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'
}
});

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー