مقدمة
Vue.js هي مكتبة واجهة ويب تعتمد على البيانات. يركز Vue.js فقط على طبقات العرض ويمكن دمجه بسهولة مع المكتبات الأخرى. الكود هو 24 كيلو بايت فقط بعد الضغط.
الرمز التالي هو أبسط مثال على Vue.js. عندما يتغير المحتوى في الإدخال ، سيتغير محتوى العقدة P وفقًا لذلك.
<!-html-> <div id = "demo"> <p> {{message}}} </p> <input v-model = "message"> </viv> vue new ({el: '#demo' ، data: {message: 'hello vue.js!'}})بناء الجملة الأساسي لـ Vue.js
أدخل النص
<span> الرسالة: {{text}} </span>أدخل النص بتنسيق HTML وعرضه بتنسيق HTML على الصفحة
<span> الرسالة: {{{html}}} </span>لا يتبع المحتوى التغييرات في البيانات
<span> الرسالة: {{ * text}} </span>ربط البيانات على الخصائص
<div id = "item-{{id}}"> </div>باستخدام تعبيرات JS في {{}}
{{number + 1}} {{OK؟ "نعم": "لا"}} {{message.split (''). revers (). Join ('')}}باستخدام عبارات JS في {{}}
{{var a = 1}} {{if (ok) {return message}}}إذا كان الأمر
<p v-if = "Greeting"> hello! </p> هنا ، سيحذف توجيه V-if/إدراج العنصر <p> وفقًا لأصالة قيمة تحية التعبير.
توجيه HREF
<a v-bind: href = "url"> </a> أو <a href = "{{url}}"> </a>انقر فوق الأمر
<a v-on: click = "dosomething">
أدخل الأمر
<input v-model = "newtodo" v-on: keyup.enter = "addtodo">
اختصار
v-bind
<!-اكتمال بناء الجملة-> <a v-bind: href = "url"> </a> <!-Abbreviation-> <a: href = "url"> </a> <!-complete syntax-> <button v-bind: uppludable = "somedynamicondition : تعطيل = "SomedynamicCondition"> زر </button>
V-on
<!-اكتمال بناء الجملة-> <a v-on: click = "dosomething"> </a> <!-Abbreviation-> <a @click = "dosomething"> </a>
لخص
التعبيرات في القوالب مريحة للغاية ، لكنها في الواقع تستخدم فقط للعمليات البسيطة. القالب هو وصف بنية العرض. يمكن أن يؤدي وضع الكثير من المنطق في قالب إلى جعل القالب ثقيلًا للغاية ويصعب الحفاظ عليه. هذا هو السبب في أن vue.js يقيد تعبيرات ملزمة لتعبير واحد. إذا كان أكثر من تعبير مطلوب ، فيجب استخدام خصائص محسوبة. سيقوم المحرر بتحديث كيفية استخدام السمات المحسوبة لاحقًا. الأصدقاء المهتمين ، يرجى الاستمرار في الانتباه إلى wulin.com.