Vue.js 入門 忘備録

概要

これからVue.jsを学習するにあたり、最初の取っ掛かり部分を備忘録として残しておきます。
同じく、これから新しくVue3を学習されていく方の取っ掛かりになると幸いです。

Vue.js導入方法

テンプレート

・view部分のことをさす。
・中でも「ルートテンプレート」とは、ルートとなるテンプレートのことをさす。

HTML

<!-- ルートテンプレート -->
<div id="app"></div>

マウント

・Vue.jsのインスタンスを生成し、テンプレートにマウントします。

JavaScript

const app = Vue.createApp({
  // options
})
app.mount('#app')

// or

const app = Vue.createApp({
  // options
}).mount('#app')

データバインディング

・データと描画を同期する仕組みのこと。
・下記例の場合、入力フォームの値を変更すると、自動的pタグ内の表示も切り替わります。
・とりわけ、View側とJS側双方向でデータが同期していることを「双方向データバインディング」といいます。

HTML

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

JavaScript

const app = Vue.createApp({
  data: () => ({
    message: 'Hello World'
  })
})
app.mount('#app')

Mustache(マスタッシュ)構文

・{{}}で囲った構文のこと。

<p>{{ message }}</p>

ディレクティブ

・v-ではじまるもの。

v-bind

・入力フォームの値(value)をバインディングする際に使用します。
※入力フォームの値(value)にはMustache構文は使用できないため、v-bindを使用します。
・下記例で、入力フォームの値(value)に「Hello World」と表示されます。

HTML

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

JavaScript

const app = Vue.createApp({
  data: () => ({
    message: 'Hello World'
  })
})
app.mount('#app')

v-if

・条件分岐による要素の表示/表示切り替えが可能。
・JavaScriptの「isDisplay: true」を「isDisplay: false」に変更すると、Hellow Worldは非表示になります。

HTML

<div id="app">
  <p v-if="isDisplay">Hello World</p>
</div>

JavaScript

const app = Vue.createApp({
  data: () => ({
    isDisplay: true
  })
})
app.mount('#app')

f-for

・繰り返し描画が可能。

配列の描画サンプル

HTML

<div id="app">
  <ul>
    <li v-for="fruit in fruits">
      {{ fruit }}
    </li>
  </ul>
</div>

JavaScript

const app = Vue.createApp({
  data: () => ({
    fruits: [
      'apple',
      'banana'
    ]
  })
})
app.mount('#app')

オブジェクトの描画サンプル

HTML

<div id="app">
  <ul>
    <li v-for="(value, key) in user">
      {{ key }}: {{ value }}
    </li>
  </ul>
</div>

JavaScript

const app = Vue.createApp({
  data: () => ({
    user: {
      firstName: Taro,
      lastName: Yamada,
      Age: 30
    }
  })
})
app.mount('#app')

v-on

・イベント処理を実装可能。

HTML

<div id="app">
  <button v-on:click="onClick">Click!</button>
</div>

JavaScript

const app = Vue.createApp({
  data: () => ({
  }),
  methos: {
    onClick: function(){
      console.log('Run onClick()!');
    }
  }
})
app.mount('#app')

コンポーネント

・名前付きの再利用可能なインスタンス。
・ページを構成するUI部品で、テンプレートとそのロジックから構成される。
・よく使う機能をコンポーネント化して利用可能。
・下記例の場合、「sample-component」という名前でコンポーネントを作成。
「Hello World」が2行描画される。

HTML

<div id="app">
  <sample-component></sample-component>
  <sample-component></sample-component>
</div>

JavaScript

const app = Vue.createApp({
  data: () => ({
  })
})
app.component('sample-component',{
  template; '<p>Hello World</p>'
})
app.mount('#app')