Vue3 基本構文

Vue.js はプログレッシブ JavaScript フレームワークであり、主にユーザーインターフェースを構築するために使用されます。

Vue.js は、コンポーネント化とリアクティブデータの理念に基づき、ユーザーインターフェースを構築するためのシンプルで効率的な方法を提供します。

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

Vue 単一ファイルコンポーネント（Single File Component、略称 SFC）は Vue.js フレームワークのファイル形式であり、開発者が HTML、JavaScript、CSS コードを1つのファイルに配置できるようにします。通常は.vueをファイル拡張子とします。

単一ファイルコンポーネントは再利用可能なコードの編成形式であり、同じコンポーネントに属する HTML、CSS、JavaScript を.vue拡張子のファイル内にカプセル化します。

以下は、テンプレート構文、ディレクティブ、イベント処理、算出プロパティ、コンポーネントなどを含む、Vue.js の一般的な基本構文と概念です。詳細については後の章で説明します。

1. Vue インスタンスの作成

Vue インスタンスの作成は Vue.js を使用し始める最初のステップです。通常、HTML ファイル内で Vue インスタンスを作成し、それを DOM 要素にマウントします。

インスタンス

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

試してみる »

HTML 部分の説明：

<div id="hello-vue" class="demo">:

  • これは<div>要素であり、id がhello-vueと class がdemo。
  • Vue アプリケーションでは、この<div>は Vue インスタンスによって管理され、データが変更されるとコンテンツが更新されます。

{{ message }}:

  • これは Vue.js のテンプレート構文であり、Vue インスタンス内のmessageデータをページにバインドします。
  • Vue インスタンス内のmessageデータが変更されると、ページ上のコンテンツもそれに応じて更新されます。

JavaScript 部分の説明：

Vue インスタンスの定義：

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
  • HelloVueAppは、Vue コンポーネントのオプションを含む通常の JavaScript オブジェクトです。
  • data()メソッドは、messageプロパティを含むオブジェクトを返します。このプロパティの初期値は'Hello Vue!!'。

Vue アプリケーションの作成とマウント：

  • Vue.createApp()メソッドは Vue アプリケーションインスタンスを作成するために使用されます。引数はコンポーネントオプションを含むオブジェクトです（ここではHelloVueApp）。
  • .mount('#hello-vue')メソッドは Vue アプリケーションインスタンスを、ページ内でid="hello-vue"を持つ DOM 要素にマウントします。

実行プロセス

  • ページ読み込み時に、ブラウザは HTML と JavaScript を解析します。
  • Vue.js スクリプトの実行時に、Vue アプリケーションインスタンスが作成され、<div id="hello-vue">要素にバインドされます。
  • Vue アプリケーションインスタンスは、data()内の初期データに基づいて、messageの値をページ上の{{ message }}にレンダリングします。
  • 当 messageデータが変更されると（ユーザーの操作や非同期操作などにより）、ページは自動的に更新され、これらの変更を反映します。

2. テンプレート構文

補間

Vue.js は二重中括弧{{ }}を使用してテキスト補間を表します：

インスタンス

<div>{{ message }}</div>

ディレクティブ

ディレクティブは接頭辞v-を持つ特別な属性であり、テンプレート内でロジックを表現するために使用されます。

v-bind：1つ以上の属性、またはコンポーネントの prop を動的にバインドします。

<a v-bind:href="url.html">Link</a>

省略記法：

<a :href="url.html">Link</a>

v-if / v-else-if / v-else：条件付きレンダリング。

<p v-if="visible">内容可见</p>
<p v-else>内容不可见</p>

v-for：リストレンダリング。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model：双方向データバインディング。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on：イベントリスナー。

<button v-on:click="doSomething">Click me</button>

省略記法：

<button @click="doSomething">Click me</button>

3. イベント処理

Vue.js では、v-on ディレクティブを使用して DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。

インスタンス

<div id="app">
  <button @click="greet">Greet</button>
</div>

<script>
  createApp({
    methods: {
      greet() {
        alert('Hello!');
      }
    }
  }).mount('#app');
</script>

4. 算出プロパティ

算出プロパティは、依存関係に基づいてキャッシュされるプロパティです。算出プロパティは、関連する依存関係が変更された場合にのみ再計算されます。

インスタンス

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Hello'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

5. コンポーネント

コンポーネントは Vue.js の最も強力な機能の1つです。コンポーネントを使用すると、小規模で独立した、通常は再利用可能なコンポーネントを使用して大規模なアプリケーションを構築できます。

インスタンス

const app = createApp({});

app.component('my-component', {
  template: '<div>A custom component!</div>'
});

コンポーネントの使用

インスタンス

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

<script>
  const app = createApp({});

  app.component('my-component', {
    template: '<div>A custom component!</div>'
  });

  app.mount('#app');
</script>

6. Props とイベント

Props

Props は、コンポーネント間でデータを渡すために使用されます。

インスタンス

<div id="app">
  <blog-post title="My journey with Vue"></blog-post>
</div>

<script>
  const app = createApp({
    data() {
      return {};
    }
  });

  app.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  app.mount('#app');
</script>

イベント

子コンポーネントは$emitを使用してイベントをトリガーし、親コンポーネントはこれらのイベントをリッスンできます。

インスタンス

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Total clicks: {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">You clicked me {{ count }} times.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>
その他の拡張