1. مقدمة إلى Vue.JS
1. الميزات الرئيسية لـ VUE: (1) موجزة (2) خفيفة الوزن (3) سريع (4) برنامج تشغيل (5) مكون (6)
(1) موجزة
فيما يلي قطعة من رمز Angular لتنفيذ الربط ثنائي الاتجاه
// html <body ng-app = "myapp"> <div ng-controller = "myctrl"> <p> {{note}} </p> <input type = "text" ng-model = "note"> </viv> </body> // jsvar mymodule = "molular.module []) ؛ mymodule.controller ('myctrl' ، ['$ scopp' ، function ($ scope) {$ scope.note = '' ؛]) ؛ثم انظر إلى رمز Vue:
// html <Body> <div id = "app"> <p> {{note}} </p> <input type = "text" v-model = "note"> </viv> </body> // jsvar vm = new vue ({el: '#app' ، data: {note: ''}})بالمقارنة ، أعتقد شخصياً أن أسلوب كتابة رمز Vue هو أكثر إيجازًا وسهل الفهم.
(2) لا يخلو من الأناقة
على الرغم من أن VUE هو إطار خفيف الوزن نسبيًا ، إلا أنه بسيط وخفيف الوزن وسهل الاستخدام للغاية. API التي توفرها أيضًا سهلة الفهم أيضًا ، كما أنها توفر بعض الإرشادات والسمات المريحة للغاية.
على سبيل المثال:
1) ربط النقر فوق الحدث
<a v-on: click = "dosomething"> </a>
يمكن اختصارها على النحو التالي:
<a @click = "dosomething"> </a>
2) ربط السمات الديناميكية
<a v-bind: href = "url"> </a>
يمكن اختصارها على النحو التالي:
<a: href = "url"> </a>
3) تعديل مريح
<!-منع حدث النقر من bubled-> <a @click.stop = "dosomething"> </a> <!-يتم تشغيل الأحداث فقط عند الضغط على مفتاح الإدخال-> <input @keyup.enter = "submit">
4) خصائص المعلمة العملية
<!-قم بتعيين الحد الأدنى من التأخير-> <الإدخال v-model = "note" debounce = "500"> <!-تحديث البيانات في "تغيير" بدلاً من أحداث "الإدخال"-> <الإدخال v-model = "msg" lazy>
ماذا عن ذلك ، هل تشعر بأناقة للغاية؟
(3) نصائح صغيرة
الحديث عن الصغر ، يجب أن نولي أولاً الانتباه إلى حجم الكود المصدر لـ VUE. يبلغ إصدار الكود المصدري لإنتاج Vue (أي إصدار MIN) 72.9 كيلو بايت فقط. يقول الموقع الرسمي أن GZIP لا يتجاوز 25.11 كيلو بايت إلا بعد الضغط ، وهو نصف أصغر من Angular's 144kb.
تتمثل إحدى ميزة الاكتئاب في أنه يسمح للمستخدمين باختيار الحلول المقابلة بحرية أكبر ، ويمنح المستخدمين مساحة أكبر من حيث مطابقة المكتبات الأخرى.
على سبيل المثال ، لا يتضمن جوهر VUE وظائف التوجيه و Ajax بشكل افتراضي ، ولكن إذا كنت بحاجة إلى التوجيه و Ajax في مشروعك ، فيمكنك استخدام Library Vue-Router الرسمي وموارد Vue-Resource التي توفرها VUE. في الوقت نفسه ، يمكنك أيضًا استخدام مكتبات أو مكونات إضافية تريد استخدامها ، مثل jquery's Ajax ، إلخ.
ألا تشعر بالمرونة الشديدة؟
(4) هناك العديد من الأسياد العظماء
على الرغم من أن Vue صغير ، إلا أنه "عصفور صغير وله جميع الأعضاء الداخلية" ، كما أنه من السهل بناء تطبيقات واسعة النطاق.
1) وحدات
بالاقتران مع بعض أدوات بناء الوحدات الخارجية ، مثل CommonJs ، تتطلب justjs أو seajs ، يمكن تحقيق طريقة الكود بسهولة.
ومع ذلك ، أنا هنا لا أوصي باستخدام أدوات البناء المذكورة أعلاه. إنه حاليًا الحل الأكثر شعبية لاستخدام الوظيفة المعيارية لـ ES6 مباشرةً ثم قم بتعبئتها وفقًا لذلك باستخدام WebPack.
إذا كنت لا تفهم وظائف وحدة ES6 ، فيرجى الرجوع إلى عنوان الرابط للحصول على التفاصيل:
في المقالات المستقبلية ، سأقدمها أيضًا ، بما في ذلك تكوين WebPack.
2) مكون
وظيفة مكون Vue هي تسليط الضوء على ذلك. من خلال وضع كود HTML و CSS و JS لمكون معين على الصفحة في ملف .vue للإدارة ، يمكن تحسين صيانة الكود بشكل كبير.
على سبيل المثال:
// app.vue <implate> <div v-text = "note"> </viv> </mapplate> <script> تصدير الافتراضي {data () {return {note: 'هذا هو قالب html الخاص بالمكون! '}}} </script> <النمط scoped> .box {color: #000 ؛يمكننا أيضًا كتابة بعض لغات المعالجة المسبقة في المكون:
// app.vue <template lang = 'kade'> div (class = "box" v-text = "text") </template> <script> تصدير الافتراضي {data () {return {note: 'هذا هو قالب html الخاص بالمكون! '}}} </script> <style lang = "styles">.بالطبع ، نحن بحاجة إلى تجميعها من خلال WebPack. يوصى باستخدام WebPack + Vue-Loader ، واستخدام بناء جملة ES6 في نفس الوقت. يحتاج بابل إلى تثبيت التحويل. لأن المقالة هي مناقشة موجزة عن vue.js ، لن أقدم مقدمة متعمقة هنا.
3) التوجيه
مثل Angular ، Vue لديها قدرات التوجيه. من خلال وظيفة التوجيه ، يمكننا أن ندرك التحميل عند الطلب لكل مكون وإنشاء تطبيق من صفحة واحدة بسهولة. فيما يلي ملف تكوين توجيه بسيط:
// router.js'use strict'export default (Router) {router.map ({'/': {component: function (resolve) {require (['./ components/foo.vue'] ، come)}} ، '/foo': } ، '/bar': {component: function (حل) {require (['./ مكونات/bar.vue'] ، حل)}}})}}2. مقدمة لمكونات bootpage
في الواقع ، إنه ليس مكونًا متطورًا. على العكس من ذلك ، فهو في الحقيقة مجرد مكون ترحيل طاولة بسيط. يرجع السبب في ذلك إلى أنني بحاجة إلى مكون ترحيل الجدول في مشروعي الأخير. إن مكونات ترقيم مكتبة VUE الرسمية للمكونات قوية جدًا أو غير مناسبة بالنسبة لي ، لذلك كتبت بنفسي لأقوم به. ربما يحتاج شخص مثلي إلى هذا المكون البسيط لتنفيذ وظائف الترحيل البسيطة. سوف أشاركها هنا ، وسيملأ الجميع الحفر.
إذا كنت بحاجة إلى مكونات راقية ، فيمكنك الانتقال إلى مكتبة مكون VUE الرسمية
(1) كيفية الاستخدام
في ملف مكون .vue ، نكتب قالب مثل هذا ، أي رمز HTML:
<Table> <thead> <tr> <th> id </h> <th> الاسم </th> <th> المحتوى </th> <th> ملاحظة </th> </tr> </thead> <tbody> <ttr v-for = "data in tablelist"> <td v-text = "data.num"> </td> v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4" "> <div> <bood-page: async =" false ": data =" lens = "lenar": page len ". </td> </tr> </tfoot> </table>
في <-boot-page> ، يشير علامة ASYNC إلى ما إذا كان سيتم الحصول على بيانات من جانب الخادم ، FALSE هو لا ؛ البيانات هي صفيف بيانات جدولي ثابت. العدسة هي مجموعة من الصفوف المعروضة لكل صفحة ؛ الصفحة LEN هي عدد الصفحات التي يمكن عرضها ؛
رمز JavaScript الذي يستخدم بيانات ثابتة ، أي أن المحتويات في علامة البرنامج النصي هي كما يلي:
<script> استيراد bootpage من './components/bootpage.vue' التصدير الافتراضي {data () {return {lenarr: [10 ، 50 ، 100] ، // عرض العرض لكل pagelen: 5 ، // عدد الصفحات التي يمكن عرضها: "luozh" ، المحتويات: "123" ، ملاحظة: "bootpage"} ، {num: 1 ، المؤلف: "لووز" ، المحتويات: "123" ، ملاحظة: "bootpage"} ، {num: 1 ، upumn: 'luozh' ، المحتويات: '123' 'BootPage'}] ، // Table RAW Data ، لا حاجة إلى استخدام TablElist عند استخدام بيانات الخادم: [] // بيانات ما بعد البيع التي يتم إرجاعها بواسطة مكون الصفحات}} ، المكونات: {bootpage} ، الأحداث: {// بيانات الجدول التي تم إرجاعها بواسطة مكون pagination "(بيانات) {this.tablileist = data}}}}}بشكل عام ، نادراً ما نستخدم بيانات جدولة ثابتة ، ويتم الحصول على بيانات معظم التطبيقات من جانب الخادم ، لذلك فيما يلي طريقة للحصول على بيانات ترقيم الخادم:
المكون HTML الذي يستخدم بيانات الخادم هو كما يلي:
أقل
حيث عنوان URL هو عنوان طلب الخادم ؛ Param هو كائن المعلمة الذي يجب إرساله إلى الخادم ؛
الرمز الذي يستخدم بيانات الخادم javaScript هو كما يلي:
<script> استيراد bootpage من './components/bootpage.vue' التصدير الافتراضي {data () {return {lenarr: [10 ، 50 ، 100] ، // عرض العرض لكل pagelen: 5 ، // عدد الصفحات التي يمكن عرضها: مكون تراجع}}} ، الطرق: {refresh () {this. $ broadcast ('Refresh') // يتم توفير وظيفة تحديث الجدول هنا}} ، المكونات: {bootpage} ، الأحداث: {// بيانات الجدول التي يتم إرجاعها بواسطة مكون الهدفة (هنا هي البيانات التي يتم إرجاعها بواسطة البيانات) (البيانات) {this.t.ملاحظة: بالإضافة إلى محتوى الصفيف الذي تم تمريره إلى جدول المكون ، يحتاج الخادم أيضًا إلى اسم مفتاح لإجمالي عدد الصفحات ، المسماة Page_Num
(2) رمز مصدر المكون
أما بالنسبة لتنفيذ ترقيم الصفحات ، فلن يتم عرض رمز المصدر هنا. لقد قمت بتحميل جميع التعليمات البرمجية المصدر إلى عنوان github الخاص بي
اسمحوا لي أن أذكرك مقدمًا: لأنني استغرقت عدة ساعات لأخرج هذا المكون ، يجب أن أكون غير كافٍ في كتابة التنسيقات ومواصفات مكونات VUE ولم أكن مستقلة تمامًا ، لذلك أنا ملء الحفرة بوعي. سأشاركه فقط هنا.
بالطبع ، يمكنك أيضًا تعديل رمز المكون حسب الرغبة لتناسب استخدام مشروعك. بعد كل شيء ، من المعقد للغاية تنفيذ مكونات الترحيل الكبيرة والكاملة.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.