Help us understand the problem. What is going on with this article?

Vue.js入門 2章 Vue.jsの入門(コンストラクタ、マウント、data)

More than 1 year has passed since last update.

なし
Vue.js入門 2章 Vue.jsの入門(テンプレート、フィルタ、算出プロパティ)

Vue.jsのはじめの一歩

  • 実行するとHello World!と表示される。
  • <script>要素でVue.jsの読み込み。
  • Vueを動作させるためのインスタンスをnewで作成し、<div id="app"></div>にマウントする。
<!DOCTYPE html>
<title>はじめてのVue.js</title>
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app"></div>

<script>
  new Vue({
    template: '<p>{{msg}}</p>',
    data: { msg: 'Hello World!' }
  }).$mount('#app')
</script>

  • Hello World!と表示された。

image.png

JSFiddleを使う

  • Vue.jsの動作を確認するには、https://jsfiddle.net を使用する。
  • 左上・・・HTMLパネル
  • 右上・・・CSSパネル
  • 左下・・・Javascriptパネル
  • 右下・・・Resultパネル
  • Saveボタン・・・JSFiddleにコードの登録をする。次回からURLでアクセス可能。
  • Forkボタン・・・現在の内容をコピーして新しいものを作る。(URLが新しくなる)

image.png

Vue.jsの基本

Vue.jsの導入

  • Vue.jsのお手軽な導入方法は、script要素で直接読み込むこと。
  • <script src="https://unpkg.com/vue@2.5.17"></script>はVue.jsの読み込み。
  • 土台HTMLは以下の通り。
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
</div>
<script>
  // ロードされ、Vueがグローバル変数として定義されているか確認
  console.assert(typeof Vue !== 'undefined');
</script>
  • 上記土台のHTMLに、<div id='app'>と、new Vueの部分を追加。
  • 画面に「こんにちは!」が表示される。
<div id='app'>
  <p>
    {{ message }}
  </p>
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
</div>
<script>
  // ロードされ、Vueがグローバル変数として定義されているか確認
  console.assert(typeof Vue !== 'undefined');

  new Vue({
    el: '#app',
    data: {
        message: 'こんにちは!'
    }
  });
</script>

image.png

Vueオブジェクト

コンストラクタ

  • new演算子を使い、Vueインスタンスを生成する。
  • このインスタンスをDOMにマウントすることで、Vue.jsの機能が使えるようになる。
  • コンストラクタの引数として、オプションオブジェクトを渡す。
var vm = new Vue({
  // オプションオブジェクト
})
  • 主なオプション
オプション名 内容
data UIの状態・データ
el Vueインスタンスをマウントする要素
filters データを文字列として整形する
methods イベントが発生した時などの振る舞い
computed データから派生して算出される値

コンポーネント

  • Vue.jsの分割の単位。
  • componentメソッドで、アプリケーション全体で使うコンポーネントを登録可能。
  • Vueインスタンスを生成する際のオプションのcomponentsプロパティで、Vueインスタンスのスコープ(テンプレート)だけで利用できるコンポーネントを登録できる。

Vueインスタンスのマウント

  • マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えること。

Vueインスタンスの適用(el)

  • elプロパティには、DOM要素のオブジェクトかCSSセレクタの文字列を指定することができる。(複数マッチした場合は最初に発見されたもの)
var vm = new Vue({
  el: '#app'
  // オプションオブジェクト
})

メソッドによるマウント($mountメソッド)

  • マウント対象のDOM要素がUI操作や通信などで遅延的に追加される場合はこちらの方法を使う。
var vm = new Vue({
  // オプションオブジェクト
})
vm.$mount(el)

UIのデータ定義(data)

  • dataプロパティには、データのオブジェクトをJson形式で指定する。
  • dataプロパティの値が変わるたびに、表示が変わる。
var items = [
    {
    name: `鉛筆`,
    price: 300,
    quantity: 0
  },
    {
    name: `ノート`,
    price: 400,
    quantity: 0
  },
    {
    name: `消しゴム`,
    price: 500,
    quantity: 0
  }
]

var vm = new Vue({
    el: "#app",
  data: {
    // dataプロパティ
    items: items
  }
})
// JSFiddleでコンソールからvmにアクセスするための対応
window.vm = vm
  • itemsプロパティの0番目の要素を表示する。
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
  <p>
    {{ items[0].name }}
  </p>
</div>
<script>
  // ロードされ、Vueがグローバル変数として定義されているか確認
  console.assert(typeof Vue !== 'undefined');
</script>

image.png

Vueインスタンスの確認

  • 開いている画面を右クリック→「検証」→「Console」タブ→result(fiddle)をプルダウンから選択
  • 以下のコードを入力すると、vmの内容が表示される。
  • dataによってデータをプロパティとして提供できる、テンプレート中で使える。
console.log(vm)

image.png

データの変更を検知する。

  • 上記コンソールで、0番目のアイテムの名前を変えてみる。
vm.items[0].name='万年筆'
  • 画面の名前も変わった。

image.png

  • $watchメソッドは、Vueインスタンスの変更を検知してそれをもとに動作する。
  • 第1引数・・・監視対象の値を返す関数
  • 第2引数・・・値が変わった場合に呼ばれるコールバック関数
vm.$watch(function() {
    return this.items[0].quantity
}, function(quantity) {
    console.log(quantity)
})
  • consoleで値を変えると、設定した個数が表示され、コールバック関数が呼ばれたことが分かった。
> vm.items[0].quantity = 1
1
1

参考
Vue.js入門 基礎から実践アプリケーション開発まで

tseno
Java、Kotlinのフリーランスエンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away