Bài 2: Tự tạo component và binding data cho component

Mình đã cập nhật lại tất cả các bài với các thay đổi ở hiện tại ở năm 2023: Vue 3, Vite, Laravel 10x,...

Chào các bài đến với bài tiếp theo của mình, ở bài trước mình đã hướng dẫn các bạn Cài đặt Vue và chạy chương trình Hello world đầu tiên. Ở bài này chúng ta sẽ cùng thử tạo một component, khai báo sử dụng và binding data cho nó nhé.

Khai báo mới component

Để khai báo mới một component trước hết chúng ta cần tạo một mới file .vue là component đó. Các bạn mở thư mục resources/js/components, tạo mới một file, đặt tên là MyComponent.vue với nội dung như sau:

<template>
    <div class="my-component">This is my first component</div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>
    .my-component {
        color: red;
    }
</style>

Các bạn có thể thấy ở trên mình khai báo một thẻ div với nội dung như trên, cùng với đó bên dưới mình set css cho nó luôn.

Ở series này (2023) ta đang dùng Vue 3, nhưng nếu bạn nào đang dùng Vue 2 thì ta có một số chú ý sau:

Vue 2 yêu cầu tất các các dữ liệu trong thẻ <template> phải được để tất cả ở trong một thẻ gọi là root element của component (thường là div). Ví dụ như sau khi compile sẽ báo lỗi:

<template>
    This is my first component
</template>

Ví dụ trên xảy ra lỗi Component template requires a root element, rather than just text vì đoạn text chúng ta để "trần" không là con của một thẻ html nào cả.

Hoặc

<template>
    <div class="my-component">This is my first component</div>
    <div class="my-component">This is my first component</div>
</template>

Sẽ báo lỗi Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. vì chúng ta có tận 2 thẻ là root element

Có tí chú ý cho Vue 2 vậy thôi

Sau khi xong phần component, để sử dụng chúng ta cần khai báo nó trong file app.js, Thêm đoạn code sau vào file app.js:

import './bootstrap';
import { createApp } from 'vue';

const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
import MyComponent from './components/MyComponent.vue';

app.component('example-component', ExampleComponent);
app.component('my-component', MyComponent);

app.mount('#app');

Bằng cách viết như trên chúng ta khai báo component có tên là my-component (tên tuỳ ý) nội dung ở trong file MyComponent.vue, component này được khai báo với scope là global, nghĩa là chúng ta có thể gọi đến chúng ở bất kì một component nào khác trong tương lai mà không cần phải import hay require lại.

Bước cuối cùng là đưa thẻ này vào view Laravel bằng cách chỉnh sửa lại file resources/views/welcome.blade.php như sau:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    </head>
    <body class="antialiased">
        <div id="app">
            <my-component></my-component>
        </div>
    </body>
</html>

Nhớ luôn chạy app Laravel và compile Vue bằng 2 command sau nhé:

php artisan serve
npm run dev

Mở http://localhost:8000/, bạn sẽ thấy xuất hiện dòng chữ This is my first component màu đỏ. Thế là ta đã thành công rồi đó.

Screenshot 2023-11-08 at 6.01.26 PM.png

Binding data cho component

Quay lại component MyComponent.vue. Thay vì viết text trực tiếp trong thẻ html chúng ta có thể làm như sau:

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <div class="my-component">{{ msg }}</div>
</template>

<style lang="scss" scoped>
.my-component {
  color: red;
}
</style>

Ở đây trong phần script, chúng ta có khai báo 1 biến msg là 1 cái ref với giá trị là Hello World! và bên dưới phần template ta hiển thị cái ref đó ra. (ref là gì ta sẽ nói ở sau nhé)

Ở phần code HTML ở trên để sử dụng biến msg chúng ta phải gọi nó ở trong cặp thẻ {{ }}. Dữ liệu trong data chúng ta có thể khai báo khá đa dạng: số, mảng, object, string, ...mình sẽ nói dần dần ở các bài sau nhé.

Thử load lại trình duyệt chúng ta sẽ thấy nội dung đã được thay đổi:

Screenshot 2023-11-08 at 6.21.33 PM.png

Cho bạn nào đang dùng Vue 2, ví dụ tương ứng sẽ là:

<template>
  <div class="my-component">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style lang="scss" scoped>
.my-component {
  color: red;
}
</style>

Ở trên trong phần script, chúng ta có thêm phần data, nó return về một biến dạng key-value là message có giá trị là This is my first component using binding data (Sau này toàn bộ data của component chúng ta đều phải để ở trong return nhé).

Format tí cho đẹp

Khi code thì các bạn nhớ là luôn đảm bảo code của ta được format rõ ràng, lên xuống dòng, space tab đầy đủ, nếu không sẽ hại mắt mình và người khác lắm nhé .

Nếu các bạn đang dùng VSCode và đã cài sẵn 2 extensions (Volar) mà mình nói ở bài đầu thì cách format rất đơn giản. Ta chuột phải vào bất kì đâu trong file và chọn Format Document.

Screenshot 2023-11-08 at 6.11.06 PM.png

Ta nên làm việc này khi ta code xong bất kì dòng nào nhé các bạn, làm liên tục cho quen, luôn tay luôn chân . Dùng tổ hợp phím cho dễ nhé ALT+SHIFT+F