Vue.js 学習 4: Vue コンポーネントの基本
Vue.js チュートリアル今日のコラムでは、Vue コンポーネントの基本的な知識を紹介します。
このシリーズのこれまでのメモでは、非常に単純な単一ページの Web アプリケーションを紹介してきましたが、多くの場合、ページ上には単純なインタラクティブな要素がいくつかしかありませんでした。ただし、実際の運用環境では、Web アプリケーションのユーザー インターフェイスは複数の複雑なページで構成されることがよくあります。このとき、コードの再利用性を考慮する必要がありますが、この問題を解決するために、Vue.js フレームワークが提案する解決策は、まずユーザー インターフェイス上の要素を機能ごとに独立したコンポーネントに分割することです。ナビゲーション、コラム、掲示板、データフォーム、ユーザー登録フォーム、ユーザーログインインターフェースなどこのようにして、その後の作業では、レゴのおもちゃで遊ぶのと同じように、必要に応じてこれらのコンポーネントをさまざまな特定のアプリケーションに組み合わせることができます。全体として、コンポーネント システムは、Vue.js フレームワークを学習する際に習得しなければならない重要な概念です。以下、このノートでは、Vue.js フレームワークでコンポーネントを構築および使用する基本的な方法を体験するための一連の実験例を書きます。
すべての実験を開始する前に、次の一連の実験プロジェクトを保存するために、code ディレクトリに 00_test という名前のディレクトリを作成する必要があります。これらのプロジェクトは、以前は Vue コンポーネントの構築と使用を経験していましたが、実際のアプリケーション機能を持っていないため、##00 という番号を付けました。それでは、最初の実験を始めましょう！これを行うには、引き続き code/00_test ディレクトリに component_1 という名前の別の実験用ディレクトリを作成し、このディレクトリで npm install vue コマンドを実行する必要があります。 Vue.js フレームワークをインストールします。最後に、code/00_test/component_1 ディレクトリに index.htm という名前のファイルを作成し、次のコードを入力するだけです。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA -Compatible" content="ie=edge">
<title>学习 vue 组件实验（1）：组件注册</title>
`</head>
<body>
<p id="app">
<say-hello :who="who"></say-hello>
<welcome-you :who="who"></welcome-you>
</p>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局组件注册
Vue.component('say-hello', {
template: `<h1>你好， {{ you }}！</h1>`,
props: ['who'],
data: function() {
return {
you: this.who
};
}
});
const app = new Vue({
el: '#app',
// 局部组件注册
components: {
'welcome-you': {
template: `<h2>欢迎你， {{ you }}！</h2>`,
props: ['who'],
data: function() {
return {
you: this.who
};
}
}
},
data: {
who: 'vue'
}
});
</script>
</body>
</html>say-hello コンポーネントと welcome-you コンポーネントを 2 つの異なる方法で作成して登録しました。次に、これら 2 つのコンポーネントを使用して、これら 2 つのコンポーネントの使用方法を紹介します。 1 つ目は say-hello コンポーネントです。このコンポーネントは、Vue.component() メソッドを呼び出すことによってアプリケーションに作成および登録されます。このメソッドを使用して作成されたコンポーネントは通常、「として」と呼ばれます。グローバル コンポーネント」を呼び出す場合、呼び出し時に 2 つのパラメータを指定する必要があります:
- 最初のパラメータは、コンポーネントの名前を指定するために使用される文字列オブジェクトである必要があります。これはカスタム タグ要素でもありますHTML ドキュメントで使用したいと考えています。HTML コードでは大文字と小文字が区別されないため、コンポーネントに名前を付けるときは小文字を使用することを個人的にお勧めします。単語の間に小文字を使用できます。
-
この区切り文字は区切り文字です。 - 2 番目のパラメーターは、コンポーネントのさまざまな特定のパラメーターを設定するために使用される JavaScript オブジェクトである必要があります。ここでは、次の 3 つの最も基本的なパラメータが定義されています:
- template
: このパラメータは、コンポーネントの HTML テンプレート コードを指定するために使用される文字列オブジェクトです。このコード スニペットでは、対応する DOM オブジェクトにはルート ノードが 1 つだけ必要であり、ルート ノードを 1 つだけ持つことができると記載されています。このオブジェクトは、最終的な HTML ドキュメントのコンポーネントに対応するカスタム タグによって表されます。ここでは、<say-hello>です。 - props
: このパラメータは文字列配列です。配列内の各要素は、コンポーネントに対応するカスタム タグのプロパティです。コンポーネントのユーザーは、##v- を渡すことができます。 bindディレクティブは、このプロパティを特定のデータにバインドして、データをコンポーネントに転送できるようにします。たとえば、ここでは、<say-hello>タグのv-bindディレクティブを使用して、タグのwho属性を Vue にバインドしました。インスタンス オブジェクトをwhoデータに追加し、それをsay-helloコンポーネントに渡します。 data - : このパラメーターは、呼び出し元から取得するコンポーネント自体のデータ (ここでは
youなど) を設定するために使用される関数です。 ## データが割り当てられます。後者の場合、thisリファレンスを使用して取得できます。もちろん、上記の 3 つの基本パラメータに加えて、カスタム イベントやその処理関数など、コンポーネントにさらに多くのパラメータを設定することもできます。これについては後続のプログラムで記述します。 . 経験で示される。
下面，我们再来看
welcome-you组件的构建。如你所见，该组件是在 vue 实例的components成员中构建并注册到应用程序中的，使用该方法创建的组件通常被称之为"局部组件"（它与全局组件的区别是，全局组件会在程序运行时全部加载，而局部组件只会在被实际用到时加载） 。该components成员的值也是一个 JSON 格式的数据对象，该数据对象中的每一个成员都是一个局部组件，这些组件采用键/值对的方式来定义,键对应的是组件的名称，值对应的是组件参数的设置。当然了，由于局部组件的命名规则与具体参数的设置方法都与全局对象一致，这里就不再重复说明了。需要注意的是，第一个实验项目的编写方式将 HTML 代码、Vue 实例的构建代码以及组件的构建代码糅合在了一起，这对于提高代码的可复用性这个目的来说，显然是不行的。要想解决这个问题，我们可以利用 ES6 规范新增的模块规则将这三部分代码隔离开来。为了体验这种用法，我继续开始了第二个实验。具体做法就是在
code/00_test目录中再创建一个名为component_2的实验目录，并在该目录下执行npm install vue命令来安装 Vue.js 框架。最后，我只需在code/00_test/component_2目录下创建一个名为index.htm的文件，并输入如下代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <script src="./node_modules/vue/dist/vue.js"></script> <script type="module" src="./main.js"></script> <title>学习 vue 组件实验（2）：以 ES6 模块的方式注册组件</title> </head> <body> <p id="app"> <say-hello :who="who"></say-hello> </p> </body> </html>
ログイン後にコピー在上述 HTML 代码中，我们在照常引入 vue.js 框架之后，使用模块的方式引入了
main.js脚本文件，最好在<p id="app">标签中使用了后面将要定义的组件所对应的自定义标签。接下来，我只需要在相同的目录下创建一个名为main.js的 JavaScript 脚本文件，并在其中输入如下代码：// import Vue from './node_modules/vue/dist/vue.js'; import sayhello from './sayhello.js'; const app = new Vue({ el: '#app', components: { 'say-hello': sayhello }, data: { who:'vue' } });ログイン後にコピー在上述 JavaScript 代码中，我首先使用了 ES6 新增的
import-from语句导入了后续要在sayhello.js文件中构建的组件，然后在构建 Vue 实例时将其注册成了局部组件。最后，我只需在同一目录下再创建这个sayhello.js脚本文件，并在其中输入如下代码：const tpl = ` <p> <h1>你好， {{ you }}！</h1> <input type="text" v-model="you" /> </p> `; const sayhello = { template: tpl, props : ['who'], data : function() { return { you: this.who } } }; export default sayhello;ログイン後にコピー在这部分代码中，我先定义了一个局部组件，然后再使用 ES6 新增的
export default语句将其导出为模块。当然，考虑到各种 Web 浏览器对 ES6 规范的实际支持情况，以及 Vue.js 框架本身使用的是 CommonJS 模块规范，所以上述实验依然可能不是编写 Vue.js 项目的最佳方式，其中可能还需要配置 babel 和 webpack 这样的转译和构建工具来辅助。在下一篇笔记中，我就来记录如何使用这些工具来构建具体的 vue 应用程序。相关学习推荐：js视频教程
- template
以上がVue.js 学習 4: Vue コンポーネントの基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1659
14
1415
52
1310
25
1258
29
1232
24
Vue コンポーネント通信: コンポーネント破棄通信には $destroy を使用します
Jul 09, 2023 pm 07:52 PM
Vue コンポーネント通信: コンポーネント破棄通信には $destroy を使用します。 Vue 開発において、コンポーネント通信は非常に重要な側面です。 Vue は、props、emit、vuex など、コンポーネント通信を実装するためのさまざまな方法を提供します。この記事では、コンポーネント通信の別の方法である $destroy を使用したコンポーネント破棄通信を紹介します。 Vue では、各コンポーネントにはライフサイクルがあり、これには一連のライフサイクル フック関数が含まれます。コンポーネントの破棄もその 1 つです。Vue は $de を提供します。
Vue コンポーネント通信: データ監視のためにウォッチと計算を使用
Jul 10, 2023 am 09:21 AM
Vue コンポーネントの通信: データ監視のためにウォッチと計算を使用する Vue.js は人気のある JavaScript フレームワークであり、その中心的な考え方はコンポーネント化です。 Vue アプリケーションでは、異なるコンポーネント間でデータを転送および通信する必要があります。この記事では、Vue の watch と computed を使用してデータを監視し、応答する方法を紹介します。 watch Vue では、watch は 1 つ以上のプロパティの変更を監視するために使用できるオプションです。
Vue の実践: 日付ピッカー コンポーネントの開発
Nov 24, 2023 am 09:03 AM
Vue 実践戦闘: 日付ピッカー コンポーネント開発 はじめに: 日付ピッカーは日常の開発でよく使用されるコンポーネントで、簡単に日付を選択でき、さまざまな設定オプションが提供されます。この記事では、Vue フレームワークを使用して単純な日付ピッカー コンポーネントを開発する方法を紹介し、具体的なコード例を示します。 1. 要求分析 開発を始める前に、コンポーネントの機能や特徴を明確にするために要求分析を行う必要があります。一般的な日付ピッカー コンポーネントの機能に従って、次の機能ポイントを実装する必要があります。 基本機能: 日付を選択でき、
Vue はコンポーネントの再利用と拡張をどのように実装しますか?
Jun 27, 2023 am 10:22 AM
フロントエンド テクノロジの継続的な開発により、Vue はフロントエンド開発で人気のあるフレームワークの 1 つになりました。 Vue では、コンポーネントは中心的な概念の 1 つであり、これによりページをより小さく管理しやすい部分に分割できるため、開発効率とコードの再利用性が向上します。この記事では、Vue がコンポーネントの再利用と拡張を実装する方法に焦点を当てます。 1. Vue コンポーネントの再利用ミックスイン ミックスインは、Vue でコンポーネント オプションを共有する方法です。ミックスインを使用すると、複数のコンポーネントのコンポーネント オプションを単一のオブジェクトに結合して最大限に活用できます。
Vue プロジェクトでサードパーティ ライブラリを使用する方法
Oct 15, 2023 pm 04:10 PM
Vue は、最新の Web アプリケーションの構築に役立つ豊富なツールと機能を提供する人気の JavaScript フレームワークです。 Vue 自体はすでに多くの実用的な機能を提供していますが、場合によっては、Vue の機能を拡張するためにサードパーティのライブラリを使用する必要がある場合があります。この記事では、Vue プロジェクトでサードパーティ ライブラリを使用する方法を紹介し、具体的なコード例を示します。 1. サードパーティ ライブラリを導入する Vue プロジェクトでサードパーティ ライブラリを使用するための最初のステップは、サードパーティ ライブラリを導入することです。以下の方法で導入できます
Vue のコンポーネントのライフサイクルについての深い理解
Oct 15, 2023 am 09:07 AM
Vue のコンポーネントのライフ サイクルを深く理解するには、具体的なコード サンプルが必要です はじめに: Vue.js は、そのシンプルさ、学習の容易さ、効率性、柔軟性により開発者に好まれている進歩的な JavaScript フレームワークです。 Vue のコンポーネント開発では、コンポーネントのライフサイクルを理解することが重要です。この記事では、Vue コンポーネントのライフ サイクルを詳しく説明し、読者が Vue コンポーネントをよりよく理解して適用できるように、具体的なコード例を示します。 1. Vue コンポーネントのライフサイクル図 Vue コンポーネントのライフサイクルは、コンポーネントとして捉えることができます。
Vueコンポーネント開発：タブページコンポーネントの実装方法
Nov 24, 2023 am 08:41 AM
Vue コンポーネント開発: タブ コンポーネントの実装方法 最近の Web アプリケーションでは、タブ ページ (Tab) が広く使用されている UI コンポーネントです。 Tab コンポーネントは、関連する複数のコンテンツを 1 ページに表示し、タブをクリックすることでコンテンツを切り替えることができます。この記事では、Vue.js を使用して単純なタブ コンポーネントを実装する方法と詳細なコード例を紹介します。 Vue タブ コンポーネントの構造 タブ コンポーネントは通常、タブとパネルの 2 つの部分で構成されます。ラベルはサーフェスを識別するために使用されます
Vue コンポーネントで複数のデータ対話方法を切り替える方法
Oct 08, 2023 am 11:37 AM
Vue コンポーネントで複数のデータ インタラクション メソッドを切り替える方法 Vue コンポーネントを開発するとき、API を介したデータのリクエスト、フォームを介したデータの入力、リアルタイムでのデータのプッシュなど、さまざまなデータ インタラクション メソッドに切り替える必要があるシナリオによく遭遇します。 WebSocket などを介して。この記事では、Vue コンポーネントで複数のデータ対話メソッドの切り替えを実装する方法を紹介し、具体的なコード例を示します。方法 1: API リクエスト データ 場合によっては、バックグラウンド データを取得するために API を介してデータをリクエストする必要があります。下
