ホームページ >ウェブフロントエンド >jsチュートリアル >Vue グローバル コンポーネントの概要
今回は、vue グローバル コンポーネントの概要についてお届けします。vue グローバル コンポーネントの概要についての注意点は何ですか?実際の事例を見てみましょう。
データ駆動型とコンポーネント化は、vue.js の 2 つの最も重要な機能です。コンポーネント化とは、コードの再利用を容易にし、開発効率を向上させることです。 Vue コンポーネントを作成するには 4 つの一般的な方法があり、それぞれに独自の特性があり、さまざまなシナリオに適しています。
構造:
// 组件的注册 、 Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ // 组件中的属性 } }, method: { // 组件中的方法 } ...... // 组件其他的属性和方法 }) // 组件的使用 new Vue({ el: '#app' })
script タグ内の Vue.component() を通じてグローバルコンポーネントを定義し、 new Vue() を通じてそのコンポーネントを ID アプリを使用して HTML ファイルに適用しますラベル内のインスタンス。
特徴:
<1> このメソッドで定義されたコンポーネントは、HTML ファイルの script タグで直接定義して使用できます。インスタンスの使用。プロジェクトが比較的単純な場合に適しています。Vue.component() はコンポーネントが定義されるたびに再利用する必要があり、コンポーネント名を同じにすることはできません。ウェルカムコンポーネント
2. ローカルコンポーネント
の構造:// 构造组件对象 const componentName = { template: // 组件的html结构, data(){ return{ // 组件中的属性 } }, method: { // 组件中的方法 } ...... // 组件其他的属性和方法 } // 组件的使用 new Vue({ el: '#app', components: { // 组件注册、调用 componentName } })はscriptタグでコンポーネントオブジェクトを定義し、Vueインスタンスのcomponents属性を通じてコンポーネントを登録して呼び出します。
<1> グローバルに定義されたコンポーネントと同様に、コンポーネントは HTML ファイルの script タグ内で直接記述して使用できます。
<2> 登録された Vue インスタンスのみが使用できます。 in;
例:
Welcome コンポーネント
3. template タグを使用します
構造:
<template id="componnet"> // 组件的html结构 </template> // 全局组件的注册与使用 Vue.component( 'componentName', { template: '#component', data(){ return{ // 组件中的属性 } }, method: { // 组件中的方法 } ...... // 组件其他的属性和方法 }) new Vue({ el: '#app' }) // 局部组件的注册与使用 const componentName = { template: '#component', data(){ return{ // 组件中的属性 } }, method: { // 组件中的方法 } ...... // 组件其他的属性和方法 } new Vue({ el: '#app', components: { // 组件注册、调用 componentName } })
<1>jsファイルにはHTML構造コンテンツが含まれておらず、構造とロジックの分離が実現されています
例:ウェルカムコンポーネント
4、単一ファイルコンポーネント
構造:
<template lang="html"> // 组件中的html结构 </template> <script> //组件的逻辑 export default { // 组件的属性和方法 } </script> <style lang="css" scoped> // 组件的样式 </style>
<1> コンポーネントは相互に影響せず、再利用可能であり、その HTML、CSS、JS は再利用可能です
<2> コンポーネントの構造とロジックは明確です。 ;
<3> 複数人による開発に適した、大規模で複雑なプロジェクトに適しています。 ! !テンプレートタグ内のすべてのタグは 1 つのタグで囲む必要があることに注意してください。そうしないとエラーが報告されます正しい書き方:
<template> <p> <p></p> ...... <p></p> </p> </template>
間違った書き方:
<template> <p></p> <p></p> ...... <p></p> </template>
以降の方法はマスターできたと思いますこの記事の事例を読んで、さらに php 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
vue2.0操作がアクティブであり、他のオプションは相互に排他的です
vuexページが更新された後にデータを保存できない場合の対処方法
以上がVue グローバル コンポーネントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。