آشنایی با Mount کردن Templateها

Mounting Templates

Vue.JS 2: آشنایی با mount کردن Template ها - قسمت 24

ما قبلا در رابطه با نحوه کار Vue صحبت کرده ایم و می دانیم که Vue یک virtual DOM دارد یا به زبان ساده تر از کدهای HTML کپی گرفته و پس از پردازش آن ها، کدهای HTML خودش را تولید می کند و به کاربر می دهد. به مثال زیر نگاه کنید:

var vm1 = new Vue({
  el: '#app1',
  data: data,
  methods: {
    show: function () {
      this.showParagraph = true;
      this.updateTitle('The VueJS Instance (Updated)');
      this.$refs.myButton.innerText = 'Test';
    },
    updateTitle: function (title) {
      this.title = title;
    }
  },
  computed: {
// بقیه کدها //

هر جایی که از خصوصیت el استفاده کند، به Vue می گوید که آن قسمت را گرفته و تحت کنترل خود در بیاورد. به طور مثال اگر el را از کد بالا حذف کنیم چه اتفاقی در HTML می افتد؟ با چنین کاری قسمت مورد نظر در HTML از کنترل Vue خارج می شود و طبیعتا پردازش های آن نیز انجام نمی شود. مثلا به جای اینکه عنوان همیشگی را در صفحه ببینیم، واقعا خود مقدار {{ title }} نمایش داده می شود. نکته جالب دیگری هم وجود دارد. من el را از کد زیر پاک می کنم:

var vm1 = new Vue({
  data: data,
  methods: {
    show: function () {
      this.showParagraph = true;
      this.updateTitle('The VueJS Instance (Updated)');
      this.$refs.myButton.innerText = 'Test';
    },
// بقیه کدها //

حالا می توانیم به خارج و انتهای این شیء Vue برویم (همین vm1) و بگوییم:

vm1.$mount();

mount یکی دیگر از متد های پیش فرض درون شیء Vue است و دقیقا معادل با خصوصیت el درون خود شیء است. البته باید عنصر مورد نظرمان را به آن پاس بدهیم و نمی شود همینطور خالی آن را صدا زد:

vm1.$mount('#app1');

اما استفاده از el همیشه ساده تر است و هر زمان که می توانید باید از el استفاده کنید. دستور mount برای مواقعی خوب است که می خواهید اول از همه شیء Vue خود را ویرایش کنید و سپس آن را روی عنصری در HTML قرار بدهید یا مثلا عنصری HTML مورد نظر هنوز وجود ندارد و باید با if و دستورات دیگر وجود آن چک شود (مثلا اگر فلان عنصر با فلان آیدی ایجاد شد، شیء Vue من را به آن mount یا متصل کن).

برای نکته بعدی یک Div دیگر در انتهای فایل HTML می سازم:

<div id="app2">
  <h1 ref="heading">{{ title }}</h1>
  <button @click="onChange">Change something in Vue 1</button>
</div>

<div id="app3">
  
</div>

همانطور که می بینید app3 خالی است و چیزی ندارد. حالا به فایل جاوا اسکریپت می روم و یک Vue جدید برای این div می سازم:

var vm3 = new Vue({
  template: '<h1>Hello!</h1>'
});

Template یک خصوصیت جدید است. در واقع به جای اینکه کدهای HTML را بنویسیم و با el به Vue بگوییم آن ها را زیر نظر گرفته و پردازش کند، می توانیم با استفاده از Template کدهای HTML را مستقیما به Vue بدهیم. البته محدودیت هایی نیز وجود دارد که بعدا در مورد آن صحبت می کنم. پس از نوشتن این کد پایین تر از آن می گوییم:

var vm3 = new Vue({
  template: '<h1>Hello!</h1>'
});

vm3.$mount('#app3');

پس از پاس دادن این شیء به mount (که البته می توانستیم با el هم بنویسیم) عنوان Hello را در صفحه خود می بینیم. نکته جالبی هم وجود دارد. اگر mount را بدون پاس دادن هیچ آرگومانی صدا بزنیم، عنص را در پس زمینه می سازد و همانجا نگه می دارد تا ما آن را به جایی منتسب کنیم. به کد زیر توجه کنید:

var vm3 = new Vue({
  template: '<h1>Hello!</h1>'
});

vm3.$mount();
document.getElementById('#app3').appendChild(vm3.$el);

در واقع با صدا زدن mount عنصر مورد نظر خود را ساخته ایم و سپس با appenChild (یک دستور جاوا اسکرپیت است و به Vue ربطی ندارد) el$ را به app3 متصل کرده ایم. با اجرای کد بالا باز هم همان نتیجه قبلی (نمایش Hello) را مشاهده می کنیم.

نکته: تقریبا هیچکس اینطور کدنویسی نمی کند و کدنویسی عادی همان کدهایی است که در قسمت های قبل نوشته بودیم. هدف من از نوشتن این کدها و بازی با آن ها این است که شما درک عمیق تری از شیء Vue به دست بیاورید.

معمولا اولین سوالی که پس از آشنایی با خصوصیت template پیش می آید این است که چطور می توانیم کامپوننتی را ایجاد کنیم و آن را در چند قسمت از برنامه خود نمایش بدهیم. مثلا به جای Hello ساده در کدهای بالا، کدهای پیچیده تر و بیشتری را بنویسیم و آن را در چند قسمت از برنامه نمایش بدهیم.

من در ابتدا کدهای mount و appendChild را کامنت می کنم تا غیرفعال شوند. سپس می گویم:

var vm3 = new Vue({
  el: 'hello',
  template: '<h1>Hello!</h1>'
});

سپس در کدهای HTML می گویم:

<div id="app3">
  
</div>

<hello></hello>
<hello></hello>

شما هم می دانید که hello عنصر واقعی HTML نیست. من فقط برای تست از آن استفاده کرده ام. اگر کد بالا را اجرا کنیم Vue به دنبال عنصر hello می گردد و آن را هم پیدا می کند اما template را فقط روی اولین عنصر hello اعمال خواهد کرد. بنابراین چنین کدی کار نخواهد کرد (hello ها را از HTML پاک کرده و appenChild و mount را از کامنت خارج کنید تا به حالت اول برگردیم).

برای استفاده از کامپوننت ها باید آن ها را ثبت کنیم. من به ابتدای فایل جاوا اسکریپت خودم می روم (پایین تر از data) و می گویم:

var data = {
  title: 'The VueJS Instance',
  showParagraph: false
}

Vue.component();

Component به شما اجازه می دهد که از یک کد در چندین قسمت از برنامه خود استفاده کنید. اولین آرگومان component همان selector عنصر شما است. آرگومان دوم نیز یک شیء شبیه شیء ای است که به Vue پاس می دادیم اما کمی متفاوت است. در این جلسه فقط جهت آشنایی این کدها را به شما نشان می دهم و در فصل های آینده یک فصل کاملا اختصاصی را برای کامپوننت ها در نظر گرفته ام. به کد زیر نگاه کنید:

var data = {
  title: 'The VueJS Instance',
  showParagraph: false
}

Vue.component('hello', {
  template: '<h1>Hello</h1>'
});

حالا برای تست کردن آن وارد app2 (در HTML) می شویم و می گوییم:

<div id="app2">
  <h1 ref="heading">{{ title }}</h1>
  <button @click="onChange">Change something in Vue 1</button>
  <hello></hello>
  <hello></hello>
</div>

با این کار دو hello را در کدهایمان خواهیم دید! بنابراین می توانیم با استفاده از component ها چنین کاری را انجام بدهیم اما فعلا وقت آن نیست. من فقط می خواستم با نحوه کار شیء Vue بیشتر آشنا شوید. من به شما گفتم که Template محدودیت هایی نیز دارد. چرا؟ به دلیل اینکه template باید یک رشته باشد و نوشتن کدهای پیچیده درون یک رشته کار سختی است. بخشی از این محدودیت ها نیز محدود به template (خصوصیت درون شیء Vue) نیستند بلکه هر نوع template ای حتی اگر درون فایل HTML نوشته شده و با el متصل شود باز هم محدودیت هایی دارد. در قسمت های بعدی (مخصوصا در فصل کامپوننت ها) بیشتر با این موارد آشنا می شویم.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.