Chào mừng các bạn đến với Section 2 của series VueJS của WolfActive tụi mình. Ở section trước, mình đã giới thiệu tổng quan về Vue cho các bạn. Thì đến với section 2, chúng ta sẽ cùng nhau tìm hiểu về cách Vue tương tác với HTML như thế nào, cách làm việc với template, xử lý output với với các nội dung mang tính dynamic,… Tuy nhiên vì nội dung khá nhiều nên cho mình xin tách ra thành 3 phần nhé. Thì đây sẽ là phần đầu tiên, mình sẽ nói về data bind, data, interpolation, methods cho các bạn.
Phần 1: DOM, CreateApp, Data, Interpolation , Data Bind , Methods
1/ Cài đặt
Trước khi bắt đầu section 2, các bạn hãy tải source tại đây nhé. Sau khi cài đặt, các bạn sẽ thấy cấu trúc source gồm 3 file, index.html, style.css, app.js. Mình sẽ không nói đến file css sẽ bao gồm những gì, nhưng chúng ta hãy cùng nhau xem qua file html tí
<html lang=en>
<head>
<meta charset=UTF-8 />
<meta name=viewport content=width=device-width, initial-scale=1.0 />
<title>Vue Basics</title>
<link href=https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swaprel=stylesheet/>
<link rel=stylesheet href=styles.css />
<script src=https://unpkg.com/vue@next defer></script>
<script src=app.js defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p></p>
</section>
</body>
</html>
Như các bạn thấy, mình có cấu trúc html khá đơn giản, bao gồm header, section Trong thẻ head thì mình có include sẵn một đoạn script để các bạn có thể sử dụng Vue trong Source rồi nên các bạn không cần phải lo nữa. Và trong file app.js, của mình thì hoàn toàn trống rỗng.
Và dưới dây là template của source chúng ta:
*Mục đích: Mục đích của chúng ta làm việc với base source đầu tiên là chúng ta sẽ sử dụng vue để tương tác với html và hiển thị nội dung ra. giờ ta cùng nhau bắt đầu nhé.
2/ Tạo Vue App
Để các bạn có thể sử dụng Vue trong app các bạn cần phải khởi tạo app bằng cách sử dụng Vue.createApp().
Ví dụ mình sẽ khai báo như sau:
const app = Vue.createApp()Sau khi tạo createApp kế đến chúng ta sẽ bắt đầu DOM tới element để xử lí. Bằng cách sử dụng hàm mount().
mount, sẽ nhận giá trị truyền vào là string, giống như các bạn DOM đến element vậy. Tuy nhiên, đây phải là một element tổng dùng để xử lý các element con nằm ở bên trong nó.
Ví dụ như trong đoạn html trên, mình sẽ DOM đến section, có id là user-goal để mình có thể tương tác với các element con bên trong nó.
app.mount("#user-goal")Trong createApp, chúng ta sẽ bắt đầu làm quen với thành phần đầu tiên trong Vue mà các bạn chắc chắn phải có. Đó là data().
Data là một function trong vue, với nhiệm vụ của nó là chứa những giá trị mà bạn muốn khởi tạo trong app.
data sẽ được gọi trong createApp nhé các bạn. Như sau:
const app = Vue.createApp({
data(){
},
});
app.mount("#user-goal");Bên trong data, nó sẽ trả về dữ liệu dưới dạng là object. Đây chính là kiểu dữ liệu trả về mặc định của data nên là, các bạn không thể thay đổi kiểu dữ liệu trả về của nó nhé.
Từ đó các bạn có thể khai báo biến của bạn, để xử lí chúng bên trong này.
const app = Vue.createApp({
data(){
return{
wolactiveGoal:'Cùng nhau học Vue với Wolfactive nào!!',
}
},
});
app.mount("#user-goal");Như vậy là chúng ta đã xong bước đầu tiên, trong việc tạo VueApp rồi. Kế tiếp ta sẽ bắt đầu render dữ liệu ra ngoài html.
3/ Sử dụng Vue để tương tác với html
Để có thể render value trong biến wolactiveGoal ra ngoài html, chúng ta sẽ làm quen với một thuật ngữ, mang tên là "Data Bind" và "Interpolation". Mình xin phép được ghi tiếng anh một số từ nhé. Vì dịch ra cảm giác nó ngu ngu như thế nào đấy ạ. Nhưng các bạn có thể hiểu nôm na là ràng buộc data và phép nội suy (cái này lúc làm thì hiểu mà dịch ra thì thấy cái từ nó hơi tù tù thật ạ…)
Interpolation
Để các bạn có thể render value ra ngoài html, chúng ta phải làm một việc là, gọi biến trong syntax của vue {{ tên_biến }}. Và nó phải được gọi bên trong element mà bạn đã DOM tới trong hàm mount(). Nếu các bạn khai báo ở ngoài element đó. Thì nó sẽ không chạy nhé…
Dưới đây là code và ảnh minh họa cho Interpolation và việc mình nói ở trên nhé
<header>
<h1>Vue Course Goals</h1>
<p>{{courseGoal}}</p>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{courseGoal}}</p>
</section>
Như các bạn thấy, bằng cách sử dụng Interpolation, ta có thể hiển thị giá trị của của biến wolactiveGoal.
Tuy nhiên nếu các bạn sử dụng Interpolation để render dữ liệu nó sẽ render ra tất cả các loại giá trị mà bạn gán vào biến wolactiveGoal.
Cụ thể hơn là, giả sử mình truyền vào biến trên với giá trị là 123 theo kiểu number, hay [1,2,3] theo kiểu array. Thì lúc render ra ngoài html, nó sẽ hiển thị chính xác như những gì mình truyền vào là 123 hoặc [1,2,3].
Nên ta cần phải chọn lọc và xử lý tất cả trước, rồi mới bắt đầu render ra.
Data Bind
Data Bind cũng là một cách để các bạn có thể lấy dữ liệu từ biến các bạn khai báo trong data. Tuy nhiên phạm vi để các bạn sử dụng data bind là trong các Attribute của elements. Để có thể lấy dữ liệu ra các bạn theo cú pháp sau: "v-bind:tên_attr=’biến’"
Giờ mình sẽ tạo thẻ a trong section và tạo thêm một biến có đường link nhé.
html.
<p>My link <a href="" target="_blank">Click Here</a> </p> data(){
return {
wolactiveGoal: 'Cùng nhau học Vue với Wolfactive nào!!',
wolactiveLink:'https://vuejs.org/',
};
},Như mình nói trên, để lấy dữ liệu vào attr, thì nó có khác so với việc các bạn render dữ liệu bằng Interpolation. Như sau:
<p>My link <a v-bind:href="wolactiveLink" target="_blank">Click Here</a> </p> Hoặc các bạn có thể viết một cách ngắn gọn hơn theo kiểu này:
<p>My link <a :href="wolactiveLink" target="_blank">Click Here</a> </p> 4/ Methods trong Vue
Và đây là phần cuối trong phần 1 này, Methods, nghĩa là phương thức. Đây là nơi cho phép các bạn tạo ra những function để xử lí các tác vụ, và nó được viết trong keyword methods. Cụ thể như sau:
methods:{
///Create your function here
}Bây giờ mình sẽ tạo một function trong methods nhé.
MaxMinNumber(){
let valueNumber = Math.random();
if(valueNumber < 0.5){
return 'Min value';
} else{
return 'Max value';
}
},Ở trên mình tạo một function có tên là MaxMinNumber. Trong function này mình sẽ tạo một biến có tên là valueNumber và sẽ gán giá trị random cho nó. Sau đó mình check value theo điều kiện mình muốn và return string vê. Giờ mình sẽ tạo một thẻ p và lấy giá trị function này bằng cách dùng Interpolation nhé kèm kết quả như hình bên dưới nhé.
<p>
{{MaxMinNumber()}}
</p>
Vậy nếu chúng ta muốn return giá trị trong data, thì sẽ làm như thế nào? Vâng chúng ta sẽ sử dụng con trỏ this, để trả về giá trị.
Ví dụ, ta sẽ cùng tạo 2 biến min,max trong data
data(){
return {
wolactiveGoal: 'Cùng nhau học Vue với Wolfactive nào!!',
wolactiveLink:'https://vuejs.org/',
min:'Min value',
max:'Max value'
};
},Vậy để lấy giá trị min, max ra trong methods. Ta sẽ sử dụng như sau
MaxMinNumber(){
let valueNumber = Math.random();
if(valueNumber < 0.5){
return this.min;
} else{
return this.max;
}
},Giờ thì các bạn cùng nhau thử refesh lại page xem kết quả nhé. Như vậy là chúng ta đã có một ví dụ khá cụ thể, trong việc xử lí biến trong data và methods.
Tuy nhiên mình sẽ cùng nhau làm một ví dụ cuối cùng để kết thúc phần 1 nhé. Đó là trường hợp giá sử, trong biến có thẻ html thì như thế nào?
Như ví dụ trước, mình cũng sẽ tạo thêm một biến trong data
htmlValue: '<h2>Nanatsu no tazai</h2>'Trường hợp trên nếu các bạn làm như ở ví dụ đầu tiên. Thì nó sẽ hiển thị luôn cả chữ h2 chứ không phải mỗi chữ "Nanatsu no tazai". Mình demo thử với đoạn code bên dưới nhé.
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{wolactiveGoal}}</p>
<p>{{htmlValue}}</p>
<p>My link <a :href="wolactiveLink" target="_blank">Click Here</a> </p>
<p>{{ MaxMinNumber() }}</p>
</section>
Vậy làm sao để nó có thể thẻ h2 có thể hoạt động nhỉ? Để làm được điều đó, chúng ta sẽ sử dụng một bí thuật… Đó là v-html, với v-html bạn có thẻ chạy tất cả các thẻ html trong value, mà không sợ gì cả. Cách dùng thì tương tự như v-bind nhé.
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{wolactiveGoal}}</p>
<p v-html="htmlValue"></p>
<p>My link <a :href="wolactiveLink" target="_blank">Click Here</a> </p>
<p>{{ MaxMinNumber() }}</p>
</section>
*Note: Tuy nhiên khi dùng v-html để đưa render ra thẻ html, thì mình chỉ khuyên các bạn là nên sử dụng nó trong việc render ra nội dung của mình viết, HOẶC nội dung nào đó đáng tin cậy. Vì khi render với các thẻ html mang tính dynamic như vậy, nó có thể gây ra lỗ hổng XSS
Và đây là source tổng hợp của chúng ta
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{wolactiveGoal}}</p>
<p v-html="htmlValue"></p>
<p>{{htmlValue}}</p>
<p>My link <a :href="wolactiveLink" target="_blank">Click Here</a> </p>
<p>{{ MaxMinNumber() }}</p>
</section>
</body>
</html>app.js:
const app = Vue.createApp({
data(){
return {
wolactiveGoal: 'Cùng nhau học Vue với Wolfactive nào!!',
wolactiveLink:'https://vuejs.org/',
min:'Min value',
max:'Max value',
htmlValue: '<h2>Nanatsu no tazai</h2>'
};
},
methods:{
MaxMinNumber(){
let valueNumber = Math.random();
if(valueNumber < 0.5){
return this.min;
} else{
return this.max;
}
},
}
});
app.mount('#user-goal');Tổng kết
Như vậy mình đã giới thiệu cho các bạn về data, methods, data bind, interpolation trong Vue. Cũng như các ví dụ kèm theo, để các bạn có thể nắm rõ hơn về kiến thức cơ bản của Vue. Mình sẽ có thêm nhiều ví dụ và học thêm nhiều kiến thức khác nữa ở phần sau nhé. Mọi đóng góp, thắc mắc các bạn gửi về fanpage tụi mình nhé. Và nhớ like fanpage để được đọc bài viết sớm nhất nha.