ما هي المكونات؟
المكون هو واحد من أقوى ميزات Vue.js. يمكن للمكونات تمديد عناصر HTML وتغليف الكود القابل لإعادة الاستخدام. على مستوى أعلى ، تعد المكونات عناصر مخصصة ، ويضيف برنامج التحويل البرمجي Vue.js ميزات خاصة إليه. في بعض الحالات ، يمكن أن تكون المكونات أيضًا في شكل عناصر HTML الأصلية ، وتم تمديدها مع ميزة IS.
هذه المقالة عبارة عن شرح أكثر تفصيلاً تم تجميعه بواسطة المحرر بناءً على المستندات الرسمية. الكود أكثر اكتمالا وكمراً ، وهو مناسب للغاية للمبتدئين للتعلم.
الوثائق الرسمية:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
المكونات - العناصر المتنوعة مفصلة على النحو التالي:
① مكونات و v-for
ببساطة ، يتم إعادة استخدام المكونات عدة مرات ؛
على سبيل المثال ، يمكن أن يصبح صف معين في الجدول ، أو عرض نافذة منتج التجارة الإلكترونية (نافذة واحدة) ، مكونات يمكن إعادة استخدامها ؛
ما عليك سوى كتابة أحدهم كمكون ثم اجعل مصدر البيانات صفيفًا (أو كائنًا ، لكنني شخصياً أعتقد أنه صفيف). من خلال v-for traversal ، يمكن لكل مثيل للمكون الحصول على واحدة من الصفيف ، وبالتالي توليد جميع المكونات.
بسبب تعدد الإرسال ، يجب استخدام الدعائم لربط النتيجة المجاورة I والبيانات المرتبطة بالدعائم. طريقة الربط هي نفس الشكل العادي وترتبط في القالب.
نموذج الرمز:
<div id = "app"> <button @click = "toknowchildren"> انقر للسماح بعرض مكون الطفل </td> <tabl> <tr> فهرس </td> <td> معرف </td> <td> الوصف </td> </tr> <tr is = "tr" </viv> <script> var vm = new vue ({el: '#app' ، البيانات: {العناصر: [1 ، 2 ، 3 ، 4]} ، الأساليب: {toknowchildren: function () {// switch component console.log (this. $ children) ؛ "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> هذا هو المكون الطفل </td>" + "</tr>" ، الدعائم: ['id' ، 'index']}}}) ؛ </script>يوضح:
【1】 تذكر وضع البيانات المراد تمريرها في الدعائم!
【2】 INDENT INDEX وفهرس الفهرس ، لأن الفهرس يبدأ من 0 ، لذلك يبدأ العمود الذي يقع فيه الفهرس في 0 ؛ يعرض المعرف I الذي يعبر العناصر ، لذلك يبدأ المعرف عند 1.
[3] يمكنك الحصول على مكونات الطفل من خلال هذا. $ الأطفال في المكون الأصل (ولكنه أكثر إثارة للقلق ، خاصة عندما يكون هناك العديد من المكونات ، من الصعب تحديد موقعها) ؛
② اكتب المكونات القابلة لإعادة الاستخدام:
ببساطة ، من الممكن أن يكون مكون الاستخدام الواحد (المستخدم هنا فقط ، وليس إعادة استخدامه) مقترنًا بإحكام بمكونات أخرى ، ولكن يجب أن يحدد المكون القابل لإعادة الاستخدام واجهة عامة واضحة. (وإلا ، كيف يستخدمه الآخرون؟)
تحتاج المكونات القابلة لإعادة الاستخدام بشكل أساسي إلى التفاعل مع الخارج ، وتشمل المكون والواجهة التفاعلية التي تم الكشف عنها خارجيًا:
【1】 الدعائم: السماح بتمرير بيانات البيئة الخارجية إلى المكونات ؛
【2】 الحدث: اسمح للمكون بتوجيه إجراء البيئة الخارجية ، أي بإضافة توجيه V-ON في Mount Point ، يتم تشغيل طرق المكون الأصل في نفس الوقت عند تشغيل أحداث المكون الطفل ؛
[3] الفتحة: التوزيع ، مما يسمح بإدراج محتوى المكون الأصل في بنية عرض المكون الطفل.
كرمز:
<div id = "app"> <p> هذا هو أول مكون الأصل </p> <widget: the-value = "test" @some = "tode"> <span> 【محتوى المكون الوالد الأول المدرج】 </pan> </widget> </div> <div id = "app2" <script> vue.component ("widget" ، {template: "<button @click = 'dosomething'> </slot> هذا مكون إعادة استخدام ، انقر فوقه {{thevalue}}} </button>" ، الأساليب: console.log ("Widget Click") ؛ var vm_other = new vue ({el: '#app2' ، البيانات: {name: "first"} ، الطرق: {toDo: function () {console.log ("هذا هو مكون الوالد الآخر")}}}) ؛ </script>يوضح:
[1] يتم استخدام فتحة التوزيع في المكون الوالد الأول ، ويتم استخدام الدعائم لتمرير القيمة (تمرير قيمة الاختبار إلى قيمة المكون الطفل) ؛
[2] من بين المكونين ، بعد النقر فوق مكون الطفل ، طريقة dosomething في الأساليب ، ثم يتم تنفيذ حدث ما في الأحداث. بعد ذلك ، من خلال Mount Point @Some = "Todo" لربط بعض الحدث الخاص بمكون الطفل وطريقة TODO المكون للمكون.
لذلك ، بعد النقر على مكون الطفل ، سيتم في النهاية تنفيذ طريقة TODO للمكون الأصل.
[3] سيؤدي تغيير القيمة التي تم تمريرها إلى مكون الطفل في المكون الأصل إلى تغيير قيمة مكون الطفل بشكل متزامن (أي كلاهما سيكون مرتبطًا بالبيانات) ؛
مكونات ③async:
وفقًا لفهمي ، ببساطة ، فإن تطبيقًا كبيرًا يحتوي على مكونات متعددة ، لكن بعض المكونات لا تحتاج إلى تحميلها على الفور ، بحيث يتم تقسيمها إلى مكونات متعددة (على سبيل المثال ، تلك التي تحتاج إلى تحميلها على الفور ، ولكن ليس على الفور) ؛
إذا كان هناك حاجة إلى تحميله على الفور ، فمن الواضح أنه من الأفضل وضعه في نفس الملف (أو طلب معًا في نفس الدفعة) ؛
إذا لم يكن هناك حاجة إلى تحميله على الفور ، فيمكن وضعه في ملفات أخرى ، ولكن عند الحاجة ، ستطلب Ajax ذلك إلى الخادم ؛
الطلبات التالية هي مكونات غير متزامنة ؛
وظيفة vue.js هي وظيفة vue.js ، والتي تسمح للمكون بالتعرف على أنها وظيفة المصنع وتوصيف تعريف المكون ديناميكيًا.
يمكن استخدامها مع WebPack.
أما بالنسبة لكيفية استخدامه بالتفصيل ، فأنا لا أفهم ذلك تمامًا. لا يمكنني كتابته بوضوح في البرنامج التعليمي ، لذلك سأضعه جانباً وانتظره لدراسته عند الحاجة.
وصلة:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④ اتفاقيات التسمية:
ببساطة ، علامات HTML (مثل Div و Div هي نفسها) ، والميزات (مثل تعليمات الكتابة مثل V-ON بدلاً من VON) غير حساسة للحالة.
غالبًا ما تتم كتابة أسماء الموارد في تشبه الجمال (مثل Camelcase Camel-like) ، أو في شكل رسائل رأس المال للحرف الأول من الكلمة (مثل Pascalcase ، لا أعرف ماذا أسمي هذا ، لكنني نادراً ما أكتب هذا).
vue.component ("mytemplate" ، {// ...... remitt})يمكن Vue.js التعرف تلقائيًا وتحويله.
<-template> </my-template>
يمكن للقالب أعلاه استبدال هذه العلامة تلقائيًا.
⑤ المكونات الإلكترونية:
ببساطة ، المكون العودية هو مكون يدمج قالبه الخاص في حد ذاته.
إذا أراد أحد المكون أن يتكرر ، فإنه يحتاج إلى سمة الاسم ، ويأتي Vue.component مع سمة اسمها الخاصة.
ربما يبدو هذا هكذا ،
<div id = "app"> <-template> </my-template> </viv> <script> vue.component ("mytemplate" ، {template:هذا هو عودة لا حصر لها ، وهو بالتأكيد غير ممكن. لذلك ، من الضروري التحكم في عدد طبقات عوائقها ، على سبيل المثال ، التحكم في العودية من خلال البيانات ، وإيقاف التكرار عندما تكون البيانات فارغة.
رمز العينة كما يلي:
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </semplate> </ul> <script> vue.component ("mytemphate" ، {tamplate: : a = "aa": b = "ab"> </my-template> </ul> '، الدعائم: ["a" ، "b"]}) var data = {a: {a: {a: += "!" ؛ </script>يوضح:
[1] عند المرور لأسفل ، يتم تمرير قيمة A وقيمة B من خلال الدعائم ، حيث يتم استخدام قيمة A كمصدر بيانات لقيم A و B للمكون بعد التكرار ؛
ثم حدد ما إذا كانت قيمة المنقولة إلى المكون العودية موجودة ، وإذا كان الأمر كذلك ، تستمر في التكرار ؛
إذا كانت قيمة A غير موجودة ، فسيتم إيقاف العودة.
⑥ مثال على ذلك:
ببساطة ، يعني مثيل الشظية المزعوم أن قالب المكون ليس تحت عقدة الجذر:
رمز مثيل الشظية:
vue.component ("mytemplate" ، {template: '<viv> 1 </viv>' + '<viv> 2 </viv>' ،})مثيل غير قسري:
vue.component ("mytemplate" ، {template: '<viv>' + '<viv> 1 </fiv>' + '<viv> 2 </viv>' + '</viv>' ،})يتم تجاهل الخصائص التالية لحالات الشظية:
]
【2】 ميزة غير Props (لاحظ أنه لن يتم تجاهل الدعائم ، بالإضافة إلى أن الدعائم مكتوبة على Mount Point) ؛
[3] الانتقال (أي ، سيتم تجاهل سمة الانتقال) ؛
لمزيد من الإشارة إلى الوثائق الرسمية:
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
قالب ⑦inline
المرجع: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
ما سبق هو مكون Vuejs الفصل 13 الذي قدمه لك المحرر - عناصر متنوعة. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!