VueJs програмыг арай өөрөөр инициализаци хийх аргыг авч үзье.
<body>
<div id="app">
<h2 >{{ title }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'Vue програм'
}
})
</script>
</body>кодод бид Vue -ийн хувийг app элементэд инициализац хийгээд app айдитай div -д title талбарт үзүүлж байгаа.
Хуудсыг нээвэл
Vue програм текстийг үзүүлнэ. Энд хүртэлх хичээлүүдэд Vue -гийн тохиргооны обьектод el талбарыг заавал тодорхойлон түүнд Vue -ийн хувийн инициализац хийх элементийн css селекторыг заан өгч байсан. Vue -ийн хувийн инициализацийг хийх өөр арга бий. Үүний тулд кодыг
<body>
<div id="app">
<h2 >{{ title }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
data: {
title: 'Vue програмын өөр инициализац'
}
});
vue.$mount('#app')
</script>
</body>гэж өөрчилье. Кодоос el: '#app' мөрийг хасаад Vue -ийн шинэ хувийг vue хувьсагчид авсан. Дараа нь Vue -гийн обьектын тусгай mount аргыг дуудахдаа түүнд Vue -ийн хувийн инициализац хийх элементийн css селекторыг дамжуулна. Хуудсаа шинэчилбэл
бүгд хэвийн ажиллана. Програмын инициализац зөв хийгдэж байгааг шалгах үүднээс үзүүлэх текстийг өөрчилсөн болно. Эндээс Vue -ийн хувийн инициализацийг mount аргаар хийж болох нь. Үнэн хэрэгтээ mount аргыг дуудалгүй el: '#app' мөрийг заан инициализац хийхэд Vue -гийн обьект өөрийн mount аргад хандан app айдитай элементэд инициализацийг хийдэг.
Үүнээс гадна Vue -ийн тохиргооны обьектод template талбарт хуудасны шаблоныг заан өгч бас болдог. Жишээ нь
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
data: {
title: 'Vue програмын өөр инициализац'
},
template: '<h1>{{ title }}</h1>'
});
vue.$mount('#app')
</script>
</body>Энд app айдитай элементэд байсан html кодыг хасаад javascript кодод Vue -ийн тохиргооны обьектод template талбарт хуудасны html кодыг өгөөд дараа нь mount аргаар app айдитай элементэд инициализац хийсэн. Хуудсыг нээвэл
бүгд хэвийн ажиллана. Ялгах үүднээс хуудаст үзүүлэх текстийг h1 тегээр үзүүлсэн. Хуудасны хэвийг template талбараар дамжуулах энэ аргад тодорхой хязгаарлалт байдаг. Хэрвээ шаблонд олон тооны html элементүүд орохоор бол тэдгээрийг ямар нэгэн суурь элементэд оруулан багцлах хэрэгтэй. Жишээ нь
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
data: {
title: 'Vue програмын өөр инициализац'
},
template: '<div><h1>{{ title }}</h1><p>Өдрийн мэнд</p></div>'
});
vue.$mount('#app')
</script>
</body>template талбараар дамжуулах html кодод title талбараас гадна p тегэд текстийг нэмэн үзүүлэх тул тэдгээрийг нэгтгэсэн div тегд оруулсан. Хуудасны ажиллагааг шалгавал
бүгд хэвийн ажиллана. Хэрвээ шаблоныг нэгтгэсэн div тегд авахгүй бол хуудасны ажиллагаанд алдаа өгнө. Үүнийг өөрсдөө шалгаарай.
илэрхийллийн хялбарчил.