کار با محدوده‌های اسکریپت در Vue.js
در Vue.js، وقتی از Single File Components (SFC) استفاده می‌کنی، اسکریپت‌ها در داخل تگ <script> قرار می‌گیرن. یکی از ویژگی‌های جالب Vue، قابلیت استفاده از محدوده‌ها و ویژگی‌های مختلف در اسکریپت‌هاست که می‌تونی در این بخش‌ها به داده‌ها، متدها، و کامپوننت‌ها دسترسی پیدا کنی.
انواع محدوده‌های اسکریپت در Vue.js
۱. اسکریپت پایه
در حالت معمول، وقتی داخل تگ <script> از داده‌ها، متدها و دیگر ویژگی‌ها استفاده می‌کنی، این‌ها به صورت global (برای کامپوننت جاری) در دسترس هستن. یعنی هر چیزی که در اینجا تعریف می‌کنی، تنها به همون کامپوننت مربوط می‌شه.
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">تغییر پیام</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'سلام از Vue!'
}
},
methods: {
changeMessage() {
this.message = 'پیام تغییر کرد!'
}
}
}
</script>
<style scoped>
h1 {
color: green;
}
</style>
در اینجا:
- data حاوی داده‌هاست که می‌تونی توی تگ <template> ازش استفاده کنی.
- methods حاوی متدهایی است که می‌تونی روی رویدادها (مثل @click) اعمال کنی.
۲. استفاده از scoped برای استایل‌ها
وقتی از scoped در تگ <style> استفاده می‌کنی، استایل‌ها فقط روی همون کامپوننت اعمال می‌شن و از تاثیر بر سایر بخش‌ها جلوگیری می‌کنه.
h1 {
color: red;
}
</style>
استفاده از scoped باعث می‌شه که استایل فقط روی کامپوننت جاری تاثیر بذاره و از استایل‌های دیگر کامپوننت‌ها جدا بشه.
ویژگی‌های اسکریپت در Vue.js
۳. export default
در Vue، هر کامپوننت باید با export default تعریف بشه. این دستور به Vue می‌گه که کد داخل فایل باید به صورت یک شیء در دسترس قرار بگیره.
data() {
return {
message: 'سلام از Vue!'
}
}
}
۴. استفاده از props برای دریافت داده‌ها
با استفاده از props می‌تونی داده‌ها رو از کامپوننت والد به کامپوننت فرزند منتقل کنی:
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>
در کامپوننت والد:
<div>
<ChildComponent title="این یک پیام از والد است" />
</div>
</template>
۵. computed برای محاسبات در زمان اجرا
computed بهت اجازه می‌ده که مقادیر محاسبه‌شده ایجاد کنی که بر اساس داده‌ها تغییر می‌کنن، بدون نیاز به استفاده از متدها.
<div>
<h1>{{ reversedMessage }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'سلام Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
۶. watch برای نظارت بر تغییرات داده‌ها
watch بهت این امکان رو می‌ده که بر تغییرات داده‌ها نظارت کنی و وقتی داده تغییر کرد، عملی رو اجرا کنی.
<div>
<input v-model="message" />
<p>پیام شما: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
watch: {
message(newMessage) {
console.log('پیام تغییر کرد:', newMessage)
}
}
}
</script>
دسترسی به محدوده‌های مختلف اسکریپت
۷. استفاده از this
داخل متدها و دیگر بخش‌ها، می‌تونی به داده‌ها، متدها و دیگر ویژگی‌های کامپوننت با استفاده از this دسترسی پیدا کنی. مثلا:
changeMessage() {
this.message = 'پیام تغییر کرد!';
}
}
اینجا this به داده‌ها و متدهای تعریف‌شده در کامپوننت اشاره می‌کنه.
۸. استفاده از beforeCreate و created
در Vue، می‌تونی از چرخه حیات کامپوننت‌ها (Lifecycle Hooks) برای انجام کارهایی قبل و بعد از ایجاد کامپوننت استفاده کنی. مثلا:
data() {
return { message: 'قبل از ایجاد کامپوننت' }
},
beforeCreate() {
console.log('قبل از ایجاد کامپوننت')
},
created() {
console.log('کامپوننت ایجاد شد!')
}
}
beforeCreate قبل از اینکه داده‌ها آماده بشن اجرا می‌شه و created وقتی که کامپوننت آماده شد اجرا می‌شه.
جمع‌بندی
- Vue به شما اجازه می‌ده که اسکریپت‌ها رو به صورت مدیریت‌شده و ماژولار در کامپوننت‌ها بنویسید.
- data، methods، computed و watch ابزارهایی هستن که در اسکریپت‌ها برای مدیریت داده‌ها و تغییرات ازشون استفاده می‌کنید.
- props برای انتقال داده‌ها بین کامپوننت‌ها و this برای دسترسی به داده‌ها و متدها استفاده می‌شه.
- قابلیت‌هایی مثل beforeCreate و created بهتون اجازه می‌ده که از چرخه حیات کامپوننت‌ها استفاده کنید.
