見出し画像

Vue.js 入門 (2) - コンポーネント

npaka

Vue.jsの「コンポーネント」に使い方ついてまとめました。

・Vue 2.6.14

前回

1. コンポーネント

「コンポーネント」は、名前付きの再利用可能なVueインスタンスです。

「コンポーネント」の例は、次のとおりです。

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      template: "<div>Hello Vue!</div>"
    })

    var app = new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

◎ コンポーネント
コンポーネントの定義には、Vue.component()を使います。今回はtemplateプロパティでテンプレートを指定しています。

Vue.component(コンポーネント名, {プロパティ名:プロパティ値,...})

コンポーネントの利用は、次のようにタグ形式で記述します。

<コンポーネント名/>

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

画像1

2. 変数の利用

変数の利用の例は、次のとおりです。

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      data: function() {
        return {
           name: "JavaScrpt"
        }
      },
      template: "<div>Hello {{name}}!</div>"
    })

    var app = new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

◎ 変数の利用
変数は、dataプロパティで定義します。

data: function() {
    return {
        変数名: 変数値,
            :
    }
}

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

画像2

3. 属性の利用

属性の利用の例は、次のとおりです。

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      props: ["name"],
      template: "<div>Hello {{name}}!</div>"
    })

    var app = new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

◎ 属性の利用
属性は、propsプロパティで定義します。

props: [属性名,...]

属性の型（String, Number, Boolean, Array, Object）で値の型を限定することもできます。

props: [属性名:属性の型,...]

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

画像3

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

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

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      props: ["name"],
      template: "<div>Hello {{name}}!</div>"
    })

    var app = new Vue({
      el: "#app",
      data: {
        items: ["Vue", "JavaScript", "HTML", "CSS"]
      }
    })
  </script>
</body>
</html>

◎ 属性のデータバインディング
属性のデータバインディングには、v-bindを使います。

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

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

画像4

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

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

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      props: ["name"],
      template: "<div>Hello {{name}}!</div>"
    })

    var app = new Vue({
      el: "#app",
      data: {
        name: ""
      }
    })
  </script>
</body>
</html>

◎ フォーム入力バインディング
フォーム入力バインディングするには、v-modelを使います。

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

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

画像5

6. イベント

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

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      data: function() {
        return {
          count: 0
        }
      },
      methods: {
        onClick: function($event) {
          this.count++
        }
      },
      template: "<div v-on:click='onClick'>カウント: {{count}}</div>"
    })

    var app = new Vue({
      el: "#app",
    })
 </script>
</body>
</html>

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

<要素名 v-on:イベント名:メソッド名>
methods: {
    メソッド名: function() { 処理 }
}

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

画像7

7. 算術プロパティ

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

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      data: function() {
        return {
          num: 0
        }
      },
      computed: {
        calc: function(event) {
          return this.num*this.num
        }
      },
      template: "<div><input type='number' v-model='num'><br>2乗: {{calc}}</div>"
    })

    var app = new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

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

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

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

画像7

8. ローカルコンポーネント

ローカルコンポーネントの例は、次のとおりです。

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

  <!-- スクリプト -->
  <script>
    Vue.component("hello",
    {
      data: function() {
        return {
          num: 0
        }
      },
      computed: {
        calc: function(event) {
          return this.num*this.num
        }
      },
      template: "<div><input type='number' v-model='num'><br>2乗: {{calc}}</div>"
    })

    var app = new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

◎ グローバルコンポーネントとローカルコンポーネント
コンポーネントには、「グローバルコンポーネント」と「ローカルコンポーネント」があります。

・グローバルコンポーネント
スクリプトのどこでも利用できるコンポーネントです。Vue.component()で定義します。

・ローカルコンポーネント
Vueインスタンス内で利用できるコンポーネントです。Vueインスタンスのcomponentsで定義します。

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

画像1


次回


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