Vue js trong một bài viết

Bài viết này mình sẽ biên tập các vấn đề liên quan tới vue js

Những lưu ý

– lưu ý quasar phải include ở footer (nếu không sẽ gây ra lỗi)

-Function phải đặt trong input không đặt trong label

đặt sai

đặt đúng phải là

 

Trigger event của button

Trong jquery chúng ta có phương thức là $(‘.abc’).trigger(‘click’). vậy trong vue js thì sao

Chúng ta sẽ sử dụng ref trong button

Sau đó tại nơi muốn trigger

Tải thư viện liên quan đến vuejs

https://github.com/nguyentantung/chili-scripts-css/tree/master

Code mẫu import thư viện vào wordpress admin

Import thư viện theo short code

 

Code mẫu bắt đầu 1 component đơn được viết trực tiếp vào file php

Code mẫu list (danh sách, thêm, xóa và phân trang scroll)

 

 

Re render một child component

Để re render một child component chúng ta dùng :key=”reRender”, với reRender là một biến để kích hoạt sự render

ví dụ

và ở data

Khi nào cần trigger re render thì chỉ cần set

 

Cập nhật html của một phần tử

trong jquery chúng ta thường dùng là $(‘.phan_tu’).html(‘noi dung’) còn trong vue js sẽ dùng  v-html để làm việc này

ví dụ

Phân trang vue paginate scroll

code mẫu với listCoins là dữ liệu tất cả trong table

 

Trỏ tới một phần tử trong component

Ví dụ trong jquery bạn thường dùng $(‘#id_phantu’) hoặc dùng class $(‘.class_phantu’), còn trong vue js

 

Cập nhật data của parent component từ child

nguyên tắc cập nhật bạn xem hình sau:



Tại child component bạn cần emit một sự kiện và tại parent component sẽ bắt sự kiện này để xử lý. ví dụ

tại child component

Tại parent component

Parent component có Router

 

Bắt đầu 1 parent component

 

Bắt đầu 1 child component

 

Các function sử dụng lại

 

Sử dụng axios

Mẫu code dạng list trong admin có phân trang

Cách tổ chức dữ liệu cho phần tử select

Sử dụng vue-js-modal

include vào head

trước new vue thêm

code modal nhớ là đặt trong new vue

Mở modal

Đóng modal

Để không thấy code vuejs khi page chưa load xong

Bạn chỉ việc thêm v-cloak vào wrap của tag id

ví dụ:

Rồi sau đó thêm style sau vào css

 

5/5 (1 Đánh giá)

Gửi Phản Hồi
Chọn đánh giá của bạn
0 Bình Luận
Thông tin người gửi
Anh Chị


Form đăng ký nhận bài mới

Đăng ký nhận bài viết mới

Khi mình đăng bài mới bạn sẽ nhận nó qua Email


Super-flatsome

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

  • Fcwordpress trên facebook Fcwordpress trên Twitter Fcwordpress trên youtube

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress

0912889416