【Vue + vue-cli】Vueのデータバインディングまとめ
目次
今回は、Vueのデータバインディングについてまとめたいと思います。
DOM操作を基本とするVueにおいてデータのバインディング機能は必須の機能です。
かなり便利な機能でもあるので、必ず習得したいところです。
使用データについては下記記事と同じデータを使用します。
https://www.dailyupblog.com/web_development/742/
vue-cliを使用しています。
それではいきましょう。
データバインディングとは？
Vueでは扱うデータとDOMは関連づけられているため、データが更新されれば、それに伴い、DOMも変化します。
例えば、data()で定義したデータの値を更新した場合、DOMに表示させていた値はそれに伴い、変更されます。
この性質はテキストのみならず、要素の属性やスタイルにも適用されます。
これをデータバインディングといいます。
このデータバインディングを駆使することで、自分の思うままにDOMを操作することが可能になります。
テキストのデータバインディング
まずは基本的なテキストのデータバインディングです。
もっとも基本的なもので「“Mustache” 構文(2 重中括弧)」を使用して、DOM上にデータを表示させます。
今までの記事でも幾度となく登場しているため馴染み深いと思います。
以下に実装例を書いたので、ご参考ください。
「pages」フォルダのTop.vueを開いて下記を記述してください。
<template>
<main>
<div>
<p>{{ message }}</p>
<button @click="changeText()">クリックでテキスト変更</button>
</div>
</main>
</template>
<script>
export default {
data () {
return {
message: "Hellow World!!"
}
},
methods: {
changeText: function () {
this.message = "Well come to Vue world!!"
}
}
}
</script>
<style scoped>
main {
height: calc(100vh - 152px);
padding: 3% 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 34px;
font-weight: bold;
}
</style>上記の例はdata()でmessageデータを定義して、文字列「”Hellow World!!”」を格納し、messageデータをDOM上に表示させています。
そして、ボタンをクリックすることでchangeText()メソッドが発火し、messageデータの中身が「”Well come to Vue world!!”」に更新されています。
そうすると、DOMで表示させていた「”Hellow World!!”」が「”Well come to Vue world!!”」に変更されています。
VueではこのようにDOMとデータが関連付けられており、データが変われば、自動的にDOMも更新されるようにプログラムされています。
次は属性のバインディングをご紹介したいと思います。
属性のデータバインディング
前述の通り、Vueでは要素の属性のバインディングも可能です。
その場合「v-bind」を使用します。
使用例は下記の通りです。
Top.vueを開いて下記のように記述してください。
<template>
<main>
<div>
<p v-bind:title="message">{{ message }}</p>
<button @click="changeText()">クリックでテキスト変更</button>
</div>
</main>
</template>
<script>
export default {
data () {
return {
message: "Hellow World!!",
}
},
methods: {
changeText: function () {
this.message = "Well come to Vue world!!"
},
}
}
</script>
<style scoped>
main {
height: calc(100vh - 152px);
padding: 3% 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 34px;
font-weight: bold;
}
</style>上記、先程のテキストのデータバインディングの例に追記したものです。
pタグに「v-bind:title=”message”」を追記しました。
こうすると、ホバーでツールチップを表示させるtitle属性にv-bindを用いてmessageを表示させています。
ですので、ホバーすると「”Hellow World!!”」というツールチップが表示されるはずです。
その後、ボタンをクリックして、messageデータを「”Well come to Vue world!!”」に更新しますと、title属性もv-bindでmessageと連動しているため、ホバーすると「”Well come to Vue world!!”」のツールチップが表示されるはずです。
このようにv-bindは、対象の要素に「v-bind:属性名=”データ名”」で記述します。
ちなみにv-bindは省略が可能で、「:属性名=”データ名”」という書き方もできます。
上記の例だと、省略すると以下のようになります。
<p :title="message">{{ message }}</p>classやid、styleについてもこのv-bindを用いることで、バインディングが可能です。
動的にclassやid、cssスタイルを変更させたい時に非常に便利です。
以上が、属性のデータバインディングです。
入力のデータバインディング
inputなどに入力されているvalueをバインディングする場合は「v-model」を使用します。
以前の記事でも何度かご紹介しましたが、inputに入力した値を表示する場面などでも使えるので、とても便利です。
以下、使用例です。
Top.vueを開いて、下記のように入力してください。
<template>
<main>
<div>
<input v-model="input" type="text" />
<p>
<span>入力された値：</span>
{{ input }}
</p>
</div>
</main>
</template>
<script>
export default {
data () {
return {
input: "",
}
},
}
</script>
<style scoped>
main {
height: calc(100vh - 152px);
padding: 3% 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 34px;
font-weight: bold;
}
p span {
font-size: 16px;
}
</style>上記のようにinputタグに「v-model=”input”」のように設定すると、フォームに入力されたとinputデータの値が連動するようになります。
つまり、入力された値がそのまま、inputデータに代入されます。
データが更新されれば、即座にDOMにも反映がされるため、上記例のようにinputデータをpタグで表示させるようにすると、ここにフォームに入力した値が即座に表示されるようになります。
v-modelは「v-model=”データ名”」のように記述します。
Vueにおいて、v-bindやv-modelのような「v-」で始まる属性のことをディレクティブといいます。
次はその他の便利なディレクティブをご紹介します。
その他のディレクティブ
v-on
v-onはイベントハンドリングのディレクティブです。
イベントを発火させたい時に使用します。
下記使用例です。
Top.vueを開いて、下記を入力してください。
<template>
<main>
<div>
<p>{{ message }}</p>
<button v-on:click="showText()">テキストを表示</button>
</div>
</main>
</template>
<script>
export default {
data () {
return {
message: "",
}
},
methods: {
showText: function () {
this.message = "Hello World";
}
}
}
</script>
<style scoped>
main {
height: calc(100vh - 152px);
padding: 3% 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 34px;
font-weight: bold;
}
</style>お馴染みのイベントハンドリングですね。
「v-on:イベント名=”処理（関数名）”」という形で記述します。
「v-on」は省略可能で、省略形は「@イベント名=”処理（関数名）”」になります。
上記例を省略形で書くと下記のようになります。
<button @click="showText()">テキストを表示</button>v-for
要素のループ処理を書きたい場合に使用します。
例えば、ul要素内に必要数のli要素を自動生成したい場合などに非常に便利です。
下記使用例です。
Top.vueに以下のように記述してください。
<template>
<main>
<div>
<ul>
<li v-for="item in fruits" :key="item.id">{{ item.name }} {{ item.price }}円</li>
</ul>
</div>
</main>
</template>
<script>
export default {
data () {
return {
fruits: [
{ id: 1, name: "りんご", price: 50 },
{ id: 2, name: "バナナ", price: 80 },
{ id: 3, name: "キウイ", price: 50 },
{ id: 4, name: "みかん", price: 20 },
]
}
},
}
</script>
<style scoped>
main {
height: calc(100vh - 152px);
padding: 3% 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
</style>上記は、dataに設定したfruitsオブジェクトの内容を、v-forを用いて表示する例です。
v-forを使用する場合は「v-for=”任意の変数名 in データ名（配列名）”」で配列のデータをループで表示させることが可能です。
ここでいう任意の変数名というのは配列から取り出したデータを一時的に格納する変数の名前です。
ちなみにv-forでこのようにデータを順に表示させるときなどはv-bindでkey属性を指定する必要があります。
今回は各果物に「id」を指定しているので、これをkeyとしています。
v-if
v-ifは条件分岐で、要素を表示・削除する際に使用します。
下記、使用例です。
Top.vueを開いて下記を記述してください。
<template>
<main>
<div>
<p v-if="display">Hello World</p>
<button @click="showText()">要素を表示します。</button>
</div>
</main>
</template>
<script>
export default {
data () {
return {
display: false
}
},
methods: {
showText: function () {
this.display = true
}
}
}
</script>
<style scoped>
main {
height: calc(100vh - 152px);
padding: 3% 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 34px;
font-weight: bold;
}
</style>上記例も、ボタンクリックでテキストを表示する例ですが、こちらは「v-if」を用いて、displayデータの値がtrueだったら表示するという挙動にしています。
「v-if=”条件”」の記述で、条件分岐が可能です。
v-show
v-showは条件分岐によって要素の表示・非表示する際に使います。
v-ifと似ていますが、違いは、v-ifは条件に合わなかった際、要素を完全に削除する（DOM上から消し去る）のに対し、v-showは要素を保持（DOM上に残る）する点です。
先程のv-ifの例の「v-if=”display”」の部分を「v-show=”display”」に変更して、ブラウザで確認してみてください。
挙動は同じですが、ディベロッパーツールを開いてみると、v-ifは要素がHTML上から完全に消えているのがわかると思います。
それに対し、v-showは非表示の要素には「display: none;」が付いて、CSSで非表示にしていることがわかります。
まとめ
さて、今回はvueにおけるデータバインディングと各ディレクティブについてご紹介しました。
データバインディングはVue開発において欠かせない機能ですので、是非使いこなしてください！
DOM操作の幅が大きく広がると思います！
それでは今回はここまで。
お疲れ様でした！
以下、Vue公式の解説です。
データバインディング構文
https://v1-jp.vuejs.org/guide/syntax.html
イベントハンドリング
https://jp.vuejs.org/v2/guide/events.html
リストレンダリング
https://v1-jp.vuejs.org/guide/list.html
条件付きレンダリング
https://v1-jp.vuejs.org/guide/conditional.html
関連記事
-
【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築……
-
【Vue + vue-cli】vue-cliの構造とHell……
-
【Nuxt.js】Nuxt Contentを使って、ブログ機……
-
【Node.js + PostgreSQL】Node.jsを……
-
【Nuxt.js】Nuxt Contentを使って、ブログ機……
-
【Nuxt.js + Express】Expressで開発し……
-
【Vue + Nuxt.js】Nuxt.jsのルーティングの……
-
【React.js】React.jsとは？環境構築やHell……
-
【Vue + vue-cli】Vueにおけるライフサイクルに……
-
【Nuxt.js + Auth認証】Nuxt.jsでAuth……
-
【Vue + Nuxt.js】Nuxt.jsの構造とHell……
-
【Vue + vue-cli】axiosでAPI通信をしてみ……
-
【Vue + vue-cli】コンポーネントの基本
-
【Node.js + Express】ミドルウェアを使ってみ……
-
【Vue + vue-cli】Vuex - Vueの状態管理……
-
【Vue + vue-cli】vue-routerの基本的な……
-
【Vue + vue-cli】method、computed……
-
【Nuxt.js + Express】Expressで開発し……
-
【Node.js + Express】ExpressでRES……
-
【Nuxt.js + Element】Nuxt.jsでEle……