- vừa được xem lúc

5 Tip bỏ túi khi làm việc với Vue

0 0 61

Người đăng: Truong Hong Thai

Theo Viblo Asia

1. Ghi đè scoped style

Scoped CSS giúp bạn style cho component nhưng không ảnh hưởng tới style của những component khác. Vậy muốn style component đã được scoped thì bạn làm thế nào?

Xem nè:

// Nhớ đóng scoped cho cả hai component.
<style scoped>
.my-component >>> .child-component { color: blue;
}
</style>
// Nếu bạn sử dụng CSS pre-processor như scss. Bạn cần xử dụng /deep/ thay thế.
<style scoped lang="scss">
.my-component { /deep/ { .child-component { color: blue; } }
}
</style>

2. Reset data đã được khởi tạo từ ban đầu

Khi làm việc với form, bạn sẽ cần reset lại data của form khi cần thiết, hay app dụng cách này.

<template> <div class="my-component"> <input v-model="formData.name" /> <button @click="resetFormData">Change Text</button> </div>
</template> <script>
const initalState = () => ({ name: "Viblo" }); // Tạo một function trả về giá trị khởi tạo ban đầu export default { data() { return { formData: initalState(), // Gán data }; }, methods: { resetFormData() { this.formData = initalState(); // Reset data }, },
};
</script>

3. Lặp qua một khoảng nhất định

Lệnh v-for cho phép chúng ta lặp qua một mảng, nhưng nó cũng cho phép chúng ta lặp qua một khoảng nhất định:

<template> <ul> <li v-for="n in 5">Item #{{ n }}</li> </ul>
</template>
/*
Item #1
Item #2
Item #3
Item #4
Item #5
*/

4. Watch một giá trị computed

Như các bạn biết, watch theo dõi prop, state thay đổi. Nhưng các bạn đã bao giờ thử watch một giá trị computed chưa. Hay nên nhớ điều này để phục vụ trong quá trình làm việc với Vue

export default { computed: { someComputedProperty() { // Cập nhật thay đổi của thuộc tính }, }, watch: { someComputedProperty() { // Xử lý giá trị someComputedProperty thay đổi } }
};

Nếu thấy không hiểu hoặc có những góp ý cho bài viết thì mong các bạn để lại comment nhé _@.com#$%^&*

Bình luận

Bài viết tương tự

- vừa được xem lúc

Link prefetching và Lazy loading (Vue Router)

Khi bạn học về Vuejs hay Reactjs thì không ít lần các bạn sẽ gặp từ khóa Lazy loading ở phần Code-Splitting (React) và Lazy Loading (Vue Router). Đọc tài liệu thì dường như chỉ hiểu sơ sài bản chất của nó rồi xem những example và apply vào dự án.

0 0 49

- vừa được xem lúc

Tự học Vue.js tập 1 - Intro & Demo

Vue.js là gì.

0 0 44

- vừa được xem lúc

VueJs cho người mới

1. Vue Js là gì. 2. Vue instance.

0 0 17

- vừa được xem lúc

VueJs cho người mới phần 2

1. Event Handling. Listening to Events. Chúng ta có thể sử dụng chỉ thị v-on để lắng nghe các sự kiện DOM và chạy một số JavaScript khi chúng được kích hoạt.

0 0 53

- vừa được xem lúc

So sánh Vue và React

Khi phát triển một ứng dụng mới hoặc chỉnh sửa giao diện người dùng của một ứng dụng hiện có, tôi nghĩ sẽ có lúc bạn phải tìm hiểu và cân nhắc việc lựa chọn framework js. Trong bài viết này tôi sẽ cố

0 0 50

- vừa được xem lúc

Những điều cơ bản về VueJS

1. Giới thiệu về VueJS. Vậy VueJS là gì. 2.

0 0 18