Vue.jsライブラリの読み込み
Vue.jsはCDNからも利用できます。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
head内でCDNを読み込む。- 自分のスクリプトは
main.jsに書くとする。 - 当然だが、CDN読み込みは
main.jsよりも上で行う必要がある。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js Test</title>
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">{{ greeting }}</div>
+ <script src="main.js"></script>
</body>
</html>
Vueインスタンスの作成
main.js
const app = new Vue({
el: "#example",
data: {
greeting: "Hello, Vue.js!!"
}
})
elとdataがオプションとして設定されている。
elオプション
elオプションの値には、DOM要素を設定します。jQueryと同じように、CSSセレクタの文字列で設定できます。
ここでは、#exampleとすることで、id="example"のDOM要素を指定しています。
指定されたDOM要素は、テンプレートとなり、テンプレート内では、Vue.jsの機能が使えます。
dataオプション
dataオプションには文字通り、データを設定します。
基本的にあらゆるデータを登録でき、テンプレートからアクセスすることができます。
テキストのバインデイング
<div id="example">{{ greeting }}</div>
{{}}で Vueインスタンスのdataオプション内のデータ にアクセスし、表示させることができます。これはバインディングと呼ばれ、テンプレートとデータの結びつけのことです。
また、{{}}内にはJSを書きます。
文字列なら、クオーテーションが必要です。
<div id="example">{{`${greeting}という挨拶。`}}</div>
再レンダー
デベロッパーコンソールから、appインスタンスのgreetingの値を書き換えることで、即座に画面の表示も更新されます。 バインドされた値が更新されると、画面も更新されます。
app.greeting = "こんにちは！"
// -> 画面に表示された文字も書き換わる
属性のバインデイング
DOM要素の属性と、Vueインスタンスのデータをバインディングする（結びつける）こともできます。
属性の場合、v-bindという特別な属性を使います。v-bindなどのVue.jsで使う特別な属性のことを、ディレクティブ と言います。
<body>
<div id="example">
{{`${greeting}という挨拶。`}}
+ <a :href="url">リンクはこちら</a>
</div>
<script src="main.js"></script>
</body>
const app = new Vue({
el: "#example",
data: {
greeting: "Hello, Vue.js!!",
+ url: "https://qiita.com/"
}
})
v-vind:hrefと書くこともできますが、:だけで省略もできます。
リストを表示する
v-for というディレクティブを使うと、配列またはオブジェクトを繰り返し処理して表示できます。
配列の場合、「配列要素」 in 「元配列」 という構文を使います。
<p v-for="member in members" :key="menber">
{{member}}
</p>
const app = new Vue({
el: '#example',
data: {
members: ['桃太郎', 'イヌ', 'サル', 'キジ'],
},
});
インデックスを取得する
()で囲み、インデックスにアクセスします。
<p v-for="(member, index) in members" :key="menber">
{{member+index}}
</p>