vue js چیست و چرا باید از آن استفاده کنیم ؟

vue js چیست و چرا باید از آن استفاده کنیم ؟

vue js چیست و چرا باید از آن استفاده کنیم ؟What is Vue.js and How do we Use It ?

vue js چیست و چرا باید از آن استفاده کنیم ؟

توسط : admin
به عنوان توسعه دهندگان Front-End ، ما معمولاً می خواهیم مناسب ترین فناوری را برای هر یک از پروژه های خود انتخاب کنیم تا نحوه نوشتن و سازماندهی کد را بهبود ببخشیم. بنابراین ، هدف اصلی این مقاله بررسی ویژگی های اصلی Vue.js ، یک فریم ورک پیشرفته جاوا اسکریپت است که به ما امکان می دهد تا به سرعت برنامه های تک صفحه ای (SPA) را که به راحتی در حین استفاده از اجزای آن و ویژگی های واکنشی استفاده می شود ،توسعه دهیم.

 

Vue.js چیست ؟

Vue.js  توسط Evan You ایجاد شده،که یک فریمورک پیشرفته JavaScript پیش رونده برای ساخت واسطهای کاربر (UI) و برنامه های تک صفحه ای است. معمولاً  Vue نیز گفته می شود. این چارچوب از "high decoupling" استفاده می کند ، به توسعه دهندگان امکان می دهد به تدریج واسط های کاربر (UI) ایجاد کنند.

 

چرا Vue Js ؟

مدولار سازی کتابخانه با استفاده از یک چارچوب در توسعه فرانت اند متداول است.  React و Angular  نیز دارای مدولار هستند. اما آنچه Vue.js را از گزینه های دیگر متمایز می کند ، "high decoupling" آن است ، گسترش کارکردها بسیار آسان است و همه اجزا در زیر مجموعه یکدیگر کار می کنند. به عنوان مثال ، اگر ما می خواهیم کامپوننت های بصری کوچک را سازماندهی و ارائه دهیم ، به "Vue.js" نیاز داریم . وجود کتابخانه های اضافی غیر ضروری است. با بزرگ شدن برنامه ، ما کتابخانه هایی را برای مدیریت مسیریابی مانند "vue-router" ، کتابخانه  "vuex" برای مدیریت state های عمومی و یا کتابخانه هایی برای ساختن برنامه های وب واکنش گرا مانند "bootstrap-vue" داریم. علاوه بر این ، اگر برنامه ما نیاز به بهینه سازی داشته باشد یا به SEO خوب نیاز داشته باشد ، می توانیم از کتابخانه "vue-server-rendering" استفاده کنیم . در شکل زیر می توانیم ببینیم که چگونه کتابخانه هایی که اکنون ذکر کردیم به تدریج درج می شوند ، از یک SPA کوچک گرفته تا برنامه های چند صفحه ای (MPA).

vue js چیست

 

سیستم مؤلفه Vue.js واکنشی است ، به این معنی که Vue.js می داند چگونه از طریق رویدادهای ناهمزمان ارتباط برقرار کند. به عنوان مثال ، یک مؤلفه فرزند می تواند از طریق رویدادها با مؤلفه والد خود ارتباط برقرار کند.  در Vue.js هیچ گونه ناهماهنگی با سایر کتابخانه ها یا منابع وجود ندارد ، به عبارت دیگر ، می توانیم از ابزاری استفاده کنیم که با آن راحت تر هستیم. به عنوان مثال ، ما فقط می توانیم HTML و JavaScript بنویسیم یا اگر بخواهیم می توانیم CSS ، JSX یا TypeScript را نیز اضافه کنیم.

 

Vue.js دارای یک خط فرمان ویژه (CLI) است که در Node JS ایجاد شده است. این ابزار به ما امکان می دهد تا یک پروژه را با استفاده از الگوی پایه (template) شروع کنیم. علاوه بر این ، تیم توسعه Vue.js یک  افزونه Chrome را در اختیار ما قرار می دهد که به ما امکان می دهد ببینیم چگونه درخت مولفه ما ارائه می شود ، چگونه رویدادها راه‌اندازی و ثبت می شوند ، چگونه وضعیت داخلی هر مؤلفه ذخیره می شود و وضعیت عمومی این مؤلفه چگونه است و چگونه رفتار می کند .

 

چه کسانی از Vuejs استفاده میکنند ؟

بیش از 700 شرکت از Vue.js استفاده می کنند. برخی از مهمترین آنها عبارتند از: شیائومی ، علی بابا و Gitlab . میتوانید لیست کامل را از اینجا مشاهده کنید .

چه کسانی از vue js استفاده میکنند

 

شروع توسعه  با Vue Js :

 

تنظیمات اولیه :

روشهای مختلفی برای ایجاد پروژه توسط Vue.js وجود دارد:

  • فایل Vue.js را بارگیری کرده و از آن با استفاده از تگ <script> مستقیماً در فایل HTML استفاده کنید
  • استفاده از CDN با درج تگ <script> در فایل HTML
  • نصب آن با استفاده از Node Package Manager ) NPM )
  • برای راه اندازی پروژه خود از Vue-cli استفاده کنید

 

در مثال زیر ، ما از CDN استفاده می کنیم ، که در آن تگ <div> دارای کد صفحه است ، تگ <script> حاوی کد اسکریپت است ، و برچسب <style> حاوی کد CSS است.

<html>
	<head>
    	<title>Simple Vue.js Example</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"> </script>
    </head>
    <body>
    	<div id="app">
        	<p> message  Avantica Blog Visitors!</p>
        </div>
        <script>
        	var app = new Vue({
            	el: '#app',
                data: {
                	message: 'Hello'
                }
            });
        </script>
        <style>
        	p {
            	font-size: 2em;
                text-align: center;
              }
        </style>
    </body>
</html>

 

فایل اجرا شده برنامه Vue js

 

لطفاً توجه داشته باشید، کد مثال قبلی ، نمونه ای از Vue  است که با دستور "()new Vue" ایجاد شده است. این نمونه گزینه ای به نام "el" دارد ، که به برچسب <div> که در آن کد الگو قرار دارد اشاره دارد. بنابراین "داده یا data" ، که شامل ویژگی های برنامه است ، می تواند در برچسب <div> ارائه شود. گزینه های دیگری که نمونه ای از Vue می پذیرد عبارتند از: 'computed' ، 'watch' ، methods' و چرخه عمر  ، که گزینه "computed" شامل getters یا setters  "داده" است. گزینه "watch" شامل  ناظر تغییرات "داده" است. گزینه "Methods" شامل رفتار یا عملکردهای برنامه Vue است.چرخه های حیات نمونه ها در Vue شامل حالات "created" ، "mounted" یا "destroyed"   میشوند .

 

اگر می خواهیم با استفاده از NPM یک پروژه Vue.js ایجاد کنیم که این روش برای برنامه های بزرگ توصیه می شود ، می توانیم آخرین بسته پایدار Vue.js را با استفاده از دستور زیر نصب کنیم:

> npm install vue

سپس می توانیم با استفاده از: 

> vue create my-first-vue-app

 

دستور رندر :

هسته Vue.js به ما امکان می دهد تا با استفاده از یک دستور الگوی ساده داده ها را به DOM ارائه دهیم:

<div id="app">
	 message 
</div>

<script type="text/javascript">
	var app = new Vue({
    	el:'#app',
        data: {
        	message: 'This is the Avantica Blog!'
        }
    })
</script>
نمونه خروجی دستور ساخت vue از طریق npm

لطفاً توجه داشته باشید که Vue.js n دستورات اعلام شده توسط پرانتزهای دوبل را ارزیابی می کند ، بنابراین "داده" از نمونه Vue در الگوی رشته قرار می گیرد. بنابراین ، شیء داده و DOM به هم پیوند می خورند ، و اکنون همه چیز واکنشی است. ما می توانیم با باز کردن کنسول جاوا اسکریپت خود و تنظیم app.message به یک مقدار متفاوت ،نتیجه را در خروجی مشاهده کنیم.

 

Directives :

Directives  ها ویژگی های خاصی با پیشوند v- هستند (مانند v-if ، v-other ، v-show ، v-bind و v-model) که به ما امکان می دهند DOM را دستکاری کنیم. مثلا:

<div id="app">
	<p v-if="shown">You can see this message.</p>
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        data: {
        	shown: true
        }
    });
</script>

در اینجا ، دستورالعمل شرطی v-if شرط اگر مقدار عبارت "نشان داده شده" صحیح باشد ، عنصر <p> را حذف یا درج می کند. اگر در کنسول جاوا اسکریپت app.shown = false را وارد کنیم ، باید ببینیم که این پیام از بین می رود. بنابراین ، می توانیم داده ها را برای ساختار DOM متصل کنیم.

 

بعضی از Directives ها می توانند شامل "argument" باشند، که پس از نام Directives توسط دو نقطه : اعلان میشود . به عنوان مثال ، دستورالعمل v-bind برای به روزرسانی واکنشی یک ویژگی HTML استفاده می شود. در مثال زیر ، "placeholder"  آرگومانی است که با دستورالعمل v-bind مقدار  "expectedValue" را به ورودی ما میدهد .

 

<div id="app">
	<input v-bind:placeholder="expectedValue" />
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        data: {
        	expectedValue: 'edit me'
        }
    });
</script>

در اینجا Vue  ، ویژگی "placeholder" عنصر را با مقدار  "expectedValue" به روز کرد . اگر در کنسول جاوا اسکریپت خود app. surprValue = "here here ..." را وارد کنید ، خواهیم دید که HTML  به روز شده است.

 

حلقه ها :

Directives -v برای نمایش لیستی از موارد با استفاده از داده های یک آرایه استفاده می شود. در مثال زیر لیستی از مکانهای آوانتیکا را با جمع کردن آرایه "مکان" نشان می دهیم. اگر ({'app.locations.push({ text: 'Cochabamba, Bolivia  را در کنسول جاوا اسکریپت خود وارد کنیم ، می توانیم آیتم جدیدی را اضافه کنیم که در لیست قرار دارد.

 

<div id="app">
	<ul>
    	<li v-for="location in locations">
        	 location.text 
        </li>
    </ul>
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        data: {
        	locations: [
            	{ text="Silicon Valley, USA" },
                { text="San Carlos, Costa Rica" },
                { text="Lima, Perú" }
            ]
        }
    });
</script>

 

مدیریت رویدادها :

به منظور برقراری تعامل با کاربران ، می توانیم از دستورالعمل v-on برای ایجاد یک شنونده رویداد که در نمونه های Vue استفاده می کنند ، استفاده کنیم. در مثال زیر ، هنگامی که کاربر روی دکمه کلیک می کند ، متد Vue (با نام "showPhone") فراخوانی می شود و یک پیام را در پنجره با شماره تلفنی از Avantica نمایش می دهد. Vue.js نشانگرهای کوتاه را برای شنوندگان رویداد فراهم می کند ، بنابراین می توانیم "v-on:" را با with @ جایگزین کنیم.

<div id="app">
	<button v-on:click="showPhone">Show Avantica phone </button>
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        methods: {
        	showPhone: function () {
            	alert('+1 650-641-3134');
            }
        }
    });
</script>

 

استفاده از مدیریت رویداد در ویو جی اس

 

Data Binding :

Vue.js دیرکتیو مدل v را ارائه می دهد که یک اتصال دو طرفه بین ورودی فرم و حالت برنامه ایجاد می کند. در این مثال ، عبارت و "داده" مرتبط هستند. اگر دستور '!app.message = 'Hello again Visitor  در کنسول JavaScript وارد کنید خواهیم دید که الگوی متن رشته و مقدار <input> به روز شده است.

<div id="app">
	<p> message </p>
    <input v-model="message">
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        data: {
        	message: 'Hello Visitor!'
        }
    });
</script>

 

Reactive Interfaces :

Vue.js همچنین گزینه هایی را برای اضافه کردن واکنش به پروپرتی ها، که به صورت پویا به آن اضافه می شوند ، با استفاده از ویژگی watch property ، که به عنوان ناظر کار می کند ، فراهم می کند. در مثال زیر ، هر بار که کاربر با کلیک بر روی دکمه ، مقدار داده های "counter" را تغییر می دهد ، پیامی نمایش داده می شود که مقدار قدیمی و جدید "counter" را نشان می دهد:

 

<div id="app">
	<p>Counter:  counter </p>
    <button @click = "counter++">Increment Counter</button>
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        data: {
        	counter: 1
        },
        watch: {
        	counter: function(new_val, old_val) {
            	alert('Changed from' + old_val + ' to ' + new_val + '!');
            }
        }
    });
</script>
نمونه خروجی ارتباط دو طرفه در ویو جی اس

 

Computed Properties :

وجود عبارات در الگو برای عملیات ساده مشکلی ایجاد نمیکند ولی وجود منطق بیش از حد در قالب های ما باعث می شود حفظ آن دشوار شود. از این رو ، ما می توانیم از ویژگی Computed Properties استفاده کنیم ، که در واقع یک تابع getter است که همیشه به مقدار مرتبط با شی "داده" بستگی دارد. در اینجا مثالی را بررسی میکنیم :

 

<div id="app">
	<p>Original message: " message "</p>
    <p>Computed message: " reversedMessage "</p>
</div>

<script type="text/javascript">
	var app = new Vue ({
    	el: '#app',
        data: {
        	message: 'Avantica'
        },
        computed: {
        	reversedMessage: function() {
            	return this.message.split('').reverse().join();
            }
        }
    });
</script>

 

در اینجا ، ما ازcomputed property به نام "reversedMessage" استفاده می کنیم که در آن مقدار app.reversedMessage همیشه به مقدار app.message بستگی دارد. می توانید داده ها را به خصوصیات محاسبه شده در قالب ها دقیقاً مانند یک ویژگی معمولی متصل کنید. Vue.js آگاه است که app.reversedMessage به app.message بستگی دارد ، بنابراین وقتی مقادیر app.message تغییر می کند ، هرگونه وابستگی به آن مانند app.reversedMessage نیز تغییر میکند .

 

Components :

سیستم کامپوننت Vue.js به ما امکان می دهد تا برنامه های در مقیاس بزرگ متشکل از اجزای کوچک ، خودمحور و قابل استفاده مجدد ایجاد کنیم. از آنجا که اجزاء نمونه های Vue قابل استفاده مجدد هستند ، آنها گزینه های مشابه Vue جدید مانند داده ها ، computed، watch، methods و متد های چرخه حیات را می پذیرند. شکل زیر نشان می دهد که چگونه یک رابط برنامه معمولی به سه مؤلفه تقسیم می شود: هدر ، نوار کناری و بدنه.

 

شکل کامپوننت در ویو جی اس

 

در زیر مثالی از چگونگی استفاده از یک مؤلفه Vue به نام <button-counter> آورده شده است:

<div id="app">
	<button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<script type="text/javascript">
	Vue.component('button-counter', {
    	data:function () {
        	return {
            	count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me  count  times.</button>'
    });
	var app = new Vue ({
    	el: '#app'
    });
</script>

 

در اینجا ، ما یک مؤلفه با syntaxis: Vue.component ایجاد می کنیم ، که در آن پارامتر اول نام کامپوننت قرار دارد و گزینه های آن عبارتند از: 'data' و 'pattern'. اجزای Vue می توانند در هر زمان که بخواهیم مورد استفاده مجدد قرار بگیرند. در مثال ، ما سه بار از <button-counter> </button-counter> استفاده می کنیم. توجه کنید که با کلیک بر روی دکمه ها ، هر یک تعداد جداگانه خود را حفظ می کنند. این بدان دلیل است که هر بار که از یک مؤلفه استفاده می کنید ، نمونه جدیدی ایجاد می شود.

 

جمع بندی :

همین بود . با استفاده کمی از API Vue.js ، ما یک برنامه تک صفحه ای (SPA) ایجاد کرده ایم که نمایش را بطور خودکار بر اساس تغییرات شیء "data" از نمونه Vue به روز می کند ، و به صورت همزمان ضمن استفاده از اجزای Vue.js و ویژگی های واکنشی ، تغییرات در خروجی اعمال میشود . مانند دستورالعمل ها ، ارائه اعلانی ، اتصال داده ها ، رابط های واکنش پذیر و خصوصیات محاسبه شده.

امیدواریم این مقاله باعث شناخت بهتر شما نسبت به قابلیت ها و خصوصیات ویوو جی اس شده باشد .

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید