Vue.js HTMLの要素に属性を追加する（v-bind）
こちらはアンテクアドベントカレンダー2021の記事ですhttps://adventar.org/calendars/6534
皆さんこんにちは、サーバーサイドエンジニアの大川です。今回から本格的にVue.jsの記載をしてゆこうと思います。
基礎の基礎ということでHTMLのa要素にhref属性をVue.jsを用いて追加する方法をまとめてみます！
やること
v-bindディレクティブを用いてa要素にhref属性を付与してみる。
準備
下記の内容を任意のhtmlファイルに記載して保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
}
},
})
</script>
</body>
</html>方法
まずはhtmlのa要素を記載してゆきます。
下記の内容をdiv要素内に記載します。
<a v-bind:href="link">アンテクのページ</a>script要素のdataメソッドのreturnの波括弧内に下記の内容を記載します。
link: 'https://anteku.jp/'ファイル全体が下記のようになっていることを確認します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<a v-bind:href="link">アンテクのページ</a>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
link: 'https://anteku.jp/'
}
},
})
</script>
</body>
</html>上記のhtmlファイルをブラウザで開くと下記のように表示され、リンクになっている「アンテクのページ」をクリックすると弊社のホームページが開きます。
簡単なソースの解説
今回の内容で重要なのは下記のa要素の部分です。下記でVueで定義したリンクとa要素のhref属性を紐付けています。
<a v-bind:href="link">アンテクのページ</a>紐付けにはv-bindというvueのディレクティブを使用します。href要素と紐付けたい場合「v-bind:href=”XXX”」のように記載して、”XXX”の部分にVueで定義したリンクが格納されている変数やキーを指定して紐付けることができます。（v-bindディレクティブは省略可能でv-bind:href=”XXX” は:href=”XXX”と記載する事もできます。）
今回はVueにてdata()メソッド内部でキー「link」に対してアンテクのホームページを設定しています。
let app = new Vue({
el: '#app',
data(){
return {
link: 'https://anteku.jp/'
}
},
})実際のソースではv-bindは省略表記されることのほうが多いようなので「v-bind:href」は「:href」と同じ意味であることを覚えておきましょう！
オブジェクトとしてVueで定義された情報を表示してみる
Vue側でオブジェクトとしてまとまった複数の情報を表示する方法も簡単にまとめてみます！オブジェクトってなんぞや！って方は「データのまとまり」くらいに思っていただければOKです！
下記のようにVueのソースを記載します。
let app = new Vue({
el: '#app',
data(){
return {
infos: {
name: '株式会社アンテク',
link: 'https://anteku.jp/',
}
}
},
})infosというオブジェクトが定義され、内部にnameキーとlinkキーが定義されていることが分かります。
infosの中にnameキー、infosの中にlinkキーが入っている状態です。
こちらのオブジェクトの中のキーを使って情報を表示する時は「オブジェクト名.キー名」とすることで値にアクセスすることが可能です。
下記のようdiv要素内を修正してオブジェクト内のキーの値を表示してみましょう !
<div id="app">
<p>{{ infos.name }}</p>
<a v-bind:href="infos.link">アンテクのページ</a>
</div>ファイル全体は下記の様になっていることを確認します。（body要素の中のv-bindは省略表記に変更しました）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<p>{{ infos.name }}</p>
<a :href="infos.link">アンテクのページ</a>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
infos: {
name: '株式会社アンテク',
link: 'https://anteku.jp/',
}
}
},
})
</script>
</html>上記のhtmlファイルをブラウザで開くと下記のようにオブジェクトの中のキーがそれぞれ用いられp要素とa要素のhrefに値が入っていることが分かります。
