ما هي المكونات؟
المكون هو واحد من أقوى ميزات Vue.js. يمكن للمكونات تمديد عناصر HTML وتغليف الكود القابل لإعادة الاستخدام. على مستوى أعلى ، تعد المكونات عناصر مخصصة ، ويضيف برنامج التحويل البرمجي Vue.js ميزات خاصة إليه. في بعض الحالات ، يمكن أن تكون المكونات أيضًا في شكل عناصر HTML الأصلية ، وتم تمديدها مع ميزة IS.
بعد ذلك ، سأقدم لك المعرفة الأساسية لتوصيل Vuejs في اتجاه واحد ، وربط ثنائي الاتجاه ، وتقديم القائمة ، ووظائف الاستجابة. التفاصيل المحددة هي كما يلي:
(ط) الربط في اتجاه واحد
<div id = "app"> {{message}} </div> <script> new vue ({el: '#app' ، data: {message: 'hello vue.js!'}}) </script>يجب أن يعني الربط ، معرف الربط = علامة التطبيق
يمكن أيضًا تغييره إلى ما يلي:
<viv> {{message}} </iv>EL: '.App' ،
بنفس القدر.
ولكن إذا كان هناك عدة ، فسيعمل فقط لأول مرة:
<div> {{message}} </viv> <viv> {{message}} </fire> hello vue.js! {{message}}② يمثل متغير الرسالة في البيانات قيمة {{message}
(2) ربط في اتجاهين
<div id = "app"> {{message}} <br/> <input v-model = "message"/> </viv> <script> new vue ({el: '#app' ، data: {message: 'hello vue.js!'}}) </script>التأثير هو:
① القيمة الأولية في مربع الإدخال ، والقيمة هي قيمة سمة الرسالة في البيانات ؛
② يمكن أن يؤثر تعديل قيمة مربع الإدخال على القيمة الخارجية ؛
(3) قيمة إرجاع الوظيفة
<div id = "app"> {{message ()}} <br/> <input v-model = "message ()"/> </viv> <script> new vue ({el: '#app' ، data: {message: function () {return 'hello vue.js!تأثير:
① قيمة الإخراج هي أيضًا قيمة إرجاع الرسالة ؛
② العيوب: فقدان ربط ثنائية الاتجاه!
(رابعا) قائمة التقديم
<div id = "app"> <ul> <li v-for = "list in todos"> {{list.text}} </li> </ul> </viv> <script> new vue ({el: '#app' ، data: {todos: [{text: </script>القائمة في v-for تشبه إلى I In in
شخصيا،
① يمكن فهم القائمة في Todos كما في القائمة في Todos
② ثم افهم القائمة. النص من السطر التالي كـ TODOS [LIST] .TEXT
ثم أين هذه العلامة V مقابل ، يتم نسخها عدة مرات فيه.
(5) معالجة إدخال المستخدم
<div id = "app"> <input v-model = "message"> <input type = "button" value = "value +1" v-on: click = "add"/> <input {message: 1} ، {add: function () {this.message ++ ؛تأثير:
① بالنسبة لقيمة مربع الإدخال ، انقر فوق الزر إضافة مرة واحدة ، وستكون القيمة +1 ؛
② إذا كان لا يمكن إضافته ، فسيتم إرجاع النتيجة كما لو تمت إضافة التعبير العادي بشكل غير صحيح ، مثل NAN ؛
③ قيمة الرسالة في البيانات هي القيمة الأولية ؛
④ الطرق هي مجموعات من الوظائف ، مفصولة بفواصل ؛
⑤ عند الحصول على القيمة ، أضف هذا ، على سبيل المثال ، يحصل this.message على قيمة الرسالة.
(السادس) متعدد الوظائف
<div id = "app"> <input v-model = "val" v-on: keypress.enter = "addToList"> <ul> <li v-for = "val in stable"> {{val.val}} <input type = "button" value = "delete" v-on: click = #APP '، {val: "1" ، القيم: [] ، {addtolist: function () String (Val + 1) ؛تأثير:
① القيمة في مربع الإدخال الأولي هي 1 ؛
② اضغط على إدخال مربع الإدخال لتحويل محتوى مربع الإدخال إلى رقم وإضافته إلى قائمة. سيتم تغيير الرقم المحول وزر حذف في القائمة ، وسيتم تغيير القيمة الموجودة في مربع الإدخال إلى القيمة التي تم تحويلها إلى رقم وإضافتها.
كما هو موضح في الصورة:
③ تستخدم إضافته الربط ثنائي الاتجاه ، وادفع قيمة الإدخال إلى صفيف القيم في البيانات ، ثم يستخدم تأثير قائمة التقديم لإخراج صفوف متعددة من القيم.
④ في علامة الزر ، يتم إعطاء اسم المعلمة للدالة معلمة ، وهي فهرس السطر ، واسم المعلمة هو $ index
⑤ في العلامة ، يمكن إضافة اسم وظيفة الوظيفة المشغلة بأقواس أو بدون قوسين. يبدو أن القياس الفعلي ليس له أي تأثير.
(7) العلامات وملخص API (1)
① {{{variable name}}
يمثل المتغير المربوطة ، هذا. مطلوب اسم متغير عند الاتصال
② v-model = "متغير"
استخدم ربط اتجاهين. إذا لم تتم إضافة أي نوع إلى الإدخال ، فهو نص. إذا تمت إضافة النوع ، فهو نوع ، على سبيل المثال:
<input v-model = "date" type = "date"/> <li> {{date}} </li>سيتم ربط قيمة مربع إدخال نوع التاريخ مع المحتوى المعروض بواسطة علامة LI.
③ V-ON: انقر = "اسم الوظيفة"
يتم تشغيل هذه الوظيفة عند النقر عليها ، إما () يمكن إضافتها أم لا. يتم استخدام فهرس $ كمعلمة لتمثيل الفهرس ، وتبدأ قيمة الفهرس من 0.
④ v-for
بعد تحديث محتوى المصفوفة ، سيتم تحديث الإزمة ثنائية الاتجاه في الوقت الفعلي ، وكذلك نموذج V ؛
على غرار لـ في البيان ، يتم استخدامه عدة مرات
⑤ V-ON: الحدث
وهذا هو ، الحدث الذي تم تشغيله ، هناك نقرة (انقر) ، keypress (انقر)
يمكن أن يتبع الأحداث أشياء أكثر تحديداً ، مثل keypress.enter هي عودة النقل ، keypress.space هي المساحة ، إلخ.
يحتاج المزيد للعرض
⑥ جديد Vue
بواسطة مثيل جديد لـ VUE ، ثم تمرير كائن كمعلمة إلى هذه الحالة ؛
في:
EL تعني القالب المربوطة (سوف يتطابق فقط مع الحد الأول)
تمثل البيانات البيانات ، والتي يمكن استخدامها مباشرة ، على سبيل المثال في V-Model أو {{variable name}}
طُرق
⑦ استدعاء متغيرات داخل الوظيفة
بواسطة هذا الاسم المتغير ، على سبيل المثال:
البيانات: {val: "1" ، القيم: []} ، الطرق: {addToList: function () {console.log (this.val) ؛هذا.
<li v-for = "val in stable"> {{val.val}} <input type = "button" value = "delete" v-on: click = "removelist ($ index)"/> </li>بالنسبة للسبب ، أعتقد شخصياً أن Val هنا يقع ضمن نطاق V-for ، وبالتالي فإن Val in Val في القيم له أولوية أعلى في سلسلة النطاق.
ما سبق هو شرح مفصل لأول تعليمي تمهيدي لـ Vuejs الذي قدمه لك المحرر (ربط في اتجاه واحد ، وربط في اتجاهين ، وتقديم القائمة ، ووظيفة الاستجابة). آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!