vueで静的ページを設定する方法-フロントエンドQ&A-php.cn

vueで静的ページを設定する方法

PHPz

リリース： 2023-04-13 09:58:55

オリジナル

2630 人が閲覧しました

はじめに

Vue は人気のあるフロントエンドフレームワークであり、Vue を介して動的なページを簡単に作成できます。この記事では、Vue を使用して静的ページを作成する方法を紹介します。

Vue の静的ページ

Vue では、「単一ファイルコンポーネント」の形式で静的ページを作成できます。単一ファイルコンポーネントは、.vue 接尾辞が付いたファイルです。Vue コンポーネントは、HTML、CSS、および JavaScript コードを独立した再利用可能なコンポーネントに編成できます。

以下は、単純な Vue 単一ファイルコンポーネントです:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

ログイン後にコピー

上記のコードは、テンプレート内の 2 つのデータ属性 title と content、およびページへの Bind を使用して、StaticPage という名前の Vue コンポーネントを定義します。 2 つのセレクタースタイル h1 と p がスタイルで定義されています。

Vue を使用して静的ページを作成すると、次の利点があります:

データバインディング: タグ内のコンテンツを手動で変更する必要がある静的ページとは異なり、Vue はデータをページにバインドします。自動更新;
コード構成: HTML、CSS、および JavaScript コードを独立したコンポーネントに編成してコードを簡素化;
再利用性: Vue コンポーネントは独立しており、さまざまなページで使用できます。コードの再利用性を向上させるためのコード。

Vue で静的ページを使用するにはどうすればよいですか?

Vue を使用して静的ページを作成するには、いくつかの手順があります:

Vue をインストールする
単一のファイルコンポーネントを作成する
Vue に登録するインスタンスコンポーネント
コンポーネントをページに追加します

次に、手順をステップごとに説明します。

Vue のインストール

Vue を使用する前に、まず Vue をインストールする必要があります。 npm または CDN を通じて Vue をインストールできます。この記事では、CDN モードでこれを紹介します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

ログイン後にコピー

上記のコードは、Vue ライブラリを導入し、Vue をグローバルにインストールします。

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

プロジェクトディレクトリに .vue ファイルを作成します。以下は、静的ページ用の単純な単一ファイルコンポーネントの例です。 :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

ログイン後にコピー

コンポーネントを Vue インスタンスに登録します

作成したばかりのコンポーネントを Vue インスタンスに登録します:

Vue.component('static-page', staticPage);

ログイン後にコピー

ここで、コンポーネントの名前は "静的ページ」。

コンポーネントをページに追加します

次のコードを使用してコンポーネントをページに追加します。

<div id="app">
  <static-page></static-page>
</div>

ログイン後にコピー

上記のコードは、コンポーネントを「app」の div タグ内に ID が含まれるページ。

完全な Vue 静的ページの例

以下は完全な Vue 静的ページの例です:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <static-page></static-page>
    </div>
    
    <template id="static-page-template">
      <div>
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
      </div>
    </template>
    
    <script>
      var staticPage = {
        template: '#static-page-template',
        data() {
          return {
            title: '这是一个静态页面',
            content: '欢迎使用Vue创建静态页面。'
          };
        }
      };
    
      new Vue({
        el: '#app',
        components: {
          'static-page': staticPage
        }
      });
    </script>
    
    <style>
      h1 {
        font-size: 32px;
        color: #333333;
      }
      p {
        font-size: 24px;
        color: #666666;
      }
    </style>
  </body>
</html>

ログイン後にコピー

上記のコードは、Vue インスタンスを定義し、staticPage コンポーネントをインスタンスの中央に登録します。。このコンポーネントは、ID が「static-page-template」のテンプレートを使用し、テンプレート内の 2 つのデータ属性 title と content を使用して、それらをページにバインドします。 2 つのセレクタースタイル h1 と p がスタイルで定義されています。

結論

この記事では、Vue を使用して静的ページを作成する方法を簡単に紹介します。 Vue の静的ページには、データバインディング、コード構成、再利用性という利点があり、中小規模の静的 Web サイトの作成に適しています。この記事の紹介を通じて、読者が Vue の使用法をよりよく理解できることを願っています。

以上がvueで静的ページを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。