The opportunity to challenge Vue3 As wrritten in the title, I mainly used to use React Meanwhile, I decided to renew the jQuery system that I made as part of my studies in my first year of graduation. I was in a situation where I could use anything, so when I thought about what to remake, This time I want to try something other than React. The document seems to be easy to understand If you google, there will be a lot of useful things Supports TypeScript From these four points, I decided to...
Javascrip build react express node js co ban vuejs
Mở đầu: Ở phần trước, mình đã giới thiệu cho các bạn về cách cài đặt Vuejs và vòng đời của một đối tượng trong Vuejs. Nay chúng ta cùng đi tìm hiểu tiếp về Computed property và watcher, Binding cho class và style, Render theo điều kiện và theo danh sách. Computed property và watcher: 1. Computed property: Computed property có thể hiểu là một “thuộc tính được tính toán”. Nó được thể hiện dưới dạng...
co ban vuejs
Sau khi tạo được 1 dự án mới với Vue chúng ta cùng vào tìm hiểu rõ hơn về VueJs Nếu bạn nào chưa biết các tạo 1 dự án Vue mới tham khảo ở link sau 1. Vue instance lifecycle Khi tiếp cận bất kỳ framework nào, chúng ta đều cần phải hiểu rõ Lifecycle của chúng, từ lúc khởi tạo ứng dụng, chạy ứng dụng hay kết thúc ứng dụng đấy. Trong Vue cũng vậy, cụ thể dưới đây là sơ đồ vòng đời của...
co ban vuejs
Mở đầu: Tiếp theo ở phần này, chúng ta tiếp tục cùng tìm hiểu về: Event handling Cơ bản về component Cách sử dụng axios để call api. Chúng ta bắt đầu vào tìm hiểu luôn nhé. Event handling: Trong phần này chúng ta sẽ cùng tìm hiểu cách xử lý các sự kiện khi người dùng tương tác như click hay bấm các phím trong VueJS nhé. 1.Lắng nghe sự kiện: Chúng ta có thể dùng directive v-on để lắng nghe các sự...
co ban vuejs
Bạn muốn hiển thị 1 danh sách dữ liệu, bạn không biết làm như nào. Hãy tham khảo bài viết dưới đây nó có thể giúp ích cho bạn Rendering list data Ta có 1 danh sách user muốn hiển thị như sau: return { users: [ { name: "User 1", email: "[email protected]", phone: "0972218xxx", address: "210 quang trung hà đông hà nội", publish:1 }, { name: "User 2", ...
co ban vuejs
Bạn muốn hiển thị 1 danh sách dữ liệu, bạn không biết làm như nào. Hãy tham khảo bài viết dưới đây nó có thể giúp ích cho bạn. Bạn cũng có thể tham khảo ở document của vue Render list data Ta có 1 danh sách user muốn hiển thị như sau: return { users: [ { name: "User 1", email: "[email protected]", phone: "0972218xxx", address: "210 quang trung hà đông hà nội", ...
co ban vuejs
Như ở bài trước chúng ta đã render ra được list users. Bây giờ ta muốn thêm 1 user vào list user, làm như nào chúng t cùng đi vào tìm hiểu ở dưới đây. Event Handling Listen to Events Trong Vue.js chúng ta có thể dùng directive v-on để lắng nghe các sự kiện DOM và thực thi JavaScript khi những sự kiện này được kích hoạt. Ví dụ: Lắng nghe sự kiện click trên DOM. <div id="app"> <button...
co ban vuejs
Ở phần 2 chúng ta render ra được danh sách user. Vậy ta muốn thêm user mới vào danh sách users thì chúng ta tham khảo bài viết dưới đây Ta cần tìm biết về form input binding Mọi người có thể xem chi tiết tại đây Để có thể bind dữ liệu cho input form thì chúng ta sẽ sử dụng v-model nhé. Đây là kiểu "2 way binding" tức là dữ liệu các bạn khai báo từ data sẽ được bind với các input và dữ...
co ban vuejs
Nhu cầu phổ biến đối với liên kết dữ liệu là thao tác danh sách lớp của một phần tử và các kiểu nội tuyến của nó. Vì cả hai đều là thuộc tính nên chúng ta có thể sử dụng v-bind để xử lý chúng: chúng ta chỉ cần tính toán một chuỗi cuối cùng với các biểu thức của chúng ta. Tuy nhiên, việc can thiệp vào việc nối chuỗi rất khó chịu và dễ xảy ra lỗi. Vì lý do này, Vue cung cấp...
co ban vuejs
Ở bài trước mình đã giới thiệu sơ qua về vuex sang bài này mình sẽ đi chi tiết về cách dùng của state và getters Thiết lập sử dụng vuex Các bạn có thể xem chi tiêt tại đây Mình hướng dẫn thiết lập bằng npm, các bạn mở project chạy lệnh sau để cài đặt vuex npm install vuex --save Sau khi cài đặt ta tạo 1 folder store để lưu trữ Thiết lập file index.js cho 1 module file index.js cơ bản import Vue...
co ban vuejs Cơ bản vuex
Bài trước chúng ta đã được giới thiệu về state và getters bài hôm nay chúng t sẽ đi vào cách dùng của mutations và actions Mutation Ta thực hiện xóa 1item data trong posts Post.vue <template> <div> <h1>Danh sách bài viết</h1> <ul> <li class="mt-2 d-flex justify-content-between" v-for="post in posts" :key="post.id"> {{ post.title }} <button class="btn...
co ban vuejs Cơ bản vuex