ゼロからvue.jsを?qū)Wびたいですか？ SitePoint Premiumは、基本、プロジェクト、ヒント、ツールなどをカバーするVue Booksの完全なコレクションを提供しています。今すぐ1か月あたりわずか14.99ドルで參加してください。

この記事は更新され、主にツールセクションが更新されました。

人気のJavaScript Framework vue.jsバージョンのV2のリリース以來(lái)、私はそれを試して、それがどのように感じられるかを見(jiàn)るのが待ちきれません。 AngularとReactに非常に精通している人として、私はそれらの類(lèi)似點(diǎn)とvueの類(lèi)似點(diǎn)と違いを見(jiàn)るのを楽しみにしています。

VUE 2には、優(yōu)れたパフォーマンスメトリック、比較的小さな負(fù)荷（縮小されたVUEランタイムバージョンの重量は縮小およびGZIP圧縮後約30kb）、およびVue-RouterやVuex、Vue Libraryなどのサポートライブラリの狀態(tài)管理）アップデートがあります。たった1つの記事ですべてをカバーするには多すぎますが、フォローアップの記事に注意してください。コアフレームワークと完全に統(tǒng)合されているさまざまなライブラリをより注意深く見(jiàn)てみましょう。

キーポイント

• Vue.js 2.0は、効率的なレンダリングのためのReactにインスパイアされた仮想Domを?qū)毪贰ue-RouterやVuexなどの改善されたライブラリを國(guó)家管理のために統(tǒng)合します。
• コンポーネントはvue.js 2.0の基礎(chǔ)であり、アプリケーションは一連のネストされたコンポーネントに組み込まれており、コードをより適切に整理するために単一のファイルコンポーネント（.vue）が推奨されます。
• Vueプロジェクトをゼロからセットアップするには、.vueファイルを処理するためにWebpackとVue-Roaderが必要であり、Babelは最新のJavaScript機(jī)能を使用して開(kāi)発ワークフローを強(qiáng)化します。
• vue devtoolsはデバッグに不可欠であり、アプリケーションの狀態(tài)とコンポーネントを介してデータがどのように流れるかについての洞察を提供します。
• VUE.JS 2.0は、雙方向データの結(jié)合にVモデルを活用し、カスタムイベント処理にV-ONを使用することにより、インタラクティブフォームの構(gòu)築を促進(jìn)し、コンポーネント間で狀態(tài)管理をシームレスにします。
この記事では、VUEのリアクティブシステムとライフサイクルフックを使用してデータを効果的に管理および表示するGitHubユーザー統(tǒng)計(jì)取得アプリケーションの構(gòu)築を示し、実際のシナリオでのV??ue.jsの実際の使用を示しています。
他のライブラリからのインスピレーション

このチュートリアルを?qū)Wぶと、Vueには他のフレームワークに觸発された多くの機(jī)能があることがわかります。これは良いことです。特に、VueのテンプレートはAngularのテンプレートに非常に近いことがわかりますが、そのコンポーネントとコンポーネントのライフサイクルアプローチはReact（およびAngular）に近いことがわかります。

このような例は、Reactや今日のJavaScriptフィールドのほぼすべてのフレームワークと同様に、Vueは仮想DOMの概念を使用してレンダリング効率を維持することです。 Vueは、より人気のある仮想DOMライブラリの1つであるSnabbdomのブランチを使用しています。 VueのWebサイトには仮想ドムレンダリングに関するドキュメントが含まれていますが、ユーザーとして、Vueはレンダリング速度を維持するのが非常に優(yōu)れていることを知っておく必要があります（実際、多くの場(chǎng)合、反応よりも優(yōu)れています）。信頼できるプラットフォームが構(gòu)築されていること。

コンポーネント、コンポーネント、コンポーネント

今日の他のフレームワークと同様に、Vueのコアビルディングブロックはコンポーネントです。アプリケーションは、最終的なアプリケーションを生成するために互いに構(gòu)築された一連のコンポーネントである必要があります。 Vue.jsはさらに一歩進(jìn)んで、.vueファイルでコンポーネントを定義することを示唆している（必須ではないが）、ビルドツール（短時(shí)間でカバーする）がそれらのファイルを解析できることを示唆している。この記事の目的は、VUEとその使用法を完全に調(diào)査することであることを考えると、この條約をこのアプリケーションに使用します。

Vueファイルは次のとおりです

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

または、コンポーネントのすべての部分を単一のファイルに配置したくない場(chǎng)合は、各要素にSRC屬性を提供し、それぞれ別のHTML、JS、またはCSSファイルを指すことができます。

設(shè)定プロジェクト

優(yōu)れたVue CLIにより、完全なプロジェクトを簡(jiǎn)単に設(shè)定できますが、新しいライブラリから始めたときにゼロから始めて、これらのツールについて詳しく知ることができます。

さて、Webpackは私の推奨ビルドツールであり、Vue.jsコンポーネント形式をサポートするためにVue-Roaderプラグインと併用できます。また、ファイルの変更が検出されたときにブラウザを更新する最新のJavaScript Syntaxを使用してすべてのコードを記述できるように、BabelとEnv Presetsが必要です。

プロジェクトを初期化して、依存関係をインストールしましょう：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

次に、初期フォルダーとファイルを作成します：

mkdir src
touch webpack.config.js src/index.html src/index.js

プロジェクト構(gòu)造は次のようにする必要があります

今すぐWebpack構(gòu)成をセットアップしましょう。これは、次のポイントに要約されます：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

webpackに、任意の.vueファイルにvue-loader

を使用するように指示します
• webpackに、.jsファイルにbabel and envプリセットを使用するように指示します
• webpackにsrc/index.htmlをテンプレートとして使用するように指示します。
最後に、HTMLファイルにコンテンツを追加し、起動(dòng)できます！

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

これがVUEアプリを配置する要素であるため、APPのIDを備えた空のDIVを作成しました。これにより、ページの殘りの部分を制御できるため、私は常にボディ要素よりもDivを使用することを好みます。

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

最初のvue.jsアプリケーションを書(shū)く

以前のプログラミングチュートリアルに忠実であり、VUEアプリケーションを作成し、より複雑なコンテンツを掘り下げる前に、畫(huà)面に置きます。

各VUEアプリケーションは、ライブラリをインポートし、新しいVUEインスタンスをインスタンスすることにより作成されます。

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

VUEにページにレンダリングする要素を提供するので、Vueアプリケーションを作成します！セレクターを渡して、VUEをアプリケーションに置き換える要素を選択します。これは、Vueが実行されると、作成したDiv＃アプリが使用され、アプリケーションに置き換えることを意味します。

変數(shù)名VMを使用する理由は、「ビューモデル」を表すためです。モデルビューモデルモデル（MVVM）パターンに厳密に関連付けられていませんが、Vueは部分的にインスピレーションを受けており、VUEアプリケーションを表す変數(shù)名VMを使用する條約は今日に使用されています。もちろん、変數(shù)を好きなように名前を付けることができます！

これまでのところ、私たちのアプリは何もしないので、最初のコンポーネントであるapp.vueを作成しましょう。これにより、実際に何かをページに表示します。

Vueはアプリケーションの構(gòu)造を指定していないため、それはあなた次第です。最終的に各コンポーネントのフォルダーを作成することになりました。この場(chǎng)合は、3つのファイルを含むコンポーネントを意味する大文字が好きです）：

• index.vue
• script.js
• style.css

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

ファイル構(gòu)造は次のようになります：

mkdir src
touch webpack.config.js src/index.html src/index.js

app/index.vueテンプレートを定義し、他のファイルをインポートします。これは、VUE文書(shū)の「懸念の分離について」セクションに推奨される構(gòu)造に適合します。

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

index.vueという名前を付けるのが好きですが、簡(jiǎn)単に検索するためにapp.vueという名前も付けたい場(chǎng)合があります。私はApp/App.Vueよりもコードにapp/index.vueをインポートすることを好みますが、繰り返しますが、あなたは同意しないかもしれませんので、あなたとあなたのチームが最も好きな名前を自由に選択してください。

現(xiàn)時(shí)點(diǎn)では、テンプレートはちょうど

です

こんにちは、世界！

、CSSファイルを空のままにします。主な作業(yè)はscript.jsで行われます。

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

そうすることで、アプリとして名前を付けるコンポーネントが作成されます。これは、主にデバッグ用の目的であり、後でカバーし、コンポーネントが所有し、責(zé)任を負(fù)うデータを定義します?，F(xiàn)在、データはないので、空のオブジェクトを返すことでこれをVueに伝えることができます。後で、データを使用するコンポーネントの例を表示します。

最初に、コンポーネントをインポートし、WebpackとVue-Roaderがそれを解析する責(zé)任があると考えています。次に、コンポーネントを宣言します。これは重要なステップです。デフォルトでは、VUEコンポーネントはグローバルに利用できません。各コンポーネントには、使用するすべてのコンポーネントのリストと、マッピングされるタグのリストが必要です。この場(chǎng)合、このようなコンポーネントを登録するため、

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

これは、テンプレートでアプリ要素を使用してコンポーネントを參照できることを意味します。

最後に、レンダリング関數(shù)を定義します。この関數(shù)は、要素を作成できるヘルパー（通常はhと呼ばれる）コールを使用します。 React.createelement関數(shù)とはあまり似ていません。この場(chǎng)合、レンダリングしているコンポーネントがタグアプリを持っていると登録されているため、文字列「アプリ」でそれを提供します。

ほとんどの場(chǎng)合（およびこのチュートリアルの殘りの部分では）、HTMLテンプレートを定義するため、他のコンポーネントでレンダリング関數(shù)を使用しません。ただし、詳細(xì)を知りたい場(chǎng)合は、レンダリング関數(shù)に関するVue.jsガイドを読む価値があります。

の後、最後のステップはpackage.jsonでnpmスクリプトを作成することです。

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

さあ、npm run startを?qū)g行します。デフォルトのブラウザは、

http://ipnx.cn/link/03b0db8c971432a5e8d163897176a7ccで開(kāi)く必要があります。 src/index.vueを編集して、メッセージを何か他のものに変更してみてください。すべてがうまくいけば、WebPack-Dev-Serverはページを更新して変更を反映する必要があります。

素晴らしい！ vue.jsを使用して実行しています

vue devtools

やや複雑なVueアプリケーションを掘り下げる前に、Vue Devtoolsを間違いなくインストールする必要があることに言及する時(shí)が來(lái)ました。これらはChrome開(kāi)発者ツールにあり、アプリケーションとすべての合格プロパティ、各コンポーネントが持っている狀態(tài)などを表示するための優(yōu)れた方法を提供します。

アプリケーションを構(gòu)築します

サンプルアプリケーションとして、GitHub APIを使用してアプリケーションを作成します。ユーザー名を入力して、そのユーザーのGitHub統(tǒng)計(jì)を表示します。 Github APIを選択しました。これは、ほとんどの人に馴染みがあり、認(rèn)証なしで使用できるため、多くの情報(bào)を提供することができます。

アプリケーションを開(kāi)始する前に、必要なコンポーネントをすばやく考えるのが好きです。アプリコンポーネントは他の2つのコンポーネントをレンダリングすると思います。Githubinputは、ユーザーからの入力を受信するために使用され、GitHubOutputはユーザーを表示します。上の畫(huà)面情報(bào)。入力から始めます。

注：githubですべてのコードを見(jiàn)つけることができ、オンラインで実行されているアプリケーションを表示することもできます。

初期設(shè)定

SRCディレクトリ內(nèi)のGitHubOutputおよびGithubinputコンポーネント用のフォルダーを作成します：

各フォルダーに必要なファイルを追加します：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

SRCフォルダーの構(gòu)造は次のようになります。

Vue.js

mkdir src
touch webpack.config.js src/index.html src/index.js

の

フォーム

Githubinputコンポーネントから始めましょう。 APPコンポーネントと同様に、index.vueファイルにはテンプレート、ロードスクリプトとCSSファイルが含まれている必要があります?，F(xiàn)在、テンプレートには

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

のみが含まれています

github input

。すぐに正しく記入します。新しいコンポーネントを作成するときにテンプレートが正しく接続されているかどうかを確認(rèn)できるように、仮想HTMLを入力するのが好きです。

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

このコンポーネントを作成するときに違ったやり方で行うことは、コンポーネントに関連付けられたデータのスニペットを作成することです。これは、Reactの狀態(tài)の概念に非常に似ています：

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

これは、このコンポーネントに所有しているデータがあり、責(zé)任を負(fù)うこと、つまりユーザー名があることを意味します。ユーザー入力に基づいてすぐに更新します。

最後に、このコンポーネントを畫(huà)面に配置するには、アプリコンポーネントがレンダリングするため、アプリコンポーネントに登録する必要があります。

このために、src/app/script.jsを更新して、githubinput：

に伝えます

その後、アプリコンポーネントのテンプレートを更新できます。

mkdir src
touch webpack.config.js src/index.html src/index.js

Vueコンポーネントの制限の1つ（AngularとReactで真実です）は、各コンポーネントにルートノードが必要な場(chǎng)合、コンポーネントが複數(shù)の要素をレンダリングする必要がある場(chǎng)合、それらをすべてに包むことを忘れないでください。一般的なものはdivです。

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

トラックフォーム入力

githubinputコンポーネントは、2つのことを行う必要があります

入力の現(xiàn)在の値を追跡する

他のコンポーネントが結(jié)果としてステータスを知り、更新できるように、値が変更されたことを伝えます。

入力要素を含むフォームを作成することにより、最初のバージョンを完了できます。 Vueの組み込みディレクティブを使用して、フォーム値を追跡できます。 Githubinputのテンプレートは次のとおりです
VONとV-Modelの2つの重要なプロパティがあることに気付くでしょう。

v-onは、domイベントにバインドし、Vueの関數(shù)を呼び出す方法です。たとえば、

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

私をクリックしてください！

段落がクリックされるたびに、コンポーネントのFOOメソッドが呼び出されます。イベントの取り扱いについて詳しく知りたい場(chǎng)合は、イベント処理に関するVueのドキュメントを強(qiáng)くお?jiǎng)幛幛筏蓼埂?V-Modelは、フォーム入力とデータの間に雙方向のデータバインディングを作成します。舞臺(tái)裏では、V-Modelは実際に、VUEコンポーネントのフォーム入力と更新の変更イベントをリスニングしています。

上記のテンプレートを考慮して、VONとV-MODELを使用してフォームのデータを処理する方法を次に示します。

v-on：submit.prevent = "onsubmit"は、メソッドをonsubmitにバインドするときにonsubmitを?qū)g行して提出を形成します。 .Preventを追加することにより、これはVUEがデフォルトのアクションの発生を自動(dòng)的に防止することを意味します。 （Vueがこれを行わない場(chǎng)合、コードでevent.preventdefault（）に電話(huà)することができますが、Vueの機(jī)能を活用することもできます。）

v-Model：ユーザー名は、入力された値をコードの値ユーザー名にバインドします。 Angularに精通している人にとっては、これがNGモデルに非常に似ていることに気付くかもしれません。 Githubinputを作成すると、データのユーザー名があることを宣言し、そのデータを入力フィールドにバインドします。どちらも自動(dòng)的に同期されたままです。

次に、コンポーネントのJavaScriptに戻り、OnSubmitメソッドを宣言できます。ここの名前は完全にarbitrary意的であることに注意してください - あなたは意志で任意の名前を選択できます - しかし、私はイベントをトリガーするイベントに従って名前が付けられた関數(shù)を使用する慣習(xí)に固執(zhí)するのが好きです：

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

これに関するデータを直接參照できるため、このユーザー名はテキストボックスの最新値を提供します?？栅扦胜?chǎng)合は、他のコンポーネントにデータが変更されたことを知ってほしい。これを行うには、メッセージバスを使用します。これらは、コンポーネントがイベントを発行し、他のイベントをリッスンするために使用できるオブジェクトです。アプリケーションが大きくなったら、Vuexなどのより構(gòu)造化されたアプローチを検討することをお?jiǎng)幛幛筏蓼埂，F(xiàn)在、メッセージバスはこれを行うことができます。

良いニュースは、空のVueインスタンスをメッセージバスとして使用できることです。これを行うには、src/bus.jsを作成します。これは、Vueインスタンスを作成してエクスポートするだけです。

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

githubinputコンポーネントでは、ユーザー名が変更されたときにイベントを発行することでモジュールをインポートして使用できます。

このように、このようにしてフォームが完成し、生成されたデータで何かを始めることができます。

mkdir src
touch webpack.config.js src/index.html src/index.js

github

の結(jié)果を示します

githuboutputコンポーネントは、他の2つのコンポーネントと同じ構(gòu)造を持っています。 githuboutput/script.jsでは、ユーザー名がいつ変更されるかを知る必要があるため、バスモジュールもインポートします。このコンポーネントが擔(dān)當(dāng)するデータは、GitHub APIから取得したデータにGitHubユーザー名をマップするオブジェクトになります。これは、以前にデータを取得したことがある場(chǎng)合、APIにリクエストする必要がないことを意味します。また、畫(huà)面に表示されているデータがわかるように、受信した最後のユーザー名も保存します。
コンポーネントを作成するときは、メッセージバスで排出される新しいユーザー名イベントを聞きたいと思います。ありがたいことに、Vueは作成された多くのライフサイクルフックをサポートしています。私たちは責(zé)任ある開(kāi)発者であるため、コンポーネントの破壊時(shí)に破壊されたイベントを使用してイベントを聴くのをやめます：

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

次に、CurrentUsernameプロパティを呼び出して設(shè)定するOnusernMechangeメソッドを定義します。
OnusernMechangeメソッドを現(xiàn)在の範(fàn)囲に明示的にバインドする必要はないことに注意してください。 Vueコンポーネントでメソッドを定義すると、VueはMyMethod.bind（this）を自動(dòng)的に呼び出します。したがって、それらは常にコンポーネントにバインドされます。これは、Vueがそれらを完全に理解し、それに応じて設(shè)定できるように、メソッドオブジェクト上のコンポーネントのメソッドを定義する必要がある理由の1つです。

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

條件付きレンダリング

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

ユーザー名がない場(chǎng)合 - コンポーネントが最初に作成されたときにそれがありません - ユーザーにメッセージを表示したいと思います。 Vueには多くの條件付きレンダリング手法がありますが、最も単純なのはV-IF指令であり、條件を受け入れ、條件が存在する場(chǎng)合にのみ要素をレンダリングします。また、v-else：

で動(dòng)作します

繰り返しますが、これはあらゆる角度開(kāi)発者にとって非常に馴染みがあります。ここでは、トリプルサインの代わりにダブルサインを使用します。これは、currentUsernameがnullだけでなく、currentusernameが未定義であり、null ==未定義の場(chǎng)合にも條件が真であることを望んでいるためです。

github

からデータを取得します

vue.jsには獨(dú)自のHTTPライブラリが付屬していません。それには正當(dāng)な理由があります。今日、Fetch APIは多くのブラウザにネイティブに含まれています（ただし、IE11、Safari、またはiOS Safariを除く執(zhí)筆時(shí)點(diǎn)ですが）。このチュートリアルのために、私はPolyFillを使用しませんが、必要な場(chǎng)合は、ブラウザにAPIのPolyFillを簡(jiǎn)単に追加できます。 Fetch APIが気に入らない場(chǎng)合は、HTTPには多くのサードパーティライブラリがあり、Vueドキュメントで言及されているものはAxiosです。

私は、HTTPライブラリを含まないVUEのようなフレームワークを非常に支持しています。フレームワークのバンドルサイズを削減し、開(kāi)発者がそれらに最適なライブラリを選択できるようにし、必要に応じてAPIと通信するためにリクエストを簡(jiǎn)単にカスタマイズできます。この記事ではフェッチAPIに固執(zhí)しますが、好きなライブラリに自由に交換できます。

Fetch APIについて知る必要がある場(chǎng)合は、SitePointのLudovico Fischerの投稿をご覧ください。

httpリクエストを行うには、コンポーネントに別のメソッドfetchgithubdataを提供します。これにより、Github APIにリクエストを行い、結(jié)果を保存します。また、このユーザーのデータが既にあるかどうかを最初に確認(rèn)します。そうでない場(chǎng)合は、リクエストが行われません。

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

ユーザー名が変更されたら、このメソッドをトリガーする必要があります。
もう1つ注意すべきことは、Vueが使用しているデータを追跡するため、ビューをいつ更新するかがわかっていることです。詳細(xì)に説明する優(yōu)れたリアクティブガイドがありますが、基本的にはオブジェクトからプロパティを追加または削除したことを魔法のように知ることはできません。

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Vueはこれを認(rèn)識(shí)せず、見(jiàn)解を更新しません。代わりに、特別なVUE.SETメソッドを使用できます。これは、キーを追加したことをVUEに明示的に伝えます。上記のコードは次のようになります：

mkdir src
touch webpack.config.js src/index.html src/index.js

このコードはthis.githubdataを変更し、渡すキーと値を追加します。また、変更をvueに通知しているため、変更できるようにします。

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

今、私たちのコードは次のようになります：

最後に、アプリコンポーネントを使用してgithuboutputコンポーネントを登録する必要があります。

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

そして、テンプレートに含めます：

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

畫(huà)面に取得したデータを表示するビューコードを作成していませんが、ユーザー名でフォームに記入し、Vue DevtoolsをチェックしてGitHubから要求されたデータを表示できるはずです。これは、これらの開(kāi)発者がどれほど実用的で強(qiáng)力であるかを示しています。
ビューにいくつかの統(tǒng)計(jì)を示します

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

テンプレートを更新して、データを表示できるようになりました。このコードを別のV-IF指令に包み、リクエストが完了した後にのみデータをレンダリングします。

この方法で、GitHubの詳細(xì)を畫(huà)面にレンダリングできるようになり、アプリケーションが完了しました！

リファクタリング

私たちは間違いなくいくつかの改善をすることができます。上記のGitHubデータをレンダリングするHTMLコードには、現(xiàn)在のユーザーのデータのごく一部のみが必要です。これは別のコンポーネントにとって完璧なケースであり、ユーザーデータを提供できます。レンダリングできます。

他のコンポーネントと同じ構(gòu)造を持つgithubuserdataコンポーネントを作成しましょう。

このコンポーネントにはわずかな違いは1つだけです。プロパティデータが取得されます。これはユーザーのデータです。プロパティ（または「プロップ」）は、コンポーネントが親コンポーネントを通過(guò)するデータのビットであり、VUEで非常に同様に動(dòng)作して反応します。 VUEでは、コンポーネントが必要とするすべてのプロパティを明示的に宣言する必要があるため、ここでコンポーネントはプロパティデータを取得します。

<template>
  <p>This is my HTML for my component</p>
</template>

<??>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

私がVUEについて本當(dāng)に気に入っているのは、あなたが非常に明確にしなければならないことです。これにより、コードが使いやすくなり、プロジェクトがより大きく複雑になるにつれて、メンテナンスが容易になると思います。

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

新しいテンプレートでは、以前とまったく同じHTMLがありますが、githubdata [currentusername]：

の代わりにデータを參照できます。

このコンポーネントを使用するには、GitHubOutputコンポーネントを更新する必要があります。まず、Githubuserdata：

をインポートして登録します

mkdir src
touch webpack.config.js src/index.html src/index.js

コンポーネントを宣言するときに任意の名前を使用できます。そのため、github-user-dataを置くと、必要な名前を配置できます。ダッシュを含むコンポーネントに固執(zhí)することをお?jiǎng)幛幛筏蓼埂?Vueはこれを強(qiáng)制しませんが、カスタム要素のW3C仕様は、HTMLの將來(lái)のバージョンで追加された要素とのライフネームの競(jìng)合を防ぐためにダッシュを含める必要があると述べています。

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

コンポーネントを宣言した後、テンプレートで使用できます。
ここでの重要なポイントは、データ屬性をコンポーネントに渡す方法です。
このプロパティの先頭にあるコロンは、渡すプロパティが動(dòng)的であり、データが変更されるたびにコンポーネントを更新する必要があることをVUEに示します。 Vueは、Githubdata [currentUsername]の値を評(píng)価し、データが変更されるにつれてGithubuserdataコンポーネントが最新のままであることを確認(rèn)します。

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

見(jiàn)つけた場(chǎng)合：データは少し短くて魔法のように、より長(zhǎng)いV-bind構(gòu)文を使用することもできます：

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2つは同等ですので、好みを使用してください。

結(jié)論

このように、私たちのgithubアプリケーションはかなり良い狀態(tài)にあります！ Githubですべてのコードを見(jiàn)つけることができ、オンラインで実行されているアプリケーションを表示することもできます。

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

多くの良いことを聞いたので、それを使い始めたとき、私はそれを使い始めたとき、私はそれを私の期待に応えたと言ってうれしいです。 Vueを使用すると、反応の最高の部分を取り、それらをAngularの最高の部分と融合するように感じます。一部の指令（V-IF、V-ELSE、V-Modelなど）は非常に簡(jiǎn)単に開(kāi)始できます（ReactのJSX構(gòu)文の條件付き判斷よりもすぐに理解しやすい）が、VueのコンポーネントシステムはReactのコンポーネントシステムと非常に似ていると感じています。

システムを小さなコンポーネントに分解する必要があります。全體として、非常にシームレスな體験であることがわかりました。 Vueチームのドキュメントをまだ十分に賞賛することはできません。それは絶対に素晴らしいことです。ガイドは優(yōu)れており、APIリファレンスは包括的であり、ナビゲートして正確なものを見(jiàn)つけることができます。

この投稿が好きで、もっと知りたい場(chǎng)合は、最良の出発點(diǎn)は間違いなく公式Vue.jsのWebサイトです。

vue.js 2.0

に関するよくある質(zhì)問(wèn)

vue.js 1.0とvue.js 2.0の主な違いは何ですか？

vue.js 2.0には、前任者よりもいくつかの改善があります。最も重要な変更は、仮想DOMの導(dǎo)入であり、実際のDOMでの直接的な操作を減らすことでパフォーマンスを向上させます。 Vue.js 2.0は、構(gòu)築された複雑なユーザーインターフェイスを容易にするために、簡(jiǎn)略化されたコンポーネントベースの開(kāi)発構(gòu)文も導(dǎo)入しています。さらに、Vue.js 2.0はサーバー側(cè)のレンダリングをサポートしており、アプリケーションのパフォーマンスを向上させ、SEOの最適化を容易にします。

vue.js 2.0でオブザーバーを使用する方法は？

vue.js 2.0のオブザーバーを使用すると、データプロパティが変更されたときにカスタムロジックを?qū)g行できます。オブザーバーを使用するには、観察するデータ屬性と同じ名前の関數(shù)を定義し、VUEインスタンスの「監(jiān)視」オブジェクトに追加する必要があります。この方法は、データ屬性が変更され、その新しい値と古い値がパラメーターとして使用されるたびに呼び出されます。

Vue.jsでの緊急積み込みは何ですか？どうすれば使用できますか？

緊急読み込みは、Vue.jsの概念であり、必要になる前にサーバーからデータをロードできるため、アプリケーションのパフォーマンスが向上します。 Vue.jsで緊急のロードを使用するには、「作成された」ライフサイクルフックを使用して、コンポーネントが作成されたときにサーバーからデータを取得できます。このデータは、コンポーネントがレンダリングされた直後に利用可能になります。

vue.js 2.0で計(jì)算されたプロパティを使用する方法は？

Vue.js 2.0の計(jì)算プロパティを使用すると、データに基づいて計(jì)算された再利用可能なプロパティを定義できます。計(jì)算されたプロパティを使用するには、計(jì)算された値を返すメソッドを定義し、VUEインスタンスの計(jì)算されたオブジェクトに追加する必要があります。この方法は、データが変更に依存する場(chǎng)合はいつでも呼び出され、依存関係が再び変化するまでその返品値はキャッシュされます。
vue.js 2.0でイベントを処理する方法は？
VUE.JS 2.0は、DOMイベントを聞いてイベントが発生したときにカスタムロジックを?qū)g行できる強(qiáng)力なイベント処理システムを提供します。イベントを処理するには、テンプレート內(nèi)の「V-on」ディレクティブを使用し、次に聴くイベントの名前とイベントが発生したときに実行する方法を使用する必要があります。この方法は、イベントオブジェクトをパラメーターとして使用して呼び出されます。
laravelでvue.js 2.0を使用する方法は？
Vue.js 2.0は、人気のあるPHPフレームワークであるLaravelと簡(jiǎn)単に統(tǒng)合できます。 Laravelにはvue.jsサポートが付屬しているため、すぐにVue.jsコンポーネントの構(gòu)築を開(kāi)始できます。 laravelプロジェクトでvue.jsを使用するには、htmlにvue.jsスクリプトを含める必要があります。次に、別のJavaScriptファイルにVUEコンポーネントを定義する必要があります。

vue.js 2.0をWebpackで使用する方法は？

webpackは、vue.jsコンポーネントを単一のJavaScriptファイルにバンドルするために使用できるモジュールバンドラーです。 vue.jsをWebpackで使用するには、WebpackがVueコンポーネントを理解できるようにする「Vue-Roader」パッケージをインストールする必要があります。その後、javaScriptファイルにVUEコンポーネントをインポートし、通常どおり使用できます。

typeScriptでvue.js 2.0を使用する方法は？

vue.js 2.0は、javascriptの靜的に型付けされたスーパーセットであるTypeScriptをサポートしています。 Vue.jsをTypeScriptで使用するには、「Vue-Class-Component」パッケージをインストールする必要があります。これにより、TypeScriptクラスを使用してVueコンポーネントを定義できます。その後、VUEコンポーネントをTypeScriptクラスとして定義し、TypeScriptの靜的タイプ化された機(jī)能を使用して、コンパイル時(shí)にエラーをキャッチできます。

vuexでvue.js 2.0を使用する方法は？

Vuexは、vue.jsの州管理ライブラリであり、集中型ストレージでアプリケーションの狀態(tài)を管理できるようにします。 Vuexを使用してVuexを使用するには、「Vuex」パッケージをインストールし、Vuexストレージでステータス、突然変異、アクション、およびゲッターを定義する必要があります。その後、「this。$ store」プロパティを使用して、州にアクセスし、Vueコンポーネントからアクションをスケジュールできます。

vue.js 2.0を使用してVueルーターを使用する方法は？

Vue Routerは、vue.jsのルーティングライブラリであり、アプリケーションのルートを定義できるようにします。 Vue.jsでVueルーターを使用するには、「Vue-Router」パッケージをインストールし、Vueルーターインスタンスでルートを定義する必要があります。その後、「ルーターリンク」コンポーネントを使用してルート間をナビゲートし、「ルータービュー」コンポーネントを使用して現(xiàn)在ルーティングされているコンポーネントを表示できます。

以上がVue.js 2.0フレームワークで起きて実行しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。