در قسمت قبلی توضیحاتی جهت معرفی و نصب فریم‌ورک داده شد. در این قسمت قصد داریم کمی بیشتر با ساختار آن آشنا شویم و یک vue جدید را ایجاد کنیم. پس لازم است تا ابتدا درون تگ اسکریپتی که فراخوانی کردیم و آدرس فریم‌ورک در آن قرار داده شده‌است، به صورت زیر یک ویو جدید را ایجاد کنیم:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js">
new Vue({
});
</script>
</body>
</html> اگر قصد داشته باشید تا درون تگی با یک مشخصه‌ی خاص، دستوری را اجرا کنید، باید تعیین کنید که آن تگ چه خواصی دارد. فرض میکنیم که تگ body درون پروژه لازم است مقداری را فراخوانی و اجرا کند. پس لازم است تا یک id، به تگ بادی اختصاص یابد.
<html>
<body id="dotnettips">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js">
new Vue({
});
</script>
</body>
</html> <html>
<body id="dotnettips">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js">
new Vue({
el: '#dotnettips',
data: {
name: 'dotnettips'
}
});
</script>
</body>
</html> با استفاده از مشخصه el تعیین کردیم که کدهای برنامه برای کدام id در نظر گرفته شده‌اند. حال با استفاده از مقدار خاصیت name، مقادیر ما در خروجی چاپ خواهند شد.
استفاده از MVVM درون پروژه
به زبان ساده در معماری MVVM، یک مدل، یک view و یک viewmodel داریم که در مدل، کدهای JS و اطلاعاتی که قصد نمایش آن را داریم، قرار می‌دهیم. در واقع viewmodel نقش data building را خواهد داشت.
برای شروع، یک مدل جدید را نیاز داریم که بدین شکل باید فراخوانی کنیم.
//new model
var SampleData =(
name: 'dotnettips'
) - برای نمایش اطلاعات درون ویو جی اس باید از {{ }} استفاده کنید، تا ویژگی ساخته و فراخوانی شده را نمایش دهد.
<div id="dotnettips">
Hello {{ name }}
</div> یک ویوی جدید را ایجاد میکنیم و با مشخصه el، ویژگی تعیین شده را به مدل خود متصل میکنیم.
new Vue({
el:'#dotnettips',
data: SampleData
}) .یک نمونه از این مثال را از اینجا میتوانید مشاهده کنید
.به نمونه کد کامل زیر دقت بفرمائید
<html>
<body id="dotnettips">
<h3 id="dotnettips">
Hello {{ name }}
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js">
</script>
<script type="text/javascript">
new Vue({
el: '#dotnettips',
data:{
name: 'dotnettips'
}
});
</script>
</body>
</html> 
