با - آموزش آسان فریم ورک محبوب Vue.js – قسمت اول
- آموزش آسان فریم ورک محبوب Vue.js – قسمت دوم
- آموزش آسان فریم ورک محبوب Vue.js – قسمت سوم
ساختار پروژه
اجازه دهید نگاهی به ساختار اولیه پروژه بیندازیم که در پوشه vueapp01 قرار دارد:
در پوشه اصلی پروژه می توانید انواع فایل ها و پوشه ها را ببینید. بعضی از اونها که مهم هستند با هم مرور می کنیم. فایل package.json حاوی تمام بسته های ثانویه (Dependency) مربوط به پروژه است. پس با اجرای دستور npm install می توانیم مطمئن شویم که تمام بسته های موجود در این فایل دانلود و در پوشه node_modules نصب شده اند.
فایل index.html حاوی کدهایی شبیه زیر است:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vueapp01</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
این فایل نقطه شروع اجرای سایت شماست. توجه کنید که در داخل بخش body یک تگ <div> داریم که دارای خصیصه id با مقدار app است. این تگ به عنوان یک نگه دارنده بکار می رود تا خروجی که توسط Vue.js تولید می شود را در خود جای دهد.
حالا به فایل main.js در پوشه src نگاهی می اندازیم. جایی که اپلیکیشن Vue.js استارت می شود:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
در بالای فایل شما می توانید دو بخش مهم را پیدا کنید:
import Vue from 'vue': اینجا Vue همان کلاس اصلی فریم ورک است.import App from './App': و App کامپوننت روت اپلیکیشن می باشد.
با استفاده از کلیدواژه new، یک instance از کلاس اصلی فریم ورک Vue ایجاد می شود. متد سازنده ،یک شی به عنوان پارامتر دریافت می کند که حاوی ۳ خصیصه مهم است:
el: با قرار دادن عبارت#appدر این خصیصه، ما مشخص کردیم که خروجی برنامه مان باید داخل<div id="app">رندر شود.template: این خصیصه شامل کد HTML می شود که همان خروجی برنامه را تشکیل می دهد.components: لیستی از کامپوننت های Vue.js که در تمپلیت استفاده شده اند.
بخش تمپلیت فقط حاوی یک عنصر است : <App/> . البته این یک تگ HTML نیست و در واقع عنوانی است که به کامپوننت App اختصاص داده شده است. پس برای اینکه بتوانید از <App/> داخل Template استفاده کنید، کامپوننت App را باید در خصیصه سوم ، اضافه کرده باشید.
حالا اجازه دهید داخل فایل کامپوننت App.vue را ببینیم:
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
کامپوننت App یک کامپوننت مجزای single-file است که مثل همه کامپوننت های مشابه دیگر، به سه بخش مجزا تقسیم می شود:
<template></template>: شامل کدهای نمایشی (اکثرا HTML) کامپوننت است<script></script>: کدهای اسکریپت کامپوننت را شامل می شود<style></style>: کدهای مربوط به سبک دهی استایل شیت کامپوننت را در بر می گیرد
فعلا روی دو بخش اول فوکوس می کنیم یعنی template و script . بخش script شامل یک export از آبجکت تنظیمات کامپوننت است مثلا اسم کامپوننت را app گذاشتیم. دوباره از خصیصه components استفاده کردیم تا مشخص کنیم که می خواهیم از یک کامپوننت دیگر (Hello) داخل این کامپوننت استفاده کنیم. این ساب کامپوننت در بخش template همین کامپوننت app فراخوانی شده است و ذاتا در یک فایل مجزا بنام Hello.vue در پوشه components قرار دارد. البته فراموش نکنید برای استفاده از کامپوننت hello علاوه بر کارهای فوق باید اون رو به کامپوننت فعلی Import کنید. همون کاری که در ابتدای بخش <script> انجام دادیم.
حالا کدهای کامپوننت Hello به این شکل خواهد بود:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
این کامپوننت هم تقریبا مثل کامپوننت بالاست فقط یک متد بنام data نیز دارد. این متد یک آبجکت را بر می گرداند که به عنوان Model کامپوننت عمل می کند. خصیصه های تعریف شده در آبجکت مدل می توانند در بخش template بوسیله متد interpolation خوانده و نمایش داده شوند. در مثال بالا آبجکت مدل فقط یک خصیصه دارد یعنی : msg .متنی که داخل این خصیصه قرار دارد در بخش تمپلیت بوسیله کد زیر خوانده شده است:
<h1>{{ msg }}</h1>
همانطور که می بینید روش interpolation نیاز به دو آکولاد پشت سر هم که داده های مدل را شامل می شوند ، دارد.
ادامه دارد …
این مطلب فوق الغاد کمک کرد به من ، مرسی
خیلی خوشحالم مفید بوده دوست من