VUE コンポーネントの作成、レンダリング、登録 (概要共有)
この記事では、vue に関する関連知識を提供します。主にコンポーネントの作成、レンダリング、登録に関連する問題を紹介します。最終的にはすべてのコンポーネントが管理されるため、コンポーネントを作成するときに el を書かないでください。 VM によってサービス オブジェクトが決定され、VM がサービス オブジェクトを決定します。
【関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル】
コンポーネントの作成
Vue.extend() を使用してコンポーネントを作成する
コンポーネントを作成するときに el を記述しないでください。最終的にすべてのコンポーネントは vm によって管理され、vm によってサービス オブジェクトが決定されるためです。
date は実行できません。関数形式ではなくオブジェクト形式で記述し、オブジェクトを返す必要があります。
// 创建一个组件
const school=Vue.extend({
// 配置template，里面存放的是通过当前组件中的内容生成的标签，最终会作为模板在页面中解析出来
template:`
<!--最外层为template必须具有的根标签-->
<div>
<!--div中的标签会在页面中使用到该组件的地方解析并显示出来，那么name就是此组件中
data中配置的name，adress同理-->
<h1>我的名字:{{name}}</h1>
<h2>地址:{{adress}}</h2>
</div>`,
// 配置date
data(){
return{
name:'z',
adress:'earth'
}
}
})注: グローバル環境で Vue.entend({}) を使用して作成されたコンポーネントは、Vue.component('コンポーネント名', 最終的なコンポーネント名) が宣言されている場合、ローカルコンポーネントとなり、他の vm インスタンスからは使用できません。Vue.component で作成したコンポーネントを使用する場合は、グローバルコンポーネントになります (Vue.entend は省略可能、直接 const コンポーネント) name = { })
コンポーネントのレンダリング
コンポーネントの登録が完了したら、ページ上のvmサービスのelで使用します。コンポーネント名をラベルとして目的の位置に配置し、ブラウザを待ちます。解析するだけです
const vm=new Vue({
el:'root',
components:{
// 注册组件
sl:school
}
})ページ内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <!-- 用组件标签将想用的组件放到页面上,那么组件中template属性中的标签就会在这个位置被解析出来--> <sl></sl> </div> </body> </html>
概要: vm インスタンスはブリッジとして機能するため、コンポーネント内のコンテンツは最終的にはページに表示されるため、コードの利用率が向上します。特定のコンテンツを再利用する必要がある場合、そのコンテンツが配置されているコンポーネントを直接見つけて、そのコンポーネントをインスタンスに登録してページに表示できます。 。
Vue のコンポーネント登録
1. グローバル登録: Vue が作成されると、コンポーネントがロードされます。コンポーネントが使用されているかどうかに関係なく、ロードされます [メモリ占有] [スターター プログラム]
2. 部分登録: コンポーネントを使用するとコンポーネントが作成されます。コンポーネントが使用されない場合はコンポーネントは作成されません。
vm の作成、構成el (コンポーネント内のコンポーネントが誰に提供されるかを決定します)
要素がキーと値で保存されるコンポーネント オブジェクトを構成します。キーは現在のインスタンスのコンポーネント名 (最終的なコンポーネント名)、およびコンポーネント名
グローバル登録
Vue.component("button-a",{
template:"\n" +
" <button @click=\"count++\">{{count}}</button>",
data:function () {
return{
count:0
}
},
methods:{
}
})ローカル登録
let componentA = {
template:"\n" +
" <button @click=\"count++\">{{count}}</button>",
data:function () {
return{
count:0
}
},
methods:{
}
}
new Vue({
el:"#app",
components:{
"component-a":componentA,
}
})データが関数である理由について
コンポーネントの登録最適化
コンポーネント内にhtml構造を記述する際、コピペを行ったり来たりするのは非常に面倒でメモリも多く消費します。解決策は、HTML でテンプレートを使用し、js
1 から分離することです。テンプレートはテンプレート タグ内に記述する必要があり、テンプレート タグはコンテナの外に記述されます
2. テンプレート タグ内に存在できるルート タグは 1 つだけです
<body>
<div id="app">
<button-color></button-color>
</div>
<template id="cId">
<div>
<h1>组件</h1>
<h2>阿萨德</h2>
</div>
</template>
</body>
</html>
<script>
let ButtonColor = {
template:"#cId",
data:function () {
}
}
new Vue({
el:"#app",
components:{
ButtonColor
}
})
</script>is 属性
HTML にはいくつかの親タグと子タグがあり、 [厳密な仕様] [table、ul、ol、dl...]、子タグがコンポーネントにカプセル化され、コンポーネントが従来の方法で親タグ内で使用される場合、表示効果の問題が発生するため、is を使用する必要があります。コンポーネントの使用
<body>
<div id="app">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody is="ButtonTable">
</tbody>
<tfoot>
<tr>
<td colspan="3">尾部</td>
</tr>
</tfoot>
</table>
</div>
<template id="tId">
<tbody>
<tr>
<td>1</td>
<td>阿斯顿</td>
<td>26</td>
</tr>
</tbody>
</template>
<script>
let ButtonTable = {
template:"#tId",
}
new Vue({
el:"#app",
components:{
ButtonTable
}
})
</script>
</body>コンポーネントのネスト
1 つのコンポーネント内で別のコンポーネントを使用
#<body>
<div id="app">
<base-color></base-color>
</div>
<template id="color">
<div>
<h1>这是父组件</h1>
<base-colo1></base-colo1>
</div>
</template>
<template id="color1">
<h1 style="color: red">这是子组件</h1>
</template>
</body>
</html>
<script>
// //创建子组件
let BaseColo1 ={
template:"#color1",
}
//创建父组件
let BaseColor ={
template:"#color",
components:{
BaseColo1
}
}
new Vue({
el:"#app",
components:{
BaseColor
}
})
</script>コンポーネント通信
1. プロパティの宣言
子コンポーネントで props 属性を宣言してデータを受け取る##
// //创建子组件
let BaseColo1 ={
template:"#color1",
props:["msg"]
}<div> <base-colo1 :msg = "message"></base-colo1> </div>
<h2>{{msg}}</h2>javascript ビデオ チュートリアル
、vue.js チュートリアル ]
以上がVUE コンポーネントの作成、レンダリング、登録 (概要共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7360
15
1628
14
1353
52
1265
25
1214
29
vueでechartを使用する方法
May 09, 2024 pm 04:24 PM
Vue で ECharts を使用すると、アプリケーションにデータ視覚化機能を簡単に追加できます。具体的な手順には、ECharts および Vue ECharts パッケージのインストール、ECharts の導入、チャート コンポーネントの作成、オプションの構成、チャート コンポーネントの使用、Vue データに対応したチャートの作成、対話型機能の追加、および高度な使用法の使用が含まれます。
vue におけるエクスポートのデフォルトの役割
May 09, 2024 pm 06:48 PM
質問: Vue におけるエクスポートのデフォルトの役割は何ですか?詳細説明: エクスポートデフォルトは、コンポーネントのデフォルトのエクスポートを定義します。インポートすると、コンポーネントが自動的にインポートされます。インポートプロセスを簡素化し、明確さを改善し、競合を防ぎます。一般に、名前付きエクスポートとデフォルト エクスポートの両方を使用して、個々のコンポーネントをエクスポートし、グローバル コンポーネントを登録するために使用されます。
vueでのmap関数の使い方
May 09, 2024 pm 06:54 PM
Vue.js マップ関数は、各要素が元の配列の各要素の変換結果である新しい配列を作成する組み込みの高階関数です。構文は、map(callbackFn) です。callbackFn は、配列内の各要素を最初の引数として受け取り、オプションでインデックスを 2 番目の引数として受け取り、値を返します。 map 関数は元の配列を変更しません。
vueのeventと$eventの違い
May 08, 2024 pm 04:42 PM
Vue.js では、event はブラウザによってトリガーされるネイティブ JavaScript イベントですが、$event は Vue コンポーネントで使用される Vue 固有の抽象イベント オブジェクトです。 $event はデータ バインディングをサポートするようにフォーマットおよび拡張されているため、一般に $event を使用する方が便利です。ネイティブ イベント オブジェクトの特定の機能にアクセスする必要がある場合は、event を使用します。
Vue における onmounted の役割
May 09, 2024 pm 02:51 PM
onMounted は、Vue のコンポーネント マウント ライフ サイクル フックです。その機能は、コンポーネントが DOM にマウントされた後に、DOM 要素への参照の取得、データの設定、HTTP リクエストの送信、イベント リスナーの登録などの初期化操作を実行することです。コンポーネントが更新された後、またはコンポーネントが破棄される前に操作を実行する必要がある場合は、他のライフサイクル フックを使用できます。
vueのエクスポートとデフォルトのエクスポートの違い
May 08, 2024 pm 05:27 PM
Vue.js でモジュールをエクスポートするには、エクスポートとデフォルトのエクスポートの 2 つの方法があります。 export は名前付きエンティティのエクスポートに使用され、中括弧の使用が必要です。export default はデフォルト エンティティのエクスポートに使用され、中括弧は必要ありません。インポートする場合、エクスポートによってエクスポートされたエンティティはその名前を使用する必要がありますが、エクスポートのデフォルトによってエクスポートされたエンティティは暗黙的に使用できます。複数回インポートする必要があるモジュールにはデフォルトのエクスポートを使用し、一度だけエクスポートするモジュールにはエクスポートを使用することをお勧めします。
Vueのフックとは何ですか
May 09, 2024 pm 06:33 PM
Vue フックは、特定のイベントまたはライフサイクル ステージでアクションを実行するコールバック関数です。これらには、ライフサイクル フック (beforeCreate、mounted、beforeDestroy など)、イベント処理フック (クリック、入力、キーダウンなど)、およびカスタム フックが含まれます。フックはコンポーネントの制御を強化し、コンポーネントのライフサイクルに対応し、ユーザーの操作を処理し、コンポーネントの再利用性を向上させます。フックを使用するには、フック関数を定義し、ロジックを実行してオプションの値を返すだけです。
vue の onmounted は、react のどのライフサイクルに対応しますか
May 09, 2024 pm 01:42 PM
Vue の onMounted は、React の useEffect ライフサイクル メソッドに対応し、空の依存関係配列 [] を持ち、コンポーネントが DOM にマウントされた直後に実行されます。
