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

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>

ログイン後にコピー

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

ログイン後にコピー

で動作します

繰り返しますが、これはあらゆる角度開発者にとって非常に馴染みがあります。ここでは、トリプルサインの代わりにダブルサインを使用します。これは、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>

ログイン後にコピー

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>

ログイン後にコピー

import Vue from 'vue'

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

ログイン後にコピー

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

リファクタリング

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

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

<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

ログイン後にコピー

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

このコンポーネントを使用するには、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>

ログイン後にコピー

//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つは同等ですので、好みを使用してください。

結論

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を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 サイトの他の関連記事を参照してください。