Web ページに Vue を導入する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Web ページに Vue を導入する方法

PHPz

Apr 13, 2023 am 11:36 AM

Vue は、インタラクティブなシングルページアプリケーション (SPA) の構築に広く使用されている人気の JavaScript フレームワークです。この記事ではWebページにVueを記述する方法を紹介します。

Vue の最も基本的な使用方法は、ページに Vue.js を導入し、Vue のインスタンスを作成することです。このインスタンスには、データの保存に使用されるいくつかのデータプロパティと、このデータを制御するいくつかのメソッドが含まれるメソッドオブジェクトが含まれます。

次は、単純な Vue インスタンスの例です:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>
</html>

ログイン後にコピー

上の例では、Vue インスタンスを作成し、それを ID "app" を持つ div にバインドしました。次に、メッセージデータ属性 (デフォルト値は「Hello Vue!」) と reverseMessage メソッドが定義されます。 HTML では、二重中括弧補間を使用してページにメッセージを表示し、button タグの v-on:click ディレクティブを使用して reverseMessage メソッドをバインドします。

データバインディングとイベント処理に加えて、Vue は命令、計算されたプロパティ、コンポーネント、その他の関数も提供します。これらの機能により、Web ページで Vue を簡単に使用できるようになります。

以下は、v-for ディレクティブと計算されたプロパティを使用して画像のリストを表示する例です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="image in images">
        <img :src="image.url" :alt="image.title">
        <p>{{ image.title }}</p>
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        images: [
          { title: 'Image 1', url: 'https://via.placeholder.com/150' },
          { title: 'Image 2', url: 'https://via.placeholder.com/150' },
          { title: 'Image 3', url: 'https://via.placeholder.com/150' }
        ]
      },
      computed: {
        reverseImages: function () {
          return this.images.slice().reverse()
        }
      }
    })
  </script>
</body>
</html>

ログイン後にコピー

上の例では、v-for ディレクティブを使用して、画像のリストを作成し、計算されたプロパティを使用して画像リストを逆にしました。 HTML では、v-bind の省略形 :src および :alt を使用して、画像の src 属性と alt 属性をバインドすることに注意してください。

要約すると、Vue はインタラクティブな単一ページアプリケーションの構築に使用できる強力なフレームワークです。 Web ページに Vue.js を導入し、Vue インスタンスを作成することで、Vue のデータバインディング、イベント処理、命令、計算プロパティなどの機能を簡単に使用できるようになります。これにより、Web ページでの Vue の記述がよりシンプルかつ理解しやすくなります。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。