في الأساس ، قمنا بتصنيف جميع الإرشادات على الموقع الرسمي: http://vuejs.org/guide/index.html هنا نأخذ تطبيق قائمة toDo كمثال لربط جميع تلك ذات الصلة فقط. جميع الكود في هذه المقالة موجودة على github https://github.com/lihongxun945/vue-todolist
مثيل VUE
يتم تشغيل تطبيق VUE بواسطة تمهيد مثيل Root Vue ، ويتم إنشاء مثيل VUE مثل هذا:
var vm = new vue ({// reports})مثيل هو في الواقع VM في MVVM. سيتم تثبيت جميع السمات في البيانات في كائن التكوين الوارد على المثيل. من أجل تجنب تسمية النزاعات ، سيتم تركيب طرق VUE المدمجة على المثيل مع خصائص تبدأ بـ $.
سوف يمر المثيل بدورة الحياة التالية من الخلق إلى الدمار:
أثناء التهيئة ، ما يقرب من ثلاث خطوات:
• مراقبة البيانات الربط ، أي مراقبة البيانات
• تجميع القوالب
• أدخل المستند أو استبدل DOM المقابل
# Vue Basic Syntax
ربط البيانات
يستخدم Vue بناء جملة Mastache. تنقسم بناء جملة الربط الشائع إلى عدة فئات:
• بناء جملة Mastache ، مثل {{data}} {{data | فلتر}}
• خصائص ربط V-bind ، مثل V-bind: HREF ، V-bind: Class
• أحداث الربط V-ON ، مثل V-ON: CLACH ، V-ON: إرسال
من بينهم ، V-* هي التوجيه
مثال:
<div v-bind: class = "[classa ، ISB؟ classB: '']">
حساب السمة
يدعم VUE بناء جملة حساب السمات المثيرة للاهتمام للغاية. يمكنك تحديد أن السمة محسوبة بسمات أخرى ، لذلك لا تحتاج إلى استخدام $ Watch لتنفيذها:
var vm = new vue ({el: '#example' ، البيانات: {a: 1} ، محسوبة: {// getter b: function () {// `هذا يشير إلى مثيل vm إرجاع this.a + 1}}))## تشمل بناء الجملة المتعلق بالتحكم في العملية وقائمة "V-if` ،" V-Show` ، "V-Else` ،` V-for`
استمارة
ربط البيانات ثنائية الاتجاه:
<type type = "text" v-model = "message" placeholder = "edit me">
<type type = "checkbox" id = "jack" value = "jack" v-model = "checkedNames">
## طريقة تنفيذ الرسوم المتحركة هي نفس طريقة Angular و React ، ويتم تنفيذها عن طريق إضافة وحذف الفئات. # عنصر
الاستخدام الأساسي للمكونات
يتضمن تعريف المكون جزأين:
1 إنشاء فئة مكون:
var profile = vue.extend ({template: "<viv> lily </viv>"}) ؛2 سجل tagname:
vue.component ("me-profile" ، ملف تعريف) ؛
وبهذه الطريقة ، يمكننا استخدام هذا المكون من خلال tagname:
<div id = "todo"> <my-profile> </my-profile> <form v-on: srident = "add" v-on: pridt.prevent> <input type = "text" v-model = "input"/> <input type = "submit" value = 'add'/> </form> ... </div>
vue.component ("me-profile" ، ملف تعريف) ؛ هو التسجيل العالمي. إذا تم استخدامه فقط في صفحة معينة ، فيمكن تسجيله محليًا:
var vm = new vue ({el: "#todo" ، المكونات: {"my-profile": profile} ، ...}نظرًا لأن مثيل VUE الخاص بنا مرتبط بعنصر TODO ، فهو غير صالح إذا تم وضع My-Profile خارج هذا العنصر. فقط عن طريق وضعه في الداخل سوف يتم تهيئته بواسطة مثيل VUE هذا.
ملحوظات:
يمكن استخدام المعلمات التي يمكن تمريرها بواسطة مُنشئ VUE بشكل أساسي على Vue.Extend ، ولكن تحتاج إلى الانتباه إلى المعلمتين من EL والبيانات. لتجنب مشاركة نفس الكائن بين حالات مختلفة ، يكون من الموثوقية دائمًا إرجاع كائن جديد من خلال الوظيفة:
var myComponent = vue.Extend ({data: function () {return {a: 1}}})نظرًا لأن المعلمات هي نفسها ، فهي في الواقع نفس الشيء ، ولكن أحدها مكون ويستخدم الآخر لتوجيه Vue للبدء.
ملاحظات على القوالب
نظرًا لأن VUE عبارة عن DOM أصلي ، فقد لا تلبي بعض العلامات المخصصة معيار DOM. على سبيل المثال ، إذا كنت ترغب في تخصيص TR في الجدول ، إذا كان إدخال المكون الخاص بي مباشرة لا يفي بالمواصفات ، فيجب عليك كتابته مثل هذا:
<border> <tr is = "my-apponent"> </tr> </table>
الدعائم تمرير البيانات
في VUE ، يكون كل مكون مستقلًا ولا يمكنه الوصول مباشرة إلى بيانات الفئة الأصل. فهل تشبه إلى حد كبير طريقة React لتمرير البيانات إلى المكونات الفرعية من خلال الدعائم؟
على عكس React ، تحتاج المكونات الفرعية في Vue إلى إعلان الدعائم الخاصة بهم أولاً:
var profile = vue.extend ({props: ["name"] ، template: `<h2> {{name}} 's list </h2> <h4> {{name}} هي فتاة جيدة </h4>`}) ؛ثم يمكننا تمرير معلمات مثل هذا عند استخدام ملف التعريف:
<my-profile name = 'lily'> </my-profile>
هذا هو تمرير المعلمات من خلال الحرفيين ، لذلك يجب أن تكون القيمة التي تم تمريرها سلسلة. طريقة أخرى هي تمرير المعلمات ديناميكيًا ، وتمرير المعلمات من خلال V-bind. يمكنك ربط البيانات في اتجاهين أو تمرير المعلمات غير السلسلة:
<my-profile v-bind: name = 'input'> </my-profile>
إذا كان V-bind عبارة عن سلسلة ، فهو الحقل المقابل في بيانات المكون الأصل ، على سبيل المثال ، ما ورد أعلاه هو قيمة الإدخال المرتبط في كلا الاتجاهين. إذا كان رقمًا ، فهو مرتبط برقم.
يمكن لـ VUE أيضًا تحديد بيانات بيانات في اتجاه واحد أو في اتجاهين:
<!-الافتراضي ، الربط في اتجاه واحد-> <الطفل: msg = "parentmsg"> </child> <!-الربط الصريح في اتجاهين-> <الطفل: msg.sync = "parentmsg"
التحقق من الدعائم
يجب أن يتحقق المكون الجيد دائمًا من أن المعلمات صحيحة أولاً ، وقد تحتاج أيضًا إلى تعيين القيم الافتراضية لبعض المعلمات:
var profile = vue.extend ({input: {type: string}}) ؛الوالدين والطفل الاتصالات
الدعائم المذكورة أعلاه هي في الواقع وسيلة للمكون الأصل لتمرير الرسائل إلى مكون الطفل.
في المكون الطفل ، يوجد هذا الوالد $ وهذا. جذر $ الذي يمكن استخدامه لطرق المكون الأصل ومثيل الجذر. ومع ذلك ، الآن يجب أن نتجنب القيام بذلك. نظرًا لأن المكون نفسه هو تغليف المنطق المستقل ، إذا قمت بالوصول مباشرة إلى بيانات المكون الأصل ، فسيدمر تغليف المكون.
لذلك لا يزال يتعين علينا التواصل من خلال المكون الأصل الذي يمرر الدعائم إلى مكون الطفل.
بالطبع ، يمكن للدعائم فقط إجراء عمليات الاسترداد. تمت مناقشة هذه القضية في React. تتمثل طريقة React في استخدام الدعائم لتمرير وظيفة رد الاتصال إلى مكون الطفل. في الواقع ، أنا لا أحب هذه الطريقة المتمثلة في تمرير وظائف الاتصال ، فأنا أفضل طريقة الأحداث. يمكن لـ Vue Neutronics التواصل مع المكون الأصل من خلال الأحداث. إرسال الرسائل إلى المكون الأصل هو من خلال هذا. $ إرسال ، وإرسال الرسائل إلى مكون الطفل من خلال هذا. $ boardcast. هنا ، يتم إرسال الرسائل إلى جميع أولياء الأمور والأطفال ، ولكن بمجرد تنفيذ رد الاتصال ، ستتوقف ما لم تتراجع وظيفة رد الاتصال بشكل صريح.
نقوم بتقسيم قائمة TODO السابقة إلى مكونات مختلفة لتنفيذها ، حتى نتمكن من تجربة كيفية التواصل مع المكونات في اتجاهين. قمنا بتقسيم مكونين ، وهما القائمة والشكل.
النموذج مسؤول عن معالجة إدخال المستخدم وإرسال رسالة إضافة إلى المكون الأصل عند إرسال النموذج. الرمز كما يلي:
var form = vue.extend ({props: {username: {type: string ، الافتراضي: "unnamed"}} ، البيانات: function () {return {input: "" ،} ؛ type = "text" v-model = "input"/> <input type = "submit" value = 'add'/> `،` ، {add: function () {this. $ dispatch ("add" ، this.القائمة مسؤولة فقط عن عرض القائمة والتعامل مع عمليات فحص المستخدم. بعد تلقي رسالة إضافة ، سيضيف إدخالًا على نفسه:
var list = vue.extend ({template: `<ul> <li v-for = 'todo in list'> <label v-bind: class =" {deer Array}} ، Data: function () {return {list: []}} ، الأحداث: {Add: function) {if (!بعد ذلك ، نظرًا لأن هذين مكونان ، بالطبع ، هناك حاجة إلى مثيل VUE للاضطلاع ببدء التشغيل ، مثيلنا كما يلي:
var vm = new vue ({el: "#todo" ، المكونات: {"todo-form": form ، "tode-list": list} ، الأحداث: {add: function (input) {this. $ broadcast ("add" ، input) ؛}}}) ؛لاحظ أنه في الواقع ، فإن النموذج والقائمة مكونات متوازية منطقياً ، لذلك ليس لديهم علاقة الأب والابن ، وهم جميعا أطفال VM. هنا ، سيقوم VM بإعادة توجيهه إلى القائمة بعد تلقي رسالة النموذج.
رمز HTML أبسط:
<div id = "toDo"> <todo-form username = 'lily'> </todo-form> <toDo-List
فتحة
يمكن استخدام الفتحة لإدخال HTML المقدمة من المكون الأصل في مكون الطفل. ليس من الواضح متى ستكون هناك حاجة إلى ذلك ، وهذا أمر غازي للغاية لمكون الطفل.
مكونات التبديل الديناميكي
هذه الوظيفة تشعر ببعض الحاجة. في كثير من الحالات ، يجب أن نتحول عبر التعليمات البرمجية المنطقية بدلاً من من خلال المكونات الديناميكية المدمجة في VUE. ومع ذلك ، من المريح للغاية تنفيذ وظيفة مماثلة لتبديل علامات التبويب.
هنا نضيف صفحة حول قائمة TODO. لذلك أولاً ، نحتاج إلى تغيير VM إلى مكون ، والذي يسمى TODO ، وهي صفحة TODO بأكملها:
var toDo = vue.Extend ({template: `<div id =" tode "> <todo-form username = 'lily'> </todo-form> <tode-list> </todo-list> <slot> لا تظهر </slot> </viv>` ، المكونات: {todo-form ": form ، هذا. $ broadcast ("إضافة" ، إدخال) ؛في الواقع ، السطر الأول من التغييرات هو السطر الأول.
ثم نحتاج إلى إنشاء مكون حول:
var about = vue.extend ({template: `<div id =" about "> <p> about todo list v0.1.0 </p> <p> content هنا </p> </viv>`}) ؛التالي هو النقطة الرئيسية. نريد إنشاء مثيل VM ، وهو مسؤول عن تبديل هاتين الصفحتين:
var vm = new vue ({el: "body" ، data: {currentView: "toDo"} ، المكونات: {"toDo": toDo ، "About": about}}) ؛هنا نحدد حقل CurrentView ، والذي يمكن بالطبع أن يكون أي اسم ، ثم نستخدم علامة مكون خاص لتبديل المكونات:
<component: is = "currentView"> </loy> <ul> <li> <lable> <input type = "radio" name = 'page' value = 'tode' v-model = 'currentView'> home </babel> </li> <li> <label> <input type = "radio" name = 'value =' on 'v-model =' currentview '>
هناك شيئان يجب ملاحظتهما في الكود أعلاه:
• استخدم مكون العلامة الخاص ، ثم استخدم الخاصية: خاصية لتبديل المكونات.
• قم بتعديل حقل CurrentView من خلال الربط ثنائي الاتجاه ، بحيث يمكنك التبديل بعد النقر.
مبدأ التنفيذ لربط البيانات
يستدعي Vue تفاعل ربط ثنائي الاتجاه ، والذي يمكن ترجمته على أنه ربط بيانات متجاوب. يتم تنفيذه داخليًا من خلال أساليب Getter و Setter المحددة بواسطة ES5 ، لذلك لا يدعم IE8 والمتصفحات التالية. هناك شيئان سهلان ارتكاب أخطاء في هذا التنفيذ:
• إذا قمت بإضافة سمات وحذفها مباشرة على البيانات ، فمن المستحيل اكتشافها. بشكل عام ، لن يكون الحذف ممكنًا ، ولكن يمكن إضافته ديناميكيًا. في هذا الوقت ، يجب إضافته من خلال VM. $ SET ("الاسم" ، القيمة).
• لا يمكن اكتشاف التغييرات الموجودة داخل الكائن ، أي أنه يمكنهم فقط اكتشاف التغييرات في خاصية البيانات. إذا كانت Data.a كائنًا ، فإن Data.AB = 1 لا يمكن اكتشاف هذا التغيير. في هذه الحالة ، يجب عليك إنشاء كائن جديد وتعيينه إلى Data.A.
آلية التحديث غير المتزامنة
تحديث Vue إلى DOM غير متزامن! يتم تنفيذ هذا غير متزامن في قائمة انتظار غير متزامنة ، ولكن سيتم تنفيذ قائمة الانتظار غير المتزامنة في حلقة الحدث الحالية. لذلك ، إذا قمت بتعديل البيانات ، فمن الخطأ الذهاب إلى DOM على الفور للقيام بعملية الاستعلام. في هذا الوقت ، لم يتم تحديث DOM بعد. الطريقة الصحيحة هي القيام بذلك:
vm.msg = 'new message' // تغيير datavm. $ el.textContent === 'رسالة جديدة' // falsevue.nexttick (function () {vm. $ el.textContent === 'New Message' // True})أو هذا:
vm. $ nextTick (function () {this. $ el.textContent === 'New Message' // True})استغرق الأمر وقتًا طويلاً لقراءة المكونات. هذه نقطة أخرى: التوجيه
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.