Hỏi đáp

Vuejs Là Gì? Những Điểm Đặc Biệt Trong Framework Vuejs Là Gì – viettingame

Vue.js là một thư viện Javascript để xây dựng giao diện người sử dụng. Năm ngoái nó chính thức trở nên khá thông dụng so với những nhà phát triển web. Nhẹ, tương đối dễ học và mạnh mẽ và tự tin là ưu điểm của nó.

Đang xem: Vuejs là gì? những điểm đặc biệt quan trọng trong framework vuejs

Nội dung bài viết này, trang bị cho một vài kỹ năng để chính thức xây dựng những ứng dụng Vue.js cơ bạn dạng. Nào cùng tìm hiểu thôi!

Mẫu cú pháp và dữ liệu

Cốt lõi của Vue.js là một cú pháp mẫu giản dị như sau:

Ghép chúng với đoạn code JavaScript sau:

var myApp = new Vue({ el: “#myApp”, data: { message: “Hello world!” }})Và nó sẽ cho ra hậu quả Hello world! Đang được hiển thị trên website.

*
*

Phần el: #myApp yêu cầu Vue hiển thị ứng dụng bên trong thực thể DOM bằng id của myApp. Đối tượng người dùng data là nơi đặt dữ liệu mình muốn sử dụng trong ứng dụng của tớ. Shop chúng tôi đã thêm một khoá vào phía trên, message, và tham chiếu trong HTML của công ty chúng tôi như sau: {{ message }}.

Vue sử dụng rộng rãi link đối tượng người tiêu dùng data tới DOM, vì thế vậy nếu dữ liệu thay đổi, trang cũng sẽ được update.

Phía trên được gọi là declarative rendering. Chúng ta chỉ việc chống chỉ định những gì mình muốn update và Vue sẽ biết triển khai điều đó.

Chúng ta thậm chí thay đổi dữ liệu bằng phương pháp này:

myApp.message = “Some new value”;

Directives

Quan niệm tiếp theo các bạn sẽ cần phải học là directives. Directives là những thuộc tính HTML với tiền tố v-, thể hiện cách chúng phản ứng với DOM được hiển thị.

Giả sử chúng ta chỉ muốn render một chiếc gì đó nếu ĐK là đúng và ẩn nó đi nếu ĐK này là sai. Thì chúng ta sẽ sử dụng v-if.

Trong HTML, nó trông như vậy này.

Xem thêm: +84 Là Gì – Cùng 84 Là Gì

Now you see me

Trong JavaScript:

var app = new Vue({ el: “#app”, data: { seen: true }})Điều này sẽ kéo đến việc hiển thị đoạn “Now you see me” nếu thấy trong dữ liệu là đúng. Để ẩn đoạn văn, chúng ta thậm chí đặt thành false, như sau:

app.seen = false;Ngoài ra với rất nhiều directives khác, như v-for, v-on, v-bind và v-model.

Xử lý Input của người sử dụng

Một directive quan trọng bạn phải học là v-on. Nó sẽ nối một sự kiện listener vào thực thể DOM, để chúng ta thậm chí xử lý Input của người sử dụng. Chúng ta chống chỉ định loại sự kiện sau dấu hai chấm. Vì như thế vậy, v-on:nhấp chuột sẽ “lắng nghe” những cú nhấp chuột.

Nhấp chuột me!
myClickHandler đề cập tới khóa với cùng tên trong số đối tượng người tiêu dùng methods . Không nhất thiết phải nói, này là đối tượng người tiêu dùng mà chúng ta đặt những method của ứng dụng. Chúng ta thậm chí bao nhiêu method mà mình muốn.

var app = new Vue({ el: “#app”, methods: { myClickHandler: function () { console.log(“button clicked!”); } }})Điều này sẽ hỗ trợ nút đăng nhập chuyển người sử dụng tới giao diện tinh chỉnh lúc nhấp vào nút.

Phối kết hợp toàn bộ lại với nhau

Lúc này chúng ta hãy tạo ra một ví dụ mà chúng ta sử dụng cả dữ liệu và method, phối hợp những gì chúng ta đã học được cho đến nay.

{{ message }}

Nhấp chuột me!

Cùng với JavaScript:

var app = new Vue({ el: “#app”, data: { message: “Start message” }, methods: { changeMessage: function () { this.message = “The message has changed!” } }})Thuở đầu, nó sẽ hiện thông báo “Start” trên trang, tuy nhiên sau lúc nhấp chuột nó sẽ hiển thị thông báo này đã thay đổi để thay thế.

Từ khóa this đề cập tới trong ví dụ của Vue này công ty chúng tôi gọi là app. Trong trường hợp này, dữ liệu của con người đã tồn tại, vì thế vậy chúng ta thậm chí xem thêm dữ liệu message trải qua this.message.

Xem thêm: Cách Mở Usb Bị Ẩn File Trong Usb Thành Công 100%, 3 Cách Hiện File Ẩn Trong Usb Thành Công 100%

Hy vọng với những kỹ năng cơ bạn dạng về Vue.js được hỗ trợ trong nội dung bài viết đã đủ sẽ giúp đỡ chúng ta hiểu về Vue.js và thậm chí chính thức tạo những ứng dụng giản dị với Vue.js.

Về Viettingame.com

Viettingame.com - Chuyên trang web tổng hợp những thông tin hữu ích trên internet như thông tin về game, tin tổng hợp
Xem tất cả các bài viết của Viettingame.com →

Trả lời

Email của bạn sẽ không được hiển thị công khai.