Vue.js 2.0フレームワークで起きて実行します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue.js 2.0フレームワークで起きて実行します

Jennifer Aniston

Feb 14, 2025 am 10:16 AM

Getting up and Running with the Vue.js 2.0 Framework

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

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

人気のJavaScript Framework vue.jsバージョンのV2のリリース以来、私はそれを試して、それがどのように感じられるかを見るのが待ちきれません。 AngularとReactに非常に精通している人として、私はそれらの類似点とvueの類似点と違いを見るのを楽しみにしています。

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

キーポイント

Vue.js 2.0は、効率的なレンダリングのためのReactにインスパイアされた仮想Domを導入し、Vue-RouterやVuexなどの改善されたライブラリを国家管理のために統合します。
コンポーネントはvue.js 2.0の基礎であり、アプリケーションは一連のネストされたコンポーネントに組み込まれており、コードをより適切に整理するために単一のファイルコンポーネント（.vue）が推奨されます。
Vueプロジェクトをゼロからセットアップするには、.vueファイルを処理するためにWebpackとVue-Roaderが必要であり、Babelは最新のJavaScript機能を使用して開発ワークフローを強化します。
vue devtoolsはデバッグに不可欠であり、アプリケーションの状態とコンポーネントを介してデータがどのように流れるかについての洞察を提供します。
VUE.JS 2.0は、双方向データの結合にVモデルを活用し、カスタムイベント処理にV-ONを使用することにより、インタラクティブフォームの構築を促進し、コンポーネント間で状態管理をシームレスにします。

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

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

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

今日の他のフレームワークと同様に、Vueのコアビルディングブロックはコンポーネントです。アプリケーションは、最終的なアプリケーションを生成するために互いに構築された一連のコンポーネントである必要があります。 Vue.jsはさらに一歩進んで、.vueファイルでコンポーネントを定義することを示唆している（必須ではないが）、ビルドツール（短時間でカバーする）がそれらのファイルを解析できることを示唆している。この記事の目的は、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>

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

設定プロジェクト

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

さて、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

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

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

<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をテンプレートとして使用するように指示します。

//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アプリケーションを書く

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

各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＃アプリが使用され、アプリケーションに置き換えることを意味します。

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

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

Vueはアプリケーションの構造を指定していないため、それはあなた次第です。最終的に各コンポーネントのフォルダーを作成することになりました。この場合は、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

ファイル構造は次のようになります：

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

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

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

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

現時点では、テンプレートはちょうど

です

こんにちは、世界！

、CSSファイルを空のままにします。主な作業は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"
    })
  ]
}

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

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

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

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

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

ほとんどの場合（およびこのチュートリアルの残りの部分では）、HTMLテンプレートを定義するため、他のコンポーネントでレンダリング関数を使用しません。ただし、詳細を知りたい場合は、レンダリング関数に関する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を実行します。デフォルトのブラウザは、

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

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

vue devtools

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

Getting up and Running with the Vue.js 2.0 Framework アプリケーションを構築します

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

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

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

初期設定

SRCディレクトリ内の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フォルダーの構造は次のようになります。

Vue.js

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

の

フォーム

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

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

のみが含まれています

github input

。すぐに正しく記入します。新しいコンポーネントを作成するときにテンプレートが正しく接続されているかどうかを確認できるように、仮想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の状態の概念に非常に似ています：

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/app/script.jsを更新して、githubinput：

に伝えます

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

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

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

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

トラックフォーム入力

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

入力の現在の値を追跡する

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

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

//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メソッドが呼び出されます。イベントの取り扱いについて詳しく知りたい場合は、イベント処理に関するVueのドキュメントを強くお勧めします。 V-Modelは、フォーム入力とデータの間に双方向のデータバインディングを作成します。舞台裏では、V-Modelは実際に、VUEコンポーネントのフォーム入力と更新の変更イベントをリスニングしています。

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

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

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

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

<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>

これに関するデータを直接参照できるため、このユーザー名はテキストボックスの最新値を提供します。空でない場合は、他のコンポーネントにデータが変更されたことを知ってほしい。これを行うには、メッセージバスを使用します。これらは、コンポーネントがイベントを発行し、他のイベントをリッスンするために使用できるオブジェクトです。アプリケーションが大きくなったら、Vuexなどのより構造化されたアプローチを検討することをお勧めします。現在、メッセージバスはこれを行うことができます。

良いニュースは、空の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

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

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

の結果を示します

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

次に、CurrentUsernameプロパティを呼び出して設定するOnusernMechangeメソッドを定義します。

OnusernMechangeメソッドを現在の範囲に明示的にバインドする必要はないことに注意してください。 Vueコンポーネントでメソッドを定義すると、VueはMyMethod.bind（this）を自動的に呼び出します。したがって、それらは常にコンポーネントにバインドされます。これは、Vueがそれらを完全に理解し、それに応じて設定できるように、メソッドオブジェクト上のコンポーネントのメソッドを定義する必要がある理由の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>

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

で動作します

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

github

からデータを取得します

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

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

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

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

<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が使用しているデータを追跡するため、ビューをいつ更新するかがわかっていることです。詳細に説明する優れたリアクティブガイドがありますが、基本的にはオブジェクトからプロパティを追加または削除したことを魔法のように知ることはできません。

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はこれを認識せず、見解を更新しません。代わりに、特別な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>

画面に取得したデータを表示するビューコードを作成していませんが、ユーザー名でフォームに記入し、Vue DevtoolsをチェックしてGitHubから要求されたデータを表示できるはずです。これは、これらの開発者がどれほど実用的で強力であるかを示しています。

ビューにいくつかの統計を示します

import Vue from 'vue'

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

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

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

リファクタリング

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

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

このコンポーネントにはわずかな違いは1つだけです。プロパティデータが取得されます。これはユーザーのデータです。プロパティ（または「プロップ」）は、コンポーネントが親コンポーネントを通過するデータのビットであり、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について本当に気に入っているのは、あなたが非常に明確にしなければならないことです。これにより、コードが使いやすくなり、プロジェクトがより大きく複雑になるにつれて、メンテナンスが容易になると思います。

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を置くと、必要な名前を配置できます。ダッシュを含むコンポーネントに固執することをお勧めします。 Vueはこれを強制しませんが、カスタム要素のW3C仕様は、HTMLの将来のバージョンで追加された要素とのライフネームの競合を防ぐためにダッシュを含める必要があると述べています。

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

コンポーネントを宣言した後、テンプレートで使用できます。

ここでの重要なポイントは、データ属性をコンポーネントに渡す方法です。

このプロパティの先頭にあるコロンは、渡すプロパティが動的であり、データが変更されるたびにコンポーネントを更新する必要があることをVUEに示します。 Vueは、Githubdata [currentUsername]の値を評価し、データが変更されるにつれてGithubuserdataコンポーネントが最新のままであることを確認します。

//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"
    })
  ]
}

見つけた場合：データは少し短くて魔法のように、より長いV-bind構文を使用することもできます：

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

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

結論

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

import Vue from 'vue'

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

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

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

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

vue.js 2.0

に関するよくある質問

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

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

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

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

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

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

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

Vue.js 2.0の計算プロパティを使用すると、データに基づいて計算された再利用可能なプロパティを定義できます。計算されたプロパティを使用するには、計算された値を返すメソッドを定義し、VUEインスタンスの計算されたオブジェクトに追加する必要があります。この方法は、データが変更に依存する場合はいつでも呼び出され、依存関係が再び変化するまでその返品値はキャッシュされます。

vue.js 2.0でイベントを処理する方法は？

VUE.JS 2.0は、DOMイベントを聞いてイベントが発生したときにカスタムロジックを実行できる強力なイベント処理システムを提供します。イベントを処理するには、テンプレート内の「V-on」ディレクティブを使用し、次に聴くイベントの名前とイベントが発生したときに実行する方法を使用する必要があります。この方法は、イベントオブジェクトをパラメーターとして使用して呼び出されます。

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

Vue.js 2.0は、人気のあるPHPフレームワークであるLaravelと簡単に統合できます。 Laravelにはvue.jsサポートが付属しているため、すぐにVue.jsコンポーネントの構築を開始できます。 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の静的タイプ化された機能を使用して、コンパイル時にエラーをキャッチできます。

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

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

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

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

以上がVue.js 2.0フレームワークで起きて実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。