JSライブラリ >

Vue.js

Vue.js の読み込み

CDNを利用する場合

<!-- 開発用 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 開発用(バージョン指定)
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

<!-- 本番用 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本番用(バージョン指定) -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>

npmを利用する場合

npm install vue

ソースコード

https://github.com/vuejs/vue/releases

Vue DevToolのインストール

https://github.com/vuejs/vue-devtools#vue-devtools

基礎

Vueインスタンスを生成する事により、画面にデータを描画する事ができる。
また、Vueインスタンスを介して描画内容を変更する事も可能。

Vueインスタンスの生成

以下の通りVueインスタンスを生成して画面描画等を行う。

var vm = Vue({
    .
    .
})

指定できるオプション

オプション内容
dataUIの状態/データ
elVueインスタンスをマウントする要素
filtersデータの整形に使用する
methodsイベント発生時等の処理を関数として定義する
computedデータから派生して算出される値を関数として定義する

elプロパティを使用してマウントする場合

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

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

// 2秒後にメッセージを書き換える
setTimeout(function(){
    app.message = 'Change message!'
}, 2000);
</script>

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

後から動的に読み込んだコンテンツをマウントする場合等は、$mount メソッドを利用する。

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

<script>
var vm = new Vue({
    template: '<p>{{message}}</p>',
    data: {
        message : 'Message!'
    }
})
vm.$mount('#app')
</script>

filters プロパティによるデータの装飾

TODO:

filters プロパティを使用する事でローカルなフィルタを定義する事ができる

TODO

グローバルなフィルタを定義したい場合は、Vue.filter() を使用する

TODO

computed プロパティによるデータの装飾

TODO:

$watchメソッドによる状態の監視

Vue.js のリアクティブシステムによる検知/要素の更新の他に、$watchメソッドによる状態の監視を行う事もできる。

<div id="app">
    <input type="text" v-model="message" />
</div>

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

// メッセージが変わったらコンソールにログ出力
app.$watch(function(){
    return this.message;
}, function(){
    console.log('changed!');
});

// 2秒後にメッセージを変更
setTimeout(function(){
    app.message = 'Change message!'
}, 2000);

</script>

コンポーネント

コンポーネントの基本

コンポーネントを利用する事で画面を部分的に部品化して再利用する事ができる。
参考: https://jp.vuejs.org/v2/guide/components.html

例) クリックカウンターボタンをコンポーネント化して再利用する

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<script>
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click='count++'>click count is {{ count }}.</button>'
})
new Vue({ el: '#components-demo' })
</script>

</body>
</html>

コンポーネントの定義

TODO:

コンポーネントの状態をキャッシュする

TODO: keep-alive

コンポーネント間の通信

TODO:

コンポーネントへのデータの受渡し

TODO: props

単一ファイルコンポーネント

TODO:

ディレクティブ

v-on ディレクティブによるイベントハンドリング

https://jp.vuejs.org/v2/guide/events.html

  • メソッドイベントハンドラ
    TODO:
  • イベント修飾子
    TODO:
    .stop
    .prevent
    .capture
    .self
    .once
    .passive

v-if ディレクティブによる条件付きレンダリング

v-if ディレクティブを使用して条件付きレンダリングを行う事ができる。

https://jp.vuejs.org/v2/guide/conditional.html

<div id="app">
  <span v-if="display">Message1!</span>
  <span v-else>Message2!</span>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    display: true
  }
})

// 2秒後に表示を切り替える
setTimeout(function(){
    app.display = false
}, 2000);
</script>

他に v-else-if や v-else も使用可能。
https://jp.vuejs.org/v2/guide/conditional.html#v-else
https://jp.vuejs.org/v2/guide/conditional.html#v-else-if

v-bind ディレクティブによるプロパティのバインド

TODO:

v-once で1回だけ描画する

TODO:

v-text ディレクティブによるテキストの描画

TODO:

v-html ディレクティブによるHTMLの描画

TODO:

v-model ディレクティブによる双方向データバインディング

TODO:

ミックスイン

TODO:

トランジション

TODO:

Vue Router を利用したSPA

TODO:

トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS