---
title: Declarative Rendering
localeTitle: التقديم التعريفي
---
## التركيب

قبل أن نبدأ ، هناك طريقتان لاستخدام Vue.js ، أي عبر CDN وعبر التركيب. لتجربة أولى ، من الأسهل استخدام CDN.

من أجل التطوير ، استخدم هذا:

 `
<!-- development version, includes helpful console warnings --> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
` 

عند القفز إلى الإنتاج ، هذا:

 `
<!-- production version, optimized for size and speed --> 
 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
` 

كما ذكر من قبل ، يمكنك أيضا تثبيت `vue-cli` ، ولكن هذا ليس كذلك أوصت للمبتدئين.

## التقديم التعريفي

يعد Vue.js أداة رائعة لإنشاء صفحات ديناميكية ، والطريقة الأولى للوصول تلمس مع هذا هو ما يسمى التقديم التعريفي.

ويهدف استخدام المصطلح "الإعلاني" إلى تقويم هذا المفهوم اللغات التصريحية ، مثل SQL: يمكنك طلب شيء ما ، لا يتم تضمينه أي تنفيذ. يتيح لك Vue.js الإعلان عن البيانات التي تريدها المقدمة ، ببساطة مثل:

 `
<div id="app"> 
  {{ message }} 
 </div> 
` 

 `let app = new Vue({ 
  el: '#app', 
  data: { 
    message: 'Hello, world!' 
  } 
 }); 
` 

باستخدام تلك القناصة ، فأنت تخبر Vue أن تقوم بشكل ديناميكي بعرض كل ما يتم تخزينه داخل متغير `message` . والمتعة: كلما تم تغيير `message` ، يدير Vue.js إعادة تحميل ذلك الجزء المحدد من DOM وسترى يتغيرون.

إذا كنت ترغب في تجربة هذا التفاعل ، افتح وحدة التحكم وقم بتغيير القيمة من `app.message` إلى ، قل ، `"Hello from console"` . هل لاحظت التغيير في الصفحة؟

إن `{{ ... }}` هي صيغة هذا السلوك: إخراج القيمة من متغير أو تعبير. على سبيل المثال ، يعد هذا أيضًا استخدامًا صالحًا و سوف يؤدي إلى `hello` :

 `
<div id="app"> 
  {{ 1 < 2 ? "hello" : "goodbye" }} 
 </div> 
` 

هناك حالات ما نريده هو تعيين سمة باستخدام تطبيق Vue الخاص بنا متغير. قد تعتقد أن الصيغة نفسها تنطبق ، ولكن Vue لديها شيء ما محددة لذلك ، ما نسميه "ملزم".

 `
<div id="app"> 
  <a v-bind:href="dynamicLink">This link</a> 
 </div> 
` 

 `let app = new Vue({ 
  el: '#app', 
  data: { 
    dynamicLink: 'medium.freecodecamp.org' 
  } 
 } 
` 

بناء الجملة `v-bind` هو ما يستدعي Vue.js "توجيه". إنها طريقة لتعيين جديد السمة إلى العلامة التي سيتم التعامل معها عن طريق Vue - هناك المزيد التوجيهات ، كل شيء يبدأ مع `v-` .