📐

Vue.js入門

5 min read

Vue.js is 何?

Vue.jsはシンプルなMVVM構造のプログレッシブフレームワークで、
Model、View、ViewModelの3つでアプリケーションを構築する。

データバインディング

データバインディングを行うにはテンプレートで使用する全てのデータはリアクティブデータとして定義する必要がある

ディレクティブ

vから始まるViewの要素に付加できる独自の属性のこと。
v-if、v-show、v-for、v-model、v-bind、v-onなどがある。
HTMLのクラスを動的に制御したり、イベントをハンドルできる。

  • v-on:イベントハンドラ
  • v-model:双方向データバインディング
  • v-bind:HTMLクラスのバインディング
  • v-on、v-show:条件付きレンダリング
  • v-on:リストレンダリング

※v-ifとv-showは機能としては似ているが、違いもあるので注意する。v-show要素が常にDOMに保存されている。
→表示と非表示がCSSによって制御される(display:none;)つまりHTMLコード自体が存在する。

インスタンスの作成

「new Vue」と記述することで新たなインスタンスを作成する。
el:HTMLのidと紐付ける。
data:変数や配列などを定義する。
methods:イベントハンドラによって発火される処理を記述する。

new Vue ({
    el: ‘#app’,
    data: {
      name1: “hoge”
      name2: “moge”,
    },
    methods: {
      sampleFunc() {
        this.name1 = “huga”;
      },
    }
})

イベントハンドリング

  • focus ↔ blur
  • change
  • click ↔ dblclick
  • submit
  • keyup ↔ keydown
  • touchstart
  • touchmove
  • touchend
  • mouseover ↔mouseleave
  • mousedown
  • mouseup
  • mousemove

※v-on:click=“任意の名前”と記述し、実行したい処理をmethodsの中に記述する。

コンポーネント

名前付きの再利用可能なインスタンスのこと。
Webページのヘッダーやフッター、サイドバーなどのパーツ化をして共有することで効率よくメンテナンスを行うことができる。

Vue.component(コンポーネント名,{
    templete:HTMLに表示させたい内容’
})

ライフサイクルフック

インスタンスの作成から破棄までの間に実行される関数のこと。
インスタンスが作成されたときや破棄されたときなど、特定の瞬間に発動するのが特徴。

  • beforeCreate
  • created
  • beforeMounted
  • mounted
  • beforeUpdated
  • updated
  • beforeDestroy
  • destroyed

※createとmountedの違いはcreatedはDOMがまだ作られておらず、mountedはDOMが作成された直後の状態

インストール

  • npm
$ npm install vue
  • CDN

開発バージョン、コンソールの警告が含まれる
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本番バージョン、サイズと速度のため最適化されている
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

宣言的レンダリング

単純なテンプレート構文を利用することで、宣言的にデータをDOMに描画することが可能。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

文字列の展開以外にも、HTMLの属性をバインディングすることで
CSSの切り替えなどもリアクティブに行うことができる。

<span v-bind:title="message">

このように「v-」の接頭辞から始まるものをディレクティブという。

条件分岐

要素の有無をシンプルに切り替えられる。

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-ifのバリューには真偽値が入り、trueなら表示、falseなら非表示となる。
「v-show」は表示・非表示の切り替えをCSSで制御するため、
DOMに値が常に保持されるが、「v-if」はDOMに値が保持されない。

切り替えの頻度が低ければ「v-if」、切り替えの頻度が高ければv-showと使い分けるのがよいかもしれないが、要素を隠したいのであれば、基本的に「v-if」を使うべきである。

ループ

「v-for」ディレクティブを使うことで、配列内のデータを表示することができる。

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

ユーザー入力の制御

「v-on」ディレクティブを使ってイベントリスナを加え、Vue インスタンスのメソッドを呼び出すことができる。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

メソッドの中では DOM 操作を行っていないのが特徴

v-model ディレクティブを利用することで、「双方向バインディング」が簡単に行える。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

コンポーネントによる構成

コンポーネントシステムは Vue.js におけるもうひとつの重要な抽象概念であり、
「小さく、自己完結的で、(多くの場合)再利用可能なコンポーネント」を組み合わせることで、
大規模アプリケーションを構築することが可能になる。

「コンポーネント」は本質的にはあらかじめ定義されたオプションを持つVueインスタンスである。

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

<ol>
  <!-- todos 配列にある各 todo に対して todo-item コンポーネントのインスタンスを作成する -->
  <todo-item></todo-item>
</ol>

コンポーネントは独自のHTMLタグを作成するといった解釈をするとよい

親のスコープから子コンポーネントへとデータを渡せるようにすべきであり、
プロパティを受け取れるようにコンポーネントの定義をpropsを用いて変更することができる。

Vue.component('todo-item', {
  // todo-item コンポーネントはカスタム属性のような "プロパティ" で受け取ります。
  // このプロパティは todo と呼ばれます。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

以上のように記述することで、繰り返されるコンポーネントそれぞれに、
v-bindを使って値を渡すことができる。

<div id="app-7">
  <ol>
    <!--
      各 todo-item の内容を表す todo オブジェクトを与えます。
      これにより内容は動的に変化します。
      また後述する "key" を各コンポーネントに提供する必要があります。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

Discussion

ログインするとコメントできます