Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Cách sử dụng cơ cản của setup() trong Vuejs
Trong bài viết này, mình sẽ đào sâu vào một khía cạnh quan trọng của Composition API - cách sử dụng cơ bản của hàm setup(). Hàm này chính là nền tảng của Composition API, cho phép chúng ta tạo, quản lý và tương tác với các trạng thái và phương thức của component một cách hiệu quả. Hãy cùng tìm hiểu xem làm thế nào để hiểu setup() để xây dựng các ứng dụng Vue.js đáng chú ý.
Định nghĩa setup()
Hàm setup() là một phần quan trọng của Composition API. Nó được sử dụng để thiết lập và cấu hình component của bạn. Hàm này chạy trước khi component được tạo, cho phép bạn thực hiện các công việc chuẩn bị trước khi component hiển thị trên trình duyệt.
import { ref, reactive } from 'vue';
export default {
setup() {
// Logic của bạn sẽ được đặt ở đây
},
};
Sử dụng ref và reactive
Trong setup(), bạn có thể sử dụng ref và reactive để tạo các biến và đối tượng có khả năng theo dõi. ref được sử dụng cho các biến đơn lẻ, trong khi reactive được sử dụng cho các đối tượng phức tạp.
import { ref, reactive } from 'vue';
export default {
setup() {
// Tạo một biến đơn lẻ có khả năng theo dõi
const count = ref(0);
// Tạo một đối tượng có khả năng theo dõi
const user = reactive({
name: 'John',
age: 30,
});
return { count, user };
},
};
Truyền các giá trị và phương thức xuống template
Một phần quan trọng của setup() là trả về các giá trị và phương thức mà bạn muốn sử dụng trong template của component. Bạn có thể truyền chúng dưới dạng một đối tượng.
Bài viết này được đăng tại [free tuts .net]
import { ref, reactive } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
const user = reactive({
name: 'John',
age: 30,
});
return { count, increment, user };
},
};
Sử dụng giá trị và phương thức trong template
Bây giờ, bạn có thể sử dụng các giá trị và phương thức đã trả về trong template của component. Ví dụ, để hiển thị giá trị count và gọi phương thức increment, bạn có thể làm như sau:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<p>User: {{ user.name }}, Age: {{ user.age }}</p>
</div>
</template>
Sử dụng các phương thức và logic khác
Bạn cũng có thể đặt các phương thức và logic khác trong setup() và sử dụng chúng trong template hoặc trong các sự kiện.
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment,
};
},
});
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
Kết bài
Hàm setup() trong Vue.js Composition API là một công cụ mạnh mẽ giúp bạn quản lý logic của component một cách dễ dàng và rõ ràng. Bằng cách sử dụng ref và reactive, bạn có thể tạo và quản lý các biến và đối tượng có khả năng theo dõi. Sau đó, bạn có thể truyền chúng xuống template để hiển thị trạng thái và tương tác với người dùng.
Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng cơ bản của setup() trong Vue.js Composition API. Chúc bạn thành công trong việc xây dựng các ứng dụng Vue.js tương tác!
