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 までご連絡ください。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。