Vue でコンポーネントを作成する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue でコンポーネントを作成する方法

亚连

Jun 05, 2018 am 09:45 AM

作成するどうやってコンポーネント

Vue でコンポーネントを作成する方法は何ですか?以下に、Vue でコンポーネントを作成する 2 つの方法の概要を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

コンポーネントを作成する 2 つの方法の概要

1. グローバル登録

2. ローカル登録

var child=Vue.extend({})
var parent=Vue.extend({})

ログイン後にコピー

Vue.extend() グローバルメソッドの生成のコンストラクターは、サブクラス

基本 Vue コンストラクターを使用して「サブクラス」を作成します。

このように書くのは非常に面倒です。そのため、vue は簡略化されました

コンポーネントを直接作成して登録するには、Vue.component() を使用します:

Vue.component(id,options) グローバルコンポーネントを登録するには、グローバルメソッドが使用されます

id は文字列型であり、名前です登録されたコンポーネントの

optionsはオブジェクトです

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

ログイン後にコピー

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

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

オプションオブジェクトのコンポーネント属性にローカル登録を実装します:

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

ログイン後にコピー

==ローカル登録はオプションオブジェクトに作成されます==

注: これはコンポーネントであり、複数のコンポーネントを定義できます。それ。

簡単に書くとこんな感じ

<body>
 <p id=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </script>
</body>

ログイン後にコピー

親コンポーネントを登録します。次に、親コンポーネントのオプションオブジェクトに子サブコンポーネントを登録します。子コンポーネントのタグを親コンポーネントのテンプレートに書き込みます。

ページのスタイル構造は

<p>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</p>

ログイン後にコピー

です注: ローカルに登録されたサブコンポーネントを単独で直接使用することはできません。

pにタグがぶら下がっている場合、エラーが報告されます

<p id=&#39;box&#39;>  
 <child></child>
</p>

ログイン後にコピー

以上、皆さんの参考になれば幸いです。

Angular で ng-alain に基づいて独自の選択コンポーネントを定義するにはどうすればよいですか?

Vueで監視オブジェクトと対応する値の変更を実装する方法

Vueが配列またはオブジェクトの変更を検出できない問題を解決するにはどうすればよいですか?

以上がVue でコンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

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

ホットツール

ホットトピック

Java チュートリアル

1677

CakePHP チュートリアル

1431

Laravel チュートリアル

1334

PHP チュートリアル

1279

C# チュートリアル

1257

Related knowledge

Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法 Dec 28, 2023 pm 03:43 PM

win10で一部のゲームをプレイすると、画面がフリーズしたり画面がぼやけるなどの不具合が多くのユーザーに発生しますが、現時点ではダイレクトプレイ機能をオンにすることで問題を解決でき、機能の操作方法も非常に簡単です。 win10 の古いコンポーネントである Directplay をインストールする方法 1. 検索ボックスに「コントロールパネル」と入力して開きます 2. 表示方法として大きなアイコンを選択します 3. 「プログラムと機能」を見つけます 4. 左側をクリックして有効にするか、 Win 機能をオフにする 5. ここで古いバージョンを選択しますチェックボックスをオンにするだけです

Gree+ でファミリーを作成する方法 Mar 01, 2024 pm 12:40 PM

「Gree+ ソフトウェアでファミリーを作成する方法を知りたい」という友達がたくさんいました。操作方法は次のとおりです。詳しく知りたい友達は、一緒に見に来てください。まず、携帯電話で Gree+ ソフトウェアを開き、ログインします。次に、ページ下部のオプションバーで、右端の [My] オプションをクリックして、個人アカウントページに入ります。 2. マイページにアクセスすると、「ファミリー」の下に「ファミリーを作成」という項目があるので、それをクリックして入力します。 3. 次にファミリーを作成するページにジャンプし、表示に従って入力ボックスに設定するファミリー名を入力し、入力後右上の「保存」ボタンをクリックします。 4. 最後に、ページの下部に「正常に保存しました」というプロンプトが表示され、ファミリが正常に作成されたことが示されます。

Realme Phoneでフォルダーを作成するにはどうすればよいですか? Mar 23, 2024 pm 02:30 PM

タイトル: Realme Phone 初心者ガイド: Realme Phone でフォルダーを作成する方法?今日の社会において、携帯電話は人々の生活に欠かせないツールとなっています。人気のスマートフォンブランドとして、Realme Phone はそのシンプルで実用的なオペレーティングシステムでユーザーに愛されています。 Realme 携帯電話を使用する過程で、多くの人が携帯電話上のファイルやアプリケーションを整理する必要がある状況に遭遇する可能性があり、フォルダーを作成するのが効果的な方法です。この記事では、ユーザーが携帯電話のコンテンツをより適切に管理できるように、Realme 携帯電話にフォルダーを作成する方法を紹介します。いいえ。

GIMPでピクセルアートを作成する方法 Feb 19, 2024 pm 03:24 PM

この記事は、Windows でのピクセルアート作成に GIMP を使用することに興味がある場合に役立ちます。 GIMP は、無料でオープンソースであるだけでなく、美しい画像やデザインを簡単に作成できる有名なグラフィック編集ソフトウェアです。 GIMP は、初心者にもプロのデザイナーにも同様に適していることに加えて、描画と作成のための唯一の構成要素としてピクセルを利用するデジタルアートの形式であるピクセルアートの作成にも使用できます。 GIMP でピクセルアートを作成する方法 Windows PC で GIMP を使用してピクセルアートを作成する主な手順は次のとおりです。 GIMP をダウンロードしてインストールし、アプリケーションを起動します。新しいイメージを作成します。幅と高さのサイズを変更します。鉛筆ツールを選択します。ブラシの種類をピクセルに設定します。設定

ハイチャートを使用してガントチャートを作成する方法 Dec 17, 2023 pm 07:23 PM

Highcharts を使用してガントチャートを作成する方法には、特定のコードサンプルが必要です。はじめに: ガントチャートは、プロジェクトの進捗状況や時間管理を表示するためによく使用されるチャート形式です。タスクの開始時刻、終了時刻、進捗状況を視覚的に表示できます。 Highcharts は、豊富なチャートタイプと柔軟な構成オプションを提供する強力な JavaScript チャートライブラリです。この記事では、Highcharts を使用してガントチャートを作成する方法と具体的なコード例を紹介します。 1. ハイチャート

iPhone 用の連絡先ポスターを作成する方法 Mar 02, 2024 am 11:30 AM

iOS17 では、Apple は一般的に使用される電話アプリと連絡先アプリに連絡先ポスター機能を追加しました。この機能を使用すると、ユーザーは連絡先ごとにパーソナライズされたポスターを設定できるため、アドレス帳がより視覚的で個人的なものになります。連絡先ポスターは、ユーザーが特定の連絡先をより迅速に識別して見つけるのに役立ち、ユーザーエクスペリエンスを向上させます。この機能により、ユーザーは自分の好みやニーズに応じて各連絡先に特定の写真やロゴを追加でき、アドレス帳のインターフェイスがより鮮明になり、iOS17 では Apple は iPhone ユーザーに自分自身を表現する新しい方法を提供し、パーソナライズ可能な連絡先ポスターを追加しました。連絡先ポスター機能を使用すると、他の iPhone ユーザーに電話をかけるときに、独自のパーソナライズされたコンテンツを表示できます。あなた

Django の概要: コマンドラインを使用して最初の Django プロジェクトを作成する Feb 19, 2024 am 09:56 AM

Django プロジェクトの旅を始めましょう: コマンドラインから開始して、最初の Django プロジェクトを作成します。Django は、強力で柔軟な Web アプリケーションフレームワークです。Python をベースにしており、Web アプリケーションの開発に必要な多くのツールと機能を提供します。この記事では、コマンドラインから最初の Django プロジェクトを作成する方法を説明します。始める前に、Python と Django がインストールされていることを確認してください。ステップ 1: プロジェクトディレクトリを作成するまず、コマンドラインウィンドウを開き、新しいディレクトリを作成します。

古いバージョンのwin10コンポーネントの設定を開く方法 Dec 22, 2023 am 08:45 AM

Win10 の古いバージョンのコンポーネントは、デフォルトで閉じられていることが多いため、ユーザー自身が設定で有効にする必要があります。まず、設定を入力する必要があります。操作は非常に簡単です。以下の手順に従ってください。Win10 の古いバージョンはどこにありますか?バージョンコンポーネント? 開く 1. [スタート] をクリックし、[Win システム] をクリックします 2. クリックしてコントロールパネルに入ります 3. 次に、下のプログラムをクリックします 4. [Win 機能を有効または無効にする] をクリックします 5. ここで必要なものを選択できます開く

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版

ホットトピック