كمستخدم مخلص لـ Vue.js ، أعتقد أنه من الضروري كتابة بعض المقالات للثناء على هذه اللغة الجميلة. تقييمي العام له "بسيط ولكنه أنيق ، صغير ولكنه لا ينقصه الموهوبين". ما يلي سيقدم لك vue.js حول هذه الجملة ، على أمل تحفيز اهتمامك بـ Vue.js.
مقدمة إلى Vue.JS
مؤلف Vue.js هو إيفان أنت (أنت Yuxi) ، الذي يعمل في Google Creative Lab. على الرغم من أن VUE مشروع شخصي ، إلا أنني أعتقد شخصياً أنه ليس أدنى من AngularJs من Google من حيث آفاق التطوير. سأقوم بإجراء بعض المقارنات البسيطة مع Vue (إصدار 1.0+ Angular).
يتم تقديم الميزات الرئيسية لـ VUE كما تم تقديمها على موقعها الرسمي (http://cn.vuejs.org/):
(1) مختصرة (2) خفيفة الوزن (3) سريع (4) برنامج تشغيل البيانات (5) مكون (6)
بسيط
فيما يلي قطعة من رمز 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 هو أكثر إيجازًا وسهل الفهم.
لا يخلو من الأناقة
على الرغم من أن 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) المعدلات المريحة
<!-منع النقر فوق أحداث من الفقاعات->
<a @click.stop = "dosomething"> </a>
<!-يتم تشغيل الأحداث فقط عند الضغط على مفتاح Enter->
<input @keyup.enter = "submit">
(4) خصائص المعلمة العملية
<!-Debounce يحدد الحد الأدنى من التأخير->
<input v-model = "note" debounce = "500">
<!-تحديث البيانات في "تغيير" بدلاً من حدث "الإدخال"->
<input v-model = "msg" lazy>
ماذا عن ذلك ، هل تشعر بأناقة للغاية؟
صغير
الحديث عن الصغر ، يجب أن نولي أولاً الانتباه إلى حجم الكود المصدر لـ VUE. يبلغ إصدار الكود المصدري لإنتاج Vue (أي إصدار MIN) 72.9 كيلو بايت فقط. يقول الموقع الرسمي أن GZIP لا يتجاوز 25.11 كيلو بايت إلا بعد الضغط ، وهو نصف أصغر من Angular's 144kb.
تتمثل إحدى ميزة الاكتئاب في أنه يسمح للمستخدمين باختيار الحلول المقابلة بحرية أكبر ، ويمنح المستخدمين مساحة أكبر من حيث مطابقة المكتبات الأخرى.
على سبيل المثال ، لا يتضمن جوهر VUE وظائف التوجيه و Ajax بشكل افتراضي ، ولكن إذا كنت بحاجة إلى التوجيه و Ajax في مشروعك ، فيمكنك استخدام Library Vue-Router الرسمي وموارد Vue-Resource التي توفرها VUE. في الوقت نفسه ، يمكنك أيضًا استخدام مكتبات أو مكونات إضافية تريد استخدامها ، مثل jquery's Ajax ، إلخ.
ألا تشعر بالمرونة الشديدة؟
هناك العديد من الماجستير الرائعين
على الرغم من أن Vue صغير ، إلا أنه "عصفور صغير وله جميع الأعضاء الداخلية" ، كما أنه من السهل بناء تطبيقات واسعة النطاق.
(1) وحدات
بالاقتران مع بعض أدوات بناء الوحدات الخارجية ، مثل CommonJs ، تتطلب justjs أو seajs ، يمكن تحقيق طريقة الكود بسهولة.
ومع ذلك ، أنا هنا لا أوصي باستخدام أدوات البناء المذكورة أعلاه. إنه حاليًا الحل الأكثر شعبية لاستخدام الوظيفة المعيارية لـ ES6 مباشرةً ثم قم بتعبئتها وفقًا لذلك باستخدام WebPack.
إذا كنت لا تفهم وظائف وحدة ES6 ، فيرجى الرجوع إلى: http://es6.ruanyifeng.com/#docs/module
في المقالات المستقبلية ، سأقدمها أيضًا ، بما في ذلك تكوين 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'] ، حل)}}})}}لعرض تكوين التوجيه المحدد والاستخدام ، يرجى زيارة الوثائق الرسمية المقدمة: http://vuejs.github.io/vue-router/zh-cn/index.html
لخص
أنا شخصياً أعتقد أن بعض التقنيات الأمامية متكاملة. تعلم اللغة أو الإطار نفسه ليس تعلم تقنيتها. أهم شيء هو تعلم تفكيرها. يتم تمديد مستوى التفكير فقط ، وسوف تجد أنه من السهل تعلم التقنيات الأخرى. ما يجلبه لنا Vue هو تفكير جديد في الواجهة الأمامية لحل المشكلات.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.