Vueのインストールと使用

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インストールを使用することをお勧めします。 NPMwebpackBrowserifyなどのモジュール バンドラーとうまく連携します。同時に、 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の基本入門: Vuex のインストールと使用
  • Vue-Routerのインストールと使用方法の詳細な説明
  • Vue ルーターのインストールと使用状況の分析
  • Vue cli3 をグローバルにインストールし、Vue-cli2.x を引き続き使用します。
  • Vue リソースのインストールプロセスと使用状況の分析
  • VUEのインストールと使用に関する詳細なチュートリアル
  • Taobao ミラー cnpm を使用して Vue.js をインストールするグラフィック チュートリアル

<<:  IE における条件付きコメントの利点と欠点

>>:  docker ポートを追加して dockerfile を取得する方法

推薦する

MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...

角度コンテンツ投影の詳細な説明

目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...

MySQLデータベースをアンインストールするための完全な手順

MySQLデータベースを完全にアンインストールするプロセスは次のとおりです。 1. MySQLサービ...

Tomcatを自動的に開始するサービスとして設定するにはどうすればいいでしょうか?最も簡単な方法

Tomcat が自動的にサービスを開始するように設定します。最近、問題が発生しました。サーバー上のプ...

Azure Container Registry を使用してイメージを保存する際の問題

Azure Container Registry は、Docker Registry 2.0 仕様に...

mysql8.0.20 のダウンロードとインストールおよび発生した問題 (図とテキスト)

1.ブラウザでmysqlを検索してダウンロードしてインストールしますアドレス: https://d...

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリと my-default.ini がなく、サービスが起動できない問題の簡単な解決方法 (問題概要)

私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...

MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します

目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...

Linux 上での MySQL データベースのリモート展開の詳細な手順

LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...

MySQL 選択最適化ソリューションに関する簡単な説明

目次実生活からの例クエリが遅い最適化する方法カウント制限最大値と最小値 min&max実生活...

mysql コマンドライン スクリプトの実行例

この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 1) (パート 35)

データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...

Vue で円形プログレスバーを実装する例

データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

jsを使用してシンプルな虫眼鏡効果を実現します

この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内...