جلسه اول: معرفی مفاهیم اولیه فریم ورک Vue.js

جلسه اول: معرفی مفاهیم اولیه فریم ورک Vue.js

 

Vue.js یک فریم ورک ساخت رابط‌های کاربری، نرم افزارهای تحت وب و اپلیکیشن‌ موبایل می باشد. 

هسته مرکزی  این فریم ورک روی لایه View از معماری سه لایه Model, View, Controller تمرکز دارد که ساده و قابل فهم است، به‌گونه‌ای که در صورت استفاده از این فریم ورک در پروژه های خود، تداخل کمتری وجود دارد. به عبارت دیگر، Vue جهت ساختن نرم افزارهای تک صفحه‌ای تحت وب و موبایل، با ترکیب مدل و کتابخانه‌های اساسی موردنیاز مورد استفاده قرار می‌گیرد.

دیاگرام عملکرد فریم ورک Vue.js

ساده‌ترین راه برای تست اپلیکیشن های اجرا شده و بکارگیری فریم‌ورک Vue.js استفاده از سایت JSFiddle است. JSFiddle یک مرجع آنلاین جهت تست کردن کدهای ایجاد شده است. در صورتیکه بخواهیم برنامه‌های خود را در سرور داخلی (Localhost) تست کنیم، کافیست داخل پوشه سرور خود یک فایل با پسوند .html ذخیره کنیم. در اینجا نام فایل موردنظر ما index.html می‌باشد.

رندرینگ خبری (Declarative Rendering)

در هسته‌ی Vue.js، سیستمی با قابلیت رندرینگ خبری داده‌ها به ساختار DOM (درخت شیءگرایی یک صفحه) قرار داده شده است که با استفاده از دستورهای زیر، می‌‎توانید آن را به سادگی پیاده‌سازی کنید:

<html>
<head>
    <script src="/vue/js/vue.js"></script>
</head>
<body>
    <div id="laravelApp">
        {{ message }}
    </div>
</body>
<script>
    var laraveljs = new Vue({
        el: '#laravelApp',
        data: {
           'message' : 'Hello FaghatLaravel.com'
       }
    })
</script>
</html>

درصورتی که کد های بالا را به درستی اجرا کرده باشید با پیغام زیر مواجه خواهید شد:

Hello FaghatLaravel.com

همانطور که مشاهده کردید، اطلاعات داده‌ای (data) با المان (el) زبان HTML ترکیب و نتیجه‌ی آن که شامل یک رشته تحت عنوان Hello FaghatLaravel.com نمایش داده شد. به تعریف دیگر داده‌ها و DOM با همدیگر پیوند خورده‌اند که در نهایت این امر همه چیز در حالت واکنشی (Reactive) قرار دارد. یعنی سیستم منتظر یک تغییر است تا آن را بدون درنگ به شما نمایش دهد. برای مشاهده حالت واکنشی این فریم ورک، در مرورگر خود دکمه‌ی F12 صفحه کلید یا کلیدهای ترکیبی CTRL+Shift+i را فشرده و در صفحه باز شده روی گزینه Console کلیک کنید. این صفحه کنسول جاوا اسکریپت و مرورگر شماست. برای تغییر عبارت Hello FaghatLaravel.com، داخل کنسول عبارت laraveljs.message = ‘Amin’ را تایپ کنید. پس از فشردن دکمه Enter صفحه کلید، تغییرات به سرعت در صفحه مرورگر شما اعمال می شود. به این اتفاق یک حالت Reactive یا واکنشی گفته می شود.

در اینجا یک مثال دیگر جهت معرفی کارایی بیشتر فریم ورک Vue js و همچنین پیوست اطلاعات (Binding)، ارائه خواهیم داد. جهت آشنایی با این ساختار کدهای ذیل را درون فایلی جدید تحت عنوان laravel-bind.html ذخیره کنید:

 

<html>
<head>
    <script src="/vue/js/vue.js"></script>
</head>
<body>
    <div id="laravelApp" v-bind:title="message">
        Online Tutorial on FaghatLaravel.com
    </div>
</body>
<script>
    var laraveljs = new Vue({
        el: '#laravelApp',
        data: {
           'message' : 'Hello FaghatLaravel.com ' + new Date()
       }
    })
</script>
</html>

صفت v-bind به عنوان یک تفسیر و اعلان شناخته می‌شود. اعلان‌ها با پسوند -v در اختیار شما قرار می‌گیرند که به عنوان یک سری صفت خاص توسط فریم‌ورک Vue Js ارائه شده‌اند. این اعلان‌ها، رفتارهای واکنشی را درون DOM رندر (پردازش) می‌کنند. در اینجا صفت title برای یک تگ div به صورت یک message ایجاد شد. به همین ترتیب اگر شما مرورگر خود را باز و کلید F12 را بفشارید و در پنجره Console عبارت laraveljs.message = ‘Amin’ را تایپ کنید، عکس المعل آن را می‌توانید در صفت title تگ div موردنظر مشاهده کنید.

دستورهای شرطی و حلقه‌ها در Vue.js

همانند تمام زبان‌های برنامه‌نویسی، زبان جاوا اسکریپت نیز از حلقه‌ها و دستورات شرطی پیروی می‌کند. در مثال زیر یک دستور شرطی IF داخل تگ پاراگراف مشاهده می‌کنید، جهت استفاده از این کد، آن را داخل فایلی تحت عنوان laravel-conditional.html ذخیره نمایید:

<html>
<head>
    <script src="/vue/js/vue.js"></script>
</head>
<body>
    <div id="laravelApp" v-bind:title="message">
       <p v-if="seen">Online Tutorial on FaghatLaravel.com </p>
    </div>
</body>
<script>
    var laraveljs = new Vue({
        el: '#laravelApp',
        data: {
           'message' : 'Hello FaghatLaravel.com ' + new Date(),
            'seen' : True
       }
    })
</script>
</html>

همانگونه که ملاحظه می‌کنید، دستور v-if به عنوان یک شرط به تگ پاراگراف HTML اضافه شد و مقدار آن در مدل داده‌ها برابر True (نمایش دادن این تگ) درج شده است. در صورتیکه شما عبارت seen را به false تغییر دهید، هیچ تگ پاراگرافی را مشاهده نخواهید کرد.

برای نمایش یک لیست از داده‌های داخل یک آرایه از حلقه‌ها می‌توان استفاده کرد که از حلقه اعلان For تحت عنوان عبارت v-for در فریم‌ورک Vue js استفاده می شود. کد زیر را در فایلی تحت عنوان laravel-loops.html ذخیره کنید:

<html>
<head>
    <script src="/vue/js/vue.js"></script>
</head>
<body>
    <div id="laravelApp" v-bind:title="message">
       <p v-if="seen">Online Tutorial on FaghatLaravel.com </p>
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
    </div>
</body>
<script>
    var laraveljs = new Vue({
        el: '#laravelApp',
        data: {
            message : 'Hello FaghatLaravel.com ' + new Date(),
            seen : true,
            todos:[
                { text: 'Online Tutorials on FaghatLaravel.com' },
                { text: 'Online Center on FaghatLaravel.com' }
            ]
       }
    })
</script>
</html>

درصورتیکه داخل کنسول جاوا اسکریپت مرورگر خود دستور زیر را وارد نمایید، یک آیتم به نمونه‌های داخل تگ <li> اضافه خواهد شد:

laraveljs.todos.push({ text : “New FaghatLaravel.com Item’s” })

کنترل کردن رفتارهای اعمالی کاربران

وب سایتهایی که به کاربران امکاناتی جهت ارتباط بهتر و تعامل کارآمد تر با نرم افزار تحت وب یا موبایل، می‌دهند، موفق‌تر عمل خواهند کرد. Vue js امکاناتی نظیر کنترل روی دستورهای ورودی کاربران ایجاد کرده است. در مثال فوق جهت پیوست یک رویداد (Event) روی یک دکمه، از عبارت v-on استفاده کرده‌ایم. کد زیر را داخل فایلی تحت عنوان laravel-on.html ذخیره کرده و سپس آن را در مرورگر خود اجرا کنید:

<html>
<head>
    <script src="/vue/js/vue.js"></script>
</head>
<body>
    <div id="laravelApp" v-bind:title="message">
       <p v-if="seen">Online Tutorial on FaghatLaravel.com </p>
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
    <div>
        Reverse Message: {{ message }}
    </div>
    <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
</body>
<script>
     var laraveljs = new Vue({
        el: '#laravelApp',
        data: {
            message : 'Hello FaghatLaravel.com ' + new Date(),
            seen : true,
            todos:[
                { text: 'Online Tutorials on FaghatLaravel.com' },
                { text: 'Online Center on FaghatLaravel.com' }
            ]
       },
        methods:{
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</html>

همانطور که مشاهده کردید، ما در این روش بدون تغییر دستی کدها یک سری تغییرات را به متون با قرار دادن یک دکمه و نوشتن یک متد جداگانه، اعمال کردیم. در واقع تمام DOM ها توسط Vue کنترل شدند.

فریم‌ورک جاوا اسکریپت Vue.js از v-model جهت تبادل اطلاعات بین فرم‌های ورودی و وضعیت نرم افزار، استفاده می‌کند. در مثال زیر نحوه‌ی بکارگیری این دستور را مشاهده خواهید کرد.

کدهای زیر را در فایلی تحت عنوان laravel-model.html ذخیره کنید:

<html>
<head>
    <script src="/vue/js/vue.js"></script>
</head>
<body>
    <div id="laravelApp" v-bind:title="message">
        <input v-model="message">
    </div>
</body>
<script>
    var laraveljs = new Vue({
        el: '#laravelApp',
        data:{
            message: "Hello FaghatLaravel.com"
        }
    })
</script>
</html>

امیدوارم در این جلسه با مفاهیم پایه فریم ورک Vue.Js آشنا شده باشید. در چند روز آینده جلسات بعدی این سری آموزش بر روی وبسایت آموزشی همیار لاراول قرار خواهد گرفت.

مطالب مشابه