Vueのインストールと使用

Vue (発音は /vjuː/、view に似ています) は、フロントエンドとバックエンドを分離するためのフレームワークです。これは当初、国内の優れたプレーヤーである You Yuxi によって開発され、現在では世界で「最も」人気のあるフロントエンドフレームワークとなっています。 vueを使用した Web ページの開発は非常に簡単で、技術的なエコシステムが充実しており、コミュニティも活発です。フロントエンドとバックエンドでの仕事を見つけるには必須のスキルです。

1. Vueのインストール

Vueのインストールは一般的に3つの方法に分かれます

方法1: CDNの導入

<!-- 開発環境のバージョン、役立つ警告コマンドを含む -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!-- サイズと速度が最適化された生成バージョン -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

方法2: 直接ダウンロードしてインポートする

開発環境: https://vuejs.org/js/vue.js

本番環境: https://vuejs.org/js/vue.min.js

方法3: npmインストール

Vueを使用して大規模なアプリケーションを構築する場合は、 NPMインストールを使用することをお勧めします。 NPM 、 webpackやBrowserifyなどのモジュールバンドラーとうまく連携します。同時に、 Vue単一ファイルコンポーネントを開発するためのサポートツールも提供します。

# 最新の安定バージョン$ npm install vue

2. 基本的な使い方

Vue使用するには、まずVueオブジェクトを作成し、このオブジェクトにelパラメータを渡す必要がありますelパラメータの完全な名前はelementで、これはvueがレンダリングするルート要素を見つけるために使用されます。また、 dataパラメータを渡すことができ、 data内のすべての値は{{}}を使用してルート要素の直下で使用できます。

サンプルコードは次のとおりです。

<div id="アプリ">
  {{メッセージ}}
</div>
</本文>
<スクリプト>
    constアプリ = 新しいVue({
      el: "#app",
      データ： {
        メッセージ: 「初心者向け Vue」
      }
    })
</スクリプト>

data内のデータはvueのルート要素の下でのみ使用でき、他の場所ではvue認識およびレンダリングすることはできません。

例えば：

<!--ここではレンダリングできません-->
<p>{{メッセージ}}</p>
</本文>
<スクリプト>
    constアプリ = 新しいVue({
      el: "#app",
      データ： {
        メッセージ: 「初心者向け Vue」
      }
    })
</スクリプト>

vueオブジェクトにmethodsを追加することもできます。このプロパティは、独自の関数を格納するために特に使用されます。 methods内の関数はテンプレートでも使用でき、 methods内の関数は、アクセスするためにthis.名を追加することなく、単にthis.data.名を使用するだけでdata内の値にアクセスできます。

サンプルコードは次のとおりです。

<div id="アプリ">
    <p>{{挨拶()}}</p>
</div>
</本文>
<スクリプト>
    constアプリ = 新しいVue({
      el: "#app",
      データ： {
        メッセージ: 「初心者向け Vue」
      },
      メソッド: {
        挨拶: 関数 () {
          "hello" + this.message を返します
        }
      }
    })
</スクリプト>

Vue のインストールと使用方法についてはこれで終わりです。Vue のインストールと使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: