今日は前回やったUIに動きをつけていきます。
前回のUIは下に記載してあります。
SlackクローンアプリのUI作成
今日の内容
・dataメソッド
・v-bindディレクティブ
・computedプロパティ
今回は以上を説明し、理解を深めながら作業をしていきたいと思います。
dataメソッドについて
dataメソッドについては上記のページが参考になります。
dataメソッドは特定の値を持続的に保持することができます。
<template>
<div class="chat-container">
<div class="thumbnail-container">
<img
src="https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg"
/>
</div>
<div class="message-container">
<div class="user-name">test0001</div>
<div class="message">Hello!</div>
</div>
</div>
</template>
<style scoped>
.chat-container {
display: flex;
padding: 8px;
}
.thumbnail-container {
margin-right: 16px;
}
.thumbnail-container img {
width: 50px;
height: 50px;
border-radius: 10px;
}
.user-name {
font-weight: bold;
}
</style>この状態から<div class="user-name">test0001</div>の部分と、<div class="message">Hello!</div>の部分をdataメソッドを使って、同じように表示していきます。
<script>
export default {
data() {
return {
message: {
text: 'Hello!',
user: {
name: 'test0001'
}
}
}
}
}
</script>こんな感じでdataメソッドにtextとuser.nameを保存しておきます。
これを取り出すには以下のようにする必要があります。
<template>
<div class="chat-container">
<div class="thumbnail-container">
<img
src="https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg"
/>
</div>
<div class="message-container">
<!--追加：ここから-->
<div class="user-name">{{ message.user.name }}</div>
<div class="message">{{ message.text }}</div>
<!--ここまで-->
</div>
</div>
</template>
こんな感じで、いつでも呼び出せるようになりました。
次はサムネイルの方もdataメソッドを使って呼び出したいですね。
しかし、HTML タグの中で data の値を扱うには v-bind を使う必要があります。
message.user.nameなどは文字列だったので、v-bindを使う必要はありませんでした。
それではv-bindとは何かを学びながら、進めていきたいと思います。
v-bindディレクティブ
Vue.jsでアプリケーション作成をする際に、aタグのhref属性やimgタグのsrc属性なども動的に変更したい！という場面があります。
そんな時に使えるのがVueのv-bindディレクティブです。
例えばボタンによってimgタグのsrc属性を切り替えて表示される画像を動的に切り替えるなどの場面で使用します。
では、v-bindを使っていきます。
まずは、dataメソッドの中にthumbnailを追加します。
<script>
export default {
data() {
return {
message: {
text: 'Hello!',
user: {
// 追加
thumbnail: 'https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg',
name: 'test0001',
},
},
}
},
}
</script>それでは、v-bindを使ってthumbnailを呼び出します。
<template>
<div class="chat-container">
<div class="thumbnail-container">
<!--追加-->
<img v-bind:src="message.user.thumbnail" />
<!--ここまで-->
</div>
<div class="message-container">
<div class="user-name">{{ message.user.name }}</div>
<div class="message">{{ message.text }}</div>
</div>
</div>
</template>これでthumbnailも呼び出すことができました。
ちなみに、v-bind:src は :src と省略して書くこともできます。
これでちゃんと画像が無事に表示されていれば大丈夫です。
次に、 名前の前の部分に@を入れていきたいと思います。
つまり、＠test0001にしたいということです。
<div class="user-name">@{{ message.user.name }}</div>上記のようにすればいいのですが、これだと少し不格好です。
では、どのようにすれば良いのか。
computedプロパティというものを使います。
computedプロパティとは
{{}}の中の記述される式が長くなったり、複雑になる時はcomputedプロパティを使ったほうがいいです。
computedプロパティの式は以下のようになります。
プロパティ名: function() {
return “dataプロパティを使った式”;
}この式を使って、@を追加すると下記のようになります。
<script>
export default {
data() {
return {
message: {
text: 'Hello!',
user: {
thumbnail: 'https://iseblog.xyz/wp-content/uploads/2020/10/annie-spratt-UitqRQD4Z7g-unsplash.jpg',
name: 'test0001',
},
},
}
},
// 追加
computed: {
displayname(){
return "@" + this.message.user.name
}
}
}
</script>こんな感じですね。
ここでthisが使われていますが、dataプロパティにはthis.をつけてアクセスする必要があります。
そのため、このthisはdataプロパティのことを指します。
そして、dataメソッドからではなく、computedプロパティからuser.nameを呼び出してみます。
<div class="message-container">
<!--変更点-->
<div class="user-name">{{ displayName }}</div>
<div class="message">{{ message.text }}</div>
</div>すごく見た目がきれいになりましたね。
こんな感じに@が追加されていれば完成です！
まとめ
今日はvueの動的な部分をやっていきました。
次回も動的な部分を続けてやっていきたいと思います。
最後まで読んでいただき、ありがとうございました。