3. Attribute Binding
クラス https://www.vuemastery.com/courses/intro-to-vue-3/attribute-binding-vue3
まずは、VS Codeから該当フォルダを選択して、開きます。その後に、配下のgit部分をクリックして、ブランチをL3-startへ入れ替えてください。
今日の重要ポイントは属性を入れることですね。
index.html
<div class="product-image">
<!-- image goes here -->
</div>
main.js
const app = Vue.createApp({
data() {
return {
product: 'Socks'
}
}
})
main.jsにimageデータを入れます。
main.js
const app = Vue.createApp({
data() {
return {
product: 'Socks',
image: './assets/images/socks_green.jpg'
}
}
})
その後にindex.htmlのイメージを入れてくださいと言うコメント部分にイメージタグを入れましょう。
index.html
<div class="product-image">
<img src="image">
</div>
Vue app’sのデータを直接に入れるためにはv-bindを使います。直接に入れたい属性の前に「v-bind:」を付けます。
index.html
<div class="product-image">
<img v-bind:src="image">
</div>
v-bindはよく使われるものなので、以下のように諸略することも可能です。
index.html
<div class="product-image">
<img :src="image">
</div>
今回の課題は
urlデータオブジェクトの追加とanchor tagのhrefにバインドすることです。
課題確認
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div class="nav-bar"></div>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img v-bind:src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<!-- solution -->
<h2>anchor : <a :href="anchorUrl" target="_blank">{{ anchor }}</a></h2>
</div>
</div>
</div>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>
main.js
const app = Vue.createApp({
data() {
return {
product: 'Socks',
image: './assets/images/socks_green.jpg',
// solution
anchor: 'phjg81',
anchorUrl: 'https://qiita.com/phjg81'
}
}
})