その他

【Vue.js】Vue.jsの基本

その他
この記事は約4分で読めます。

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!!"
  }
})

eldataがオプションとして設定されている。

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>