見出し画像

Vue.js 入門 (1) - 事始め

npaka

 「Vue.js」の使い方をまとめました。

・Vue 2.6.14

1. Vue.js

「Vue.js」（ヴュー・ジェイエス）は、WebアプリのUIを構築するためのJavaScriptフレームワークです。

主な特徴は、次のとおりです。

・データバインディング
特別な構文を使ってデータとDOMをバインドすることで、データとDOMを同期し続けることができます。データの更新のみでページの表示が変わるようになります。DOMを直接操作する必要はありません。

画像1

・UIコンポーネント
再利用可能なUIコンポーネントが多数提供されています。

・Vue Material
・BootstrapVue

画像2

2.  テキストのデータバインディング

テキストのデータバインディングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    {{message}}
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: ""
      }
    })
    app.message = "Hello Vue!" // データ更新
  </script>
</body>
</html>

◎ Vueのインポート
以下のタグで、Vueをインポートします。

<script src="https://unpkg.com/vue"></script>

◎ データバインディング
今回は、テンプレートの{{message}}とスクリプトのapp.messageをバインドしています。app.messageを変更するたびに、ページの表示が変わります。

Vueインスタンスを定義することでバインドできます。

var app = new Vue({
    プロパティ名: 設定,
        :
})

Vueの主なプロパティは、次のとおりです。

・el : コンポーネントにバインドするHTML要素。
・data : データ。
・methods : メソッド。
・filters : フィルター。
・computed : 算出プロパティ。
・watch : ウォッチャ。

実行結果は、次のとおりです。

画像3

3.  HTMLのデータバインディング

HTMLのデータバインディングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <div v-html="message"></div>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: ""
      }
    })
    app.message = "<B>Hello Vue!</B>" // データ更新
  </script>
</body>
</html>

◎ HTMLのバインディング
テキストでなくHTMLのバインディングを行うには、v-htmlを使います。

<要素名 v-html=変数名>

実行結果は、次のとおりです。

画像15

4. 属性のデータバインディング

属性のデータバインディングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <input type="text" v-bind:value="message">
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: ""
      }
    })
    app.message = "Hello Vue!" // データ更新
  </script>
</body>
</html>

◎ 属性のデータバインディング
属性のデータバインディングには、v-bindを使います。
今回は、inputのvalue属性とapp.messageをバインドしています。

<要素名 v-bind:属性名="プロパティ名">

実行結果は、次のとおりです。

画像4

5. スタイルのデータバインディング

スタイルのデータバインディングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <div v-bind:style="{fontSize: textSize}">Hello Vue!</div>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        textSize: "12px"
      }
    })
    app.textSize = "32px" // データ更新
  </script>
</body>
</html>

◎ スタイルのデータバインディング
スタイルのデータバインディングも、v-bindを使います。キーに「スタイル名」、値に「スタイル値」を指定します。
今回は、styleのfontSize属性とapp.textSizeをバインドしています。

<要素名 v-bind:style={スタイル名:スタイル値}>

実行結果は、次のとおりです。

画像5

6. クラスのデータバインディング

クラスのデータバインディングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>

  <!-- スタイルシート -->
  <style>
    .red {color: red}
  </style>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <div v-bind:class="{red: isRed}">Hello Vue!</div>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        isRed: false
      }
    })
    app.isRed = true // データ更新
  </script>
</body>
</html>

◎ スタイルのデータバインディング
クラスのデータバインディングも、v-bindを使います。そして、キーに「クラス名」、クラスを適用するかどうかの「条件式」を指定します。条件式は、
今回は、クラスを適用するかどうかの条件式をapp.isRedをバインドしています。

<要素名 v-bind:class={クラス名:条件式}>

実行結果は、次のとおりです。

画像6

7. 条件付きレンダリング

条件付きレンダリングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <div v-if="price == 0">無料</div>
    <div v-else>{{price}}円</div>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        price: 10000
      }
    })
  </script>
</body>
</html>

◎ 条件付きレンダリング
データの状態に応じて表示・非表示を切り替えることができます。「v-if」と「v-show」は表示結果は同じですが、「v-if」は「v-else-if」「v-else」が利用でき、「v-show」は切り替え負荷が少ないという利点があります。

<要素名 v-if="条件式">出力内容</要素名>
<要素名 v-else-if="条件式">出力内容</要素名>
<要素名 v-else="条件式">出力内容</要素名>
<要素名 v-show="条件式">出力内容</要素名>

実行結果は、次のとおりです。

画像8

8. リストレンダリング

リストレンダリングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <table border="1">
      <tr><th>名前</th><th>年齢</th></tr>
      <tr v-for="person in persons">
        <td>{{person.name}}</td><td>{{person.age}}</td>
      </tr>
    </table>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        persons: []
      }
    })
    app.persons = [ // データ更新
      {name:"taro", age:10},
      {name:"jiro", age:8},
      {name:"hanako", age:8}
    ]
  </script>
</body>
</html>

◎ リストのデータバインディング
リストのデータバインディングには、v-forを使います。

<要素名 v-for="リスト要素 in リスト">

実行結果は、次のとおりです。

画像7

9. フィルター

フィルターの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    {{price | number_format}}円
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        price: 0
      },
      filters: {
        number_format : function(val) {
          return val.toLocaleString()
        }
      }      
    })
    app.price = 10000 // データ更新
  </script>
</body>
</html>

◎ フィルター
フィルターを使うことで、データをテキスト表示する前に何かしら処理を適用することができます。
今回は数値をカンマ区切りに変換しています。

フィルターの定義は、Vueインスタンスのfiltersで行います。

filters: {
    フィルタ名 : function(処理前値) { return 処理後値 }
}

フィルターの適用は、以下の書式でで行います。

{{変数名 | フィルター名}}

◎ グローバルフィルター
Vue.filter()でフィルターとして定義すると、全コンポーネントで利用できようになります。

   <!-- スクリプト -->
  <script>
    Vue.filter("number_format", function(val) {
      return val.toLocaleString()
    })

    var app = new Vue({
      el: "#app",
      data: {
        price: 0
      }
    })
    app.price = 10000 // データ更新
  </script>

実行結果は、次のとおりです。

画像9

10. フォーム入力バインディング

フォーム入力バインディングの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <input type="text" v-model="input_text">
    <div>{{input_text}}</div>
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        input_text: ''
      },
    })
  </script>
</body>
</html>

◎ フォーム入力バインディング
フォームから入力する内容と、コンポーネントが持つデータをバインドします。フォーム入力バインディングするには、v-modelを使います。

<要素名 v-mode=プロパティ名>

実行結果は、次のとおりです。

画像12

11. イベント

イベントの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <div v-if="price == 0">無料</div>
    <div v-else>
      <div>{{price}}円</div>
      <button v-on:click="onPriceDown">値下げ</button>
    </div>    
 </div>
 <!-- スクリプト -->
 <script>
   var app = new Vue({
     el: "#app",
     data: {
       price: 10000
     },
     methods: {
       onPriceDown: function() {
         this.price -= 1000
       }
     }
   })
 </script>
</body>
</html>

◎ イベント
イベントの利用にはv-on、イベントの定義にはmethodsを使います。メソッドはユーザー操作によるイベント発生時に呼び出されます。

<要素名 v-on:イベント名:メソッド名>

methods: {
    メソッド名: function() { 処理 }
}


イベント名は、次のとおりです。

・blur
・focus
・select
・change
・submit
・reset
・load
・scroll
・resize
・click
・keydown
・keyup
・keypress
・mousemove
・mouseover
・mousedown
・mouseout
・ouseup
・touchstart
・touchmove
・touchend

実行結果は、次のとおりです。

画像11

12. 算出プロパティ

算出プロパティの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    {{price}}円（税込み{{tax_included}}円）
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        price: 0
      },
      computed: {
        tax_included : function() {
          return this.price*1.1
        }
      }      
    })
    app.price = 10000 // データ更新
  </script>
</body>
</html>

◎ 算出プロパティ
算術プロパティの定義には、computedを使います。依存する値が更新された時にメソッドが呼ばれます。

computed: {
    算術プロパティ名: function(event) {return 値}
}​

実行結果は、次のとおりです。

画像11

13. ウォッチ

ウォッチの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    <div>{{stock}}個</div>
    <div>{{message}}</div>
    <button v-on:click="onBuy">購入</button>
  </div>
  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        stock: 10,
        message: ""
      },
      methods: {
        onBuy: function() {
          this.stock -= 1
        }
      },
      watch: {
        stock: function(newStock, oldStock) {
          if (newStock == 0) this.message = "売り切れ"
        }
      }
    })
  </script>
</body>
</html>

◎ ウォッチ
ウォッチの定義には、watchを使います。指定した値が更新された時にメソッドが呼ばれます。

watch: {
    変数名: function(新しい変数, 古い変数) {  処理 }
}

実行結果は、次のとおりです。

画像14

14. ライフサイクルハック

ライフサイクルハックの例は、次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <!-- テンプレート -->
  <div id="app">
    {{width}}x{{height}}
  </div>

  <!-- スクリプト -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      created: function() {
        addEventListener("resize", this.onResize)

      },
      beforeDestroy: function() {
        addEventListener("resize", this.onResize)
      },
      methods: {
        onResize: function($event) {
          this.width = $event.target.innerWidth
          this.height = $event.target.innerHeight
        }
      }
    })
  </script>
</body>
</html>

◎ ライフサイクルハック
コンポーネントのインスタンスの生成時や破棄時など、特別なタイミングに、自動的にコンポーネントに知らせる仕組みです。

・beforeCreate : コンポーネントの生成直後。
・​created : コンポーネントの生成直後。
・beforeMount : DOMのマウント直前。
・mounted : DOMとのマウント直後。
・beforeUpdate : データが更新され、DOMに反映される直前。
・updated : データが更新され、DOMに反映された直後。
・beforeDestroy : コンポーネントの破棄直前。
・destroyed : コンポーネントの破棄直後。

今回は、コンポーネント生成直後にイベントリスナーの追加を行い、コンポーネントのインスタンスの破棄直前にイベントリスナーの削除を行っています。

実行結果は、次のとおりです。

画像13

【おまけ】 Vueのオプション一覧

◎ オプション / データ
・data
・props
・propsData
・computed
・methods
・watch

◎ オプション / DOM
・el
・template
・render
・renderError

◎ オプション / ライフサイクルフック
・beforeCreate
・created
・beforeMount
・mounted
・beforeUpdate
・updated
・activated
・deactivated
・beforeDestroy
・destroyed
・errorCaptured

◎ オプション / アセット
・directives
・filters
・components

◎ オプション / 構成
・parent
・mixins
・extends
・provide / inject

◎ オプション / その他
・name
・delimiters
・functional
・model
・inheritAttrs
・comments

次回


この記事が気に入ったらサポートをしてみませんか？