vue 登録コンポーネントの使用手順-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vue 登録コンポーネントの使用手順

php中世界最好的语言

May 12, 2018 pm 02:32 PM

使用ステップ説明する

今回は、vue 登録コンポーネントを使用するための手順を説明します。vue 登録コンポーネントを使用する際の注意事項は何ですか? ここでは、実際的なケースを見てみましょう。

1. はじめに

コンポーネントシステムは、Vue.js の重要な概念の 1 つであり、独立した再利用可能な小さなコンポーネントを使用して、あらゆる種類の大規模なアプリケーションを構築できるようにします。インターフェースはコンポーネントツリーに抽象化できます

では、コンポーネントとは何でしょうか?

コンポーネントは

HTML 要素を拡張し、再利用可能な HTML コードをカプセル化できます。コンポーネントはカスタム HTML 要素と考えることができます。

2. コンポーネントの登録方法

Vue.js の

コンポーネントを使用するには、コンポーネントコンストラクターの作成、コンポーネントの登録、コンポーネントの使用の 3 つの手順があります。

次のコードは、これら 3 つのステップを示しています

<!DOCTYPE html>
<html>
 <body>
  <p id="app">
   <!-- 注意： #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
   <my-component></my-component>
  </p>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  <!-- 1.创建一个组件构造器 -->
  var myComponent = Vue.extend({
   template: '<p>This is my first component!</p>'
  })
  
  <!-- 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component> -->
  Vue.component('my-component', myComponent)
  
  <!-- 3.通过id=app进行挂载 -->
  new Vue({
   el: '#app'
  });
  
 </script>
</html>

ログイン後にコピー

実行結果は次のとおりです:

1. グローバル登録とローカル登録

Vue.component() を呼び出してコンポーネントを登録するとき、コンポーネントの登録は global です。これは、コンポーネントがどの Vue サンプルでも使用できることを意味します。

グローバル登録が必要ない場合、またはコンポーネントを他のコンポーネントで使用したい場合は、オプションオブジェクトのコンポーネント属性を使用してローカル登録を実装できます。

私自身の理解では、コンポーネントはグローバルコンポーネントを表し、コンポーネントはローカルコンポーネントを表します

上記の例は、ローカル登録に変更できます:

<!DOCTYPE html>
<html>
 <body>
  <p id="app">
   <!-- 3. my-component只能在#app下使用-->
   <my-component></my-component>
  </p>
 </body>
 <script src="js/vue.js"></script>
 <script>
  // 1.创建一个组件构造器
  var myComponent = Vue.extend({
   template: '<p>This is my first component!</p>'
  })
  
  new Vue({
   el: '#app',
   components: {
   // 2. 将myComponent组件注册到Vue实例下
    'my-component' : myComponent
   }
  });
 </script>
</html>

ログイン後にコピー

my-component コンポーネントは #app に対応する Vue インスタンスの下に登録されているためです。 element なので、他の Vue インスタンスでは使用できません。

<p id="app2">
 <!-- 不能使用my-component组件，因为my-component是一个局部组件，它属于#app-->
 <my-component></my-component>
</p>
<script>
 new Vue({
  el: '#app2'
 });
</script>

ログイン後にコピー

2. コンポーネント登録構文シュガー上記のコンポーネント登録方法は少し面倒ですが、このプロセスを簡素化するために、Vue.js では登録構文シュガー

// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
 template: '<p>This is the first component!</p>'
})
var vm1 = new Vue({
 el: '#app1'
})

ログイン後にコピー

Vue.component( ) はタグ名、2 番目のパラメータはオプションオブジェクトです。オプションオブジェクトの template 属性を使用してコンポーネントテンプレートを定義します。

このメソッドを使用すると、Vue はバックグラウンドで自動的に Vue.extend() を呼び出します。

コンポーネントはローカル登録を実装します

var vm2 = new Vue({
 el: '#app2',
 components: {
  // 局部注册，my-component2是标签名称
  'my-component2': {
   template: '<p>This is the second component!</p>'
  },
  // 局部注册，my-component3是标签名称
  'my-component3': {
   template: '<p>This is the third component!</p>'
  }
 }
}

ログイン後にコピー

3. 親コンポーネントと子コンポーネント

コンポーネント内で他のコンポーネントを定義して使用することができ、親コンポーネントと子コンポーネントの間の関係を構成します。

<!DOCTYPE html>
<html>
 <body>
  <p id="app">
   <parent-component>
   </parent-component>
  </p>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  
  var Child = Vue.extend({
   template: '<p>This is a child component!</p>'
  })
  
  var Parent = Vue.extend({
   // 在Parent组件内使用<child-component>标签
   template :'<p>This is a Parent component</p><child-component></child-component>',
   components: {
    // 局部注册Child组件，该组件只能在Parent组件内使用
    'child-component': Child
   }
  })
  
  // 全局注册Parent组件
  Vue.component('parent-component', Parent)
  
  new Vue({
   el: '#app'
  })
  
 </script>
</html>

ログイン後にコピー

このコードの実行結果は次のとおりです

4. スクリプトタグまたはテンプレートタグを使用します

シンタックスシュガーはコンポーネントの登録を簡素化しますが、テンプレートオプションでの HTML 要素の結合はより面倒であり、これはまた、 HTML JavaScript との高い結合。

ありがたいことに、Vue.js には、JavaScript で定義された HTML テンプレートを分離する 2 つの方法が用意されています。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue组件</title>
 <script src="js/vue.js"></script>
</head>
<body>
 <p id="app1">
  <my-com></my-com>
  <my-com1></my-com1>
 </p>
 <template id="myCom">
  <p>这是template标签构建的组件</p>
 </template>
 <script type="text/x-template" id="myCom1">
  <p>这是script标签构建的组件</p>
 </script>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  Vue.component('my-com1', {
   template: '#myCom1'
  });
  var app1 = new Vue({
   el: '#app1',
   components: {
    'my-com': {
     template: '#myCom'
    }
   }
  });
 </script>
</body>
</html>

ログイン後にコピー

実行結果:

注:

ホットAIツール

Video Face Swap

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

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7677

CakePHP チュートリアル

1393

C# チュートリアル

1207

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

GoogleマップをiPhoneのデフォルト地図にする方法 Apr 17, 2024 pm 07:34 PM

iPhone のデフォルトの地図は、Apple 独自の地理位置情報プロバイダーである Maps です。マップは改善されていますが、米国外ではうまく機能しません。 Googleマップと比べて何も提供するものはありません。この記事では、Google マップを iPhone のデフォルトの地図として使用するための実行可能な手順について説明します。 Google マップを iPhone のデフォルトの地図にする方法 Google マップを携帯電話のデフォルトの地図アプリとして設定するのは、思っているよりも簡単です。以下の手順に従ってください – 前提条件 – 携帯電話に Gmail がインストールされている必要があります。ステップ 1 – AppStore を開きます。ステップ 2 – 「Gmail」を検索します。ステップ 3 – Gmail アプリの横にあるをクリックします

WeChat最新版へのアップグレード手順（WeChat最新版へのアップグレード方法を簡単にマスター）

WeChat は、より良いユーザーエクスペリエンスを提供するために新しいバージョンを継続的にリリースしている中国のソーシャルメディアプラットフォームの 1 つです。 WeChat を最新バージョンにアップグレードすることは、家族や同僚と連絡を取り合ったり、友人と連絡を取り合ったり、最新の動向を把握したりするために非常に重要です。 1. 最新バージョンの機能と改善点を理解する WeChat をアップグレードする前に、最新バージョンの機能と改善点を理解することが非常に重要です。パフォーマンスの向上やバグ修正については、WeChat 公式 Web サイトまたはアプリストアのアップデートノートを確認することで、新しいバージョンによってもたらされるさまざまな新機能について知ることができます。 2. 現在の WeChat バージョンを確認する WeChat をアップグレードする前に、携帯電話に現在インストールされている WeChat バージョンを確認する必要があります。クリックして WeChat アプリケーション「Me」を開き、メニュー「About」を選択すると、現在の WeChat バージョン番号が表示されます。 3. アプリを開きます

この Apple ID は iTunes Store でまだ使用されていません: 修正 Jun 10, 2024 pm 05:42 PM

AppleIDを使用してiTunesStoreにログインすると、「このAppleIDはiTunesStoreで使用されていません」というエラーが画面に表示される場合があります。心配するようなエラーメッセージはありません。これらのソリューションセットに従って問題を修正できます。解決策 1 – 配送先住所を変更する iTunes Store にこのプロンプトが表示される主な理由は、AppleID プロファイルに正しい住所がないことです。ステップ 1 – まず、iPhone で iPhone 設定を開きます。ステップ 2 – AppleID は他のすべての設定の最上位にある必要があります。それで、開けてください。ステップ 3 – そこに到達したら、「支払いと配送」オプションを開きます。ステップ 4 – Face ID を使用してアクセスを確認します。ステップ

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は？ Mar 18, 2024 pm 02:58 PM

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハードドライブ用の小型 HDD ベンチマークツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハードドライブとソリッドステートドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスクパフォーマンステストツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハードドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテストモードを提供し、ハードウェアのレビューで広く使用されています。

ShazamアプリがiPhoneで動作しない：修正 Jun 08, 2024 pm 12:36 PM

iPhone の Shazam アプリに問題がありますか? Shazam は、曲を聞いて曲を見つけるのに役立ちます。ただし、Shazam が正常に動作しない場合、または曲が認識されない場合は、手動でトラブルシューティングを行う必要があります。 Shazam アプリの修復にはそれほど時間はかかりません。したがって、これ以上時間を無駄にすることなく、以下の手順に従って Shazam アプリの問題を解決してください。解決策 1 – 太字テキスト機能を無効にする iPhone の太字テキストが、Shazam が正しく動作しない原因である可能性があります。ステップ 1 – これは iPhone の設定からのみ実行できます。それで、開けてください。ステップ 2 – 次に、そこにある「ディスプレイと明るさ」設定を開きます。ステップ 3 – 「太字テキスト」が有効になっている場合

foobar2000のダウンロード方法は？ -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供シンプルでわかりやすく、使いやすいインターフェースデザイン過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

iPhoneのスクリーンショットが機能しない: 修正方法 May 03, 2024 pm 09:16 PM

iPhone ではスクリーンショット機能が動作しませんか?スクリーンショットの撮影は非常に簡単で、音量を上げるボタンと電源ボタンを同時に押して携帯電話の画面を取得するだけです。ただし、デバイスでフレームをキャプチャする方法は他にもあります。解決策 1 – Assistive Touch の使用 Assistive Touch 機能を使用してスクリーンショットを撮ります。ステップ 1 – 電話の設定に移動します。ステップ 2 – 次に、タップしてアクセシビリティ設定を開きます。ステップ 3 – タッチ設定を開きます。ステップ 4 – 次に、Assistive Touch 設定を開きます。ステップ 5 – 携帯電話の Assistive Touch をオンにします。ステップ 6 – 「トップメニューのカスタマイズ」を開いてアクセスします。ステップ 7 – ここで必要なのは、これらの機能のいずれかを画面キャプチャにリンクすることだけです。それで最初をクリックしてください

iPhoneに時計アプリがない：それを修正する方法 May 03, 2024 pm 09:19 PM

携帯電話に時計アプリがありませんか?日付と時刻は iPhone のステータスバーに引き続き表示されます。ただし、時計アプリがないと、世界時計、ストップウォッチ、目覚まし時計、その他多くの機能を使用できません。したがって、見つからない時計アプリを修正することは、やるべきことリストの一番上に置く必要があります。これらの解決策は、この問題の解決に役立ちます。解決策 1 – 時計アプリを配置する誤って時計アプリをホーム画面から削除した場合は、時計アプリを元の場所に戻すことができます。ステップ 1 – iPhone のロックを解除し、App ライブラリページに到達するまで左にスワイプを開始します。ステップ 2 – 次に、検索ボックスで「時計」を検索します。ステップ 3 – 検索結果に以下の「時計」が表示されたら、それを長押しして、

See all articles

vue 登録コンポーネントの使用手順

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック