Chưa phân loại

Xử lý tương tác dễ dàng với v

Bài viết được sự cho phép của tác giả Kien Dang Chung

Một website hấp dẫn người xem phải có giao diện đẹp và có sự tương tác qua lại. Bạn hãy tưởng tượng một cô gái xinh đẹp nhưng hỏi gì cũng không biết, chạm vào không có phản ứng thì không gây cảm hứng cho người đối diện. Như vậy, tương tác là một yếu tố rất quan trọng, khéo léo bố trí các tương tác bạn vừa có thể khai thác được thông tin người dùng tối đa, vừa giúp cho họ tìm được những thông tin phù hợp, giữ người dùng ở lại với website lâu hơn và đồng nghĩa với lợi nhuận cao hơn.

1. Quản lý sự kiện với v-on

Sự kiện trong HTML là những gì xảy ra với các thẻ HTML, chúng tôi là một bộ máy biên dịch mà kết quả cuối cùng là HTML, CSS và Javascript đơn thuần, do vậy chúng tôi hoàn toàn có thể tương tác với các sự kiện của HTML. Có rất nhiều các sự kiện xảy ra khi người dùng làm một việc gì đó trên trang web:

  • Sự kiện tải trang web xảy ra khi người dùng nhập đường dẫn vào một trình duyệt web.
  • Sự kiện giá trị ô nhập liệu thay đổi khi người dùng thêm vào văn bản.
  • Một nút được nhấn cũng phát sinh sự kiện
  • Sự kiện một form đăng ký thông tin được gửi đi.
  • …

Trong framework chúng tôi để “lắng nghe” các sự kiện trên DOM (các thẻ HTML), bạn có thể sử dụng câu lệnh v-on với cú pháp:

v
-
on
:
tên_sự_kiện
=
"mã_xử_lý_sự_kiện"

Có rất nhiều sự kiện trong HTML, chúng ta có thể tạm chia thành các nhóm sự kiện như sau:

  • …

Mã xử lý sự kiện là mã viết bằng ngôn ngữ Javascript (hiện nay thường gọi là ECMAScript hay ES với phiên bản thường dùng hiện nay là ES5, ES6). Đoạn mã này có thể ở dạng inline, tức là nhồi toàn bộ code vào một dòng hoặc cũng có thể là lời gọi đến một phương thức.

1.1 Mã xử lý sự kiện inline

Một website hấp dẫn người xem phải có giao diện đẹp và có sự tương tác qua lại. Bạn hãy tưởng tượng một cô gái xinh đẹp nhưng hỏi gì cũng không biết, chạm vào không có phản ứng thì không gây cảm hứng cho người đối diện. Như vậy, tương tác là một yếu tố rất quan trọng, khéo léo bố trí các tương tác bạn vừa có thể khai thác được thông tin người dùng tối đa, vừa giúp cho họ tìm được những thông tin phù hợp, giữ người dùng ở lại với website lâu hơn và đồng nghĩa với lợi nhuận cao hơn.

new

Vue

(

{


el

:

‘#app’

,


data

:

{


likes

:

9

}

}

)

Trong ví dụ trên, chúng ta đã quản lý sự kiện nhấp vào nút “Thích” bằng đoạn mã:

Khi sự kiện nhấp chuột xảy ra, biến likes được cộng thêm 1, do việc cộng thêm 1 khá đơn giản chúng ta không cần dùng lời gọi phương thức mà đưa mã xử lý vào trong cùng câu lệnh v-on, do vậy có tên là inline. Giá trị biến likes được in ra bằng cú pháp biểu thức {{ }} mà chúng ta đã được làm quen trong Cú pháp câu lệnh trong Vue.js.

1.2 Sử dụng lời gọi phương thức trong code quản lý sự kiện

Code xử lý sự kiện trong v-on có giới hạn là một câu lệnh, như vậy chúng ta không thể đưa nhiều dòng lệnh inline vào v-on. Như vậy, nếu bạn muốn khi sự kiện xảy ra, thực hiện những công việc phức tạp thì giải pháp sử dụng lời gọi đến phương thức là lựa chọn duy nhất. Trong ví dụ ở trên, chúng ta muốn mỗi lần nhấp vào nút Thích phải cách nhau 10 giây nếu không sẽ hiển thị một thông báo.

Một website hấp dẫn người xem phải có giao diện đẹp và có sự tương tác qua lại. Bạn hãy tưởng tượng một cô gái xinh đẹp nhưng hỏi gì cũng không biết, chạm vào không có phản ứng thì không gây cảm hứng cho người đối diện. Như vậy, tương tác là một yếu tố rất quan trọng, khéo léo bố trí các tương tác bạn vừa có thể khai thác được thông tin người dùng tối đa, vừa giúp cho họ tìm được những thông tin phù hợp, giữ người dùng ở lại với website lâu hơn và đồng nghĩa với lợi nhuận cao hơn.
Chỉ được thêm like sau 10 giây

new

Vue

(

{


el

:

‘#app’

,


data

:

{


likes

:

9

,


alert

:

false

}

,


methods

:

{


like

:

function

(

)

{

this

.

likes

++

;

this

.

alert

=

false

}

else

{

this

.

alert

=

true

;

}

}

}

}

)


Chỉ được thêm like sau 10 giây

Thông báo “Chỉ được thêm like sau 10 giây” có sử dụng cú pháp điều kiện v-if, nếu biến alert có giá trị là true thì thông báo này sẽ được hiển thị. Thứ hai, chúng ta thấy xuất hiện một phương thức like() được khai báo trong thuộc tính methods của Vue instance. Vậy Vue instance là gì, thuộc tính methods của Vue sử dụng như thế nào? Tạm thời, khi cần một phương thức như trong Javascript đơn thuần, chúng ta sẽ khai báo trong thuộc tính methods của Vue, cụ thể cách dùng thế nào sẽ có một bài viết riêng cho vấn đề này.

new

Vue

(

{


el

:

‘#app’

,


data

:

{


likes

:

9

,


alert

:

false

}

,


methods

:

{


like

:

function

(

)

{

this

.

likes

++

;

this

.

alert

=

false

}

else

{

this

.

alert

=

true

;

}

}

}

}

)

Thứ ba, chúng ta sử dụng thêm một thư viện ngoài là chúng tôi đây là một thư viện rất mạnh về xử lý thời gian nó giống như thư viện Carbon chúng ta hay dùng trong Laravel vậy.

1.3 Viết tắt khi sử dụng v-on

Vue.js cho phép bạn viết tắt cú pháp v-on:tên_sự_kiện thành :tên_sự_kiện. Ví dụ

có thể viết lại thành

2. Thay đổi sự kiện gốc

Với chúng tôi bạn hoàn toàn có thể sử dụng các phương thức kiểu như preventDefault(), stopPropagation()… bên trong các sự kiện tuy nhiên sẽ tốt hơn nếu v-on hỗ trợ cú pháp sử dụng các tính năng tương tự, nó giúp cho tường minh và hợp logic hơn. Rất may, chúng tôi cũng đã quan tâm đến điều này và nó đưa ra cú pháp để thực hiện thay đổi sự kiện như sau v-on:tên_sự_kiện.phương_thức_thay_đổi_sự_kiện. Trong chúng tôi có các phương thức để thay đổi sự kiện gốc như sau:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once

Ví dụ thuần Javascript ở trên có thể được viết lại như sau trong Vue.js

new

Vue

(

{


el

:

‘#app’

,


data

:

{


show

:

false

,


tutorials

:

[

]

}

,


methods

:

{

this

.

show

=

!

this

.

show

;

}

}

}

)

3. Thay đổi hoạt động bàn phím, chuột

Trong ứng dụng web của bạn, đôi bạn muốn thay đổi cách hành xử khi một phím được nhấn. Ví dụ, trên một form khi bạn nhấn Enter thì dữ liệu form sẽ được gửi đi (submit) hoặc khi bạn nhấn PageUp, PageDown trình duyệt sẽ cuộn cả nội dung trang nhưng bạn lại muốn chỉ cuộn nội dung phần danh sách ảnh trong trang… chúng tôi cho phép bạn thay đổi cách hành xử các phím trên bàn phím hoặc chuột được nhấn. Cú pháp quản lý hoạt động của bàn phím như sau:

v
-
on
:
tên_sự_kiện
.
mã_phím_hoặc_tên_phím
=
"mã_xử_lý_sự_kiện"

Ví dụ:

Trong ví dụ trên 13 là mã của phím enter, khi bấm enter form sẽ được submit. Ngoài ra chúng ta có thể sử dụng tên phím thay cho mã phím:

Danh sách một số tên phím được định nghĩa sẵn:

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift

Với các phím của chuột, chúng ta có danh sách sau:

  • .left
  • .right
  • .middle

Chúng ta có thể tổ hợp các phím với nhau, ví dụ khi ấn Ctrl + F1 trên phần tử HTML nào đó sẽ hiển thị hướng dẫn về phần tử đó.

112 là mã của phím F1. Trong ví dụ này, nếu bạn nhấn tổ hợp nhiều phím mà có chứa Ctrl + F1 thì v-on:keyup vẫn hoạt động, để có thể quản lý chính xác phím hoặc tổ hợp phím sử dụng .exact.

4. Bài tập

Viết một ứng dụng web dạng máy tính bỏ túi với tính năng cộng trừ nhân chia cơ bản.

Phần 1: Xây dựng giao diện Giao diện được xây dựng dựa trên framework CSS Bootstrap dạng lưới, mỗi nút trên máy tính bỏ túi là một thẻ div có kích thước bằng 1 ô trong lưới 12 ô. Bạn nên tìm hiểu về framework Bootstrap vì hiện nay có rất nhiều các giao diện web được xây dựng dựa trên nó.

Phần 2: Quản lý sự kiện khi bấm thành phần của số.

Chúng ta xây dựng một phương thức inputNumber() để nhập các thành phần của một số bao gồm các số từ 0 đến 9 và dấu chấm (.) cho các số thập phân. Đầu vào của phương thức inputNumber() chính là thành phần của số cần tính toán.

inputNumber
:
 
function
(
partOfNumber
)
 
{

    
if
 
(
partOfNumber 
==
 
'.'
 
&&
 
this
.
resultString
.
includes
(
'.'
)
)
 
{

        
return
;

    
}
 
else
 
if
 
(
this
.
resultString 
==
 
'0'
)
 
{

        
this
.
resultString 
=
 partOfNumber
;

        
this
.
realValue 
=
 partOfNumber
;

    
}
 
else
 
{

        
this
.
realValue 
+
=
 partOfNumber
;

        
this
.
resultString 
=
 
this
.
realValue
;

    
}


}
    • cộng hai số
    • trừ hai số
  • x nhân
  • / chia
  • i đảo dấu
  • % tính phần trăm
  • = tính toán kết quả cuối cùng

Phương thức calculate() sẽ thực hiện tính toán. Trong phương thức này, chúng ta sử dụng hàm eval() của Javascript để thực hiện tính toán một biểu thức ở dạng chuỗi.

calculate
:
 
function
(
operator
)
 
{

    
if
 
(
operator 
==
 
'='
 
&&
 
this
.
currentOperator 
!
=
 
''
)
 
{

        
this
.
expression 
+
=
 
this
.
resultString
;

        
this
.
resultString 
=
 
eval
(
this
.
expression
)
.
toString
(
)
;

        
this
.
realValue 
=
 
''
;

        
this
.
currentOperator 
=
 
''
;

        
this
.
expression 
=
 
this
.
resultString
;

    
}
 
else
 
if
 
(
operator 
==
 
'%'
)
 
{

        
this
.
expression 
=
 
''
;

        
this
.
resultString 
=
 
(
this
.
resultString
/
100
)
.
toString
(
)
;

        
this
.
realValue 
=
 
this
.
resultString
;

    
}
 
else
 
if
 
(
operator 
==
 
'i'
)
 
{

        
if
 
(
this
.
resultString 
==
 
0
)
 
{

            
return
;

        
}

        
if
 
(
this
.
resultString[
0
] 
==
 
'-'
)
 
{

            
this
.
resultString 
=
 
this
.
resultString
.
substr
(
1
)
;

        
}
 
else
 
{

            
this
.
resultString 
=
 
'-'
 
+
 
this
.
resultString
;

            
this
.
realValue 
=
 
this
.
resultString
;

        
}

    
}
 
else
 
{

        
this
.
currentOperator 
=
 operator
;

        
this
.
expression 
+
=
 
this
.
realValue
;

        
this
.
resultString 
=
 
eval
(
this
.
expression
)
.
toString
(
)
;

        
this
.
expression 
=
 
this
.
resultString
;

        
this
.
expression 
+
=
 operator
;

        
this
.
realValue 
=
 
''
;

    
}


}

và phương thức clearScreen()

clearScreen
:
 
function
(
)
 
{

    
if
 
(
this
.
resultString 
!
=
 
'0'
)
 
{

        
this
.
expression 
=
 
''
;

        
this
.
resultString 
=
 
'0'
;

        
this
.
realValue 
=
 
''
;

    
}


}

Phần 5: Nâng cao Bài tập này có hai phần có thể mở rộng:

  • Xây dựng máy tính bỏ túi khoa học có thể tính toán sin, cos, giải các phương trình cơ bản…
  • Nâng cao khả năng nhập bằng bàn phím.

5. Kết luận