Hi các bạn.
Chúng ta tiếp tục đi với VueJS nữa nhé 😀
Hôm nay chúng ta sẽ qua bài 3 là: Sử dụng một số directive cơ bản trong VueJS
Ở bài này, mình sẽ giới thiệu cho các bạn một số directive cơ bản trong VueJS mà chúng ta hay sử dụng tới.
Nếu các bạn đã từng làm việc với AngularJS thì chắc hẳn sẽ biết directive là gì thôi 😀
I/ Directive là gì?
Là một dạng special token mà ta sẽ gán vào DOM element và dựa trên cái special token đó, nó sẽ làm một việc mà chúng ta muốn.
Ví dụ, để xuất ra text, ta không chỉ dùng {{ xx }} mà còn có thể dùng 1 directive như sau:
<!-- export text from hello_world in data -->
<p v-text="hello_world"></p>
// in javascript - vue instance
data: {
hello_world: "Hello SethPhat World"
}Về đơn giản là vậy :D, bây giờ chúng ta sẽ đi qua một số directive cơ bản trong VueJS mà ta hay sử dụng nhé.
Mình sẽ chia ra làm 2 loại directives:
- Data Directive – chuyên để xử lý data.
- Event Directive – chuyên để bắt các sự kiện của element.
II/ Data Directive
Data sẽ sử dụng:
data: {
number: 10,
text: "Hello SethPhat",
isLogged: true,
object: {
hello: "Hello",
world: "SethPhat"
},
arrayNormal: [1,2,3,4,5],
arrayObj: [
{id: 1, text: "Get"},
{id: 2, text: "Set"},
{id: 3, text: "SethPhat"},
]
},1/ Để xuất ra text thông thường ở bên trong 1 element, ta dùng v-text
<p v-text="text"></p>
<p>{{text}}</p>Kết quả
Và đơn giản hơn AngularJS, để xuất ra HTML, ta dùng v-html với cách sử dụng tương tự v-text này 😀
2/ Để chạy vòng lặp và render ra giao diện, sử dụng v-for
<p v-for="item in arrayNormal">Number: {{item}}</p>Ta có thể lấy index của phần tử thông qua cách khai báo như sau:
<p v-for="(item, index) in arrayObj">[Index: {{index}}] ID: {{item.id}} - Text: {{item.text}}</p>Kết quả:
Ngoài ra khi dùng v-for, ta cũng có thể chạy lặp toàn bộ properties trong object
<p v-for="(value, key) in object">{{key}}: {{value}}</p>Kết quả:
3/ Ẩn/hiện phần tử theo điều kiện, ta dùng v-show:
<p v-show="isLogged">Logged in</p>
<p v-show="!isLogged">Not logged in</p>Ngoài ra ta cũng có thể dùng v-if, v-else-if, v-else để ẩn hiện theo điều kiện:
<p v-if="isLogged">Logged in</p>
<p v-else>Not logged in</p>Kết quả:
Lưu ý:
- v-if, v-else, v-else-if: Chỉ render ra phần tử khi điều kiện đúng.
- v-show: vẫn render ra hết, sai điều kiện sẽ bị ẩn đi khỏi giao diện.
Bên trên là những directives cơ bản mà ta hay sử dụng :D, tất nhiên là sẽ còn 1 số directives khác nữa, các bạn tự tìm hiểu thêm nhé 😀
III/ Event Directives
Về Events thì có rất nhiều, mình chỉ đi qua 3 cái là click, change, keyup nhé 😀
1/ Event Click
Đây là một trong những event mà ta hay sử dụng nhất, để bắt dc sự kiện này khi nhấn vào element nào đó, ta dùng như sau:
<button v-on:click="testClick">Test click</button>
<button @click="testClick">Test click</button>Với event directive, bạn có thể viết dc 2 cách như trên, long và short type. Và mình prefer short type 😀
Và nhớ tạo ra 1 method nhé 😀
methods: {
testClick: function(event) {
alert("Clicked");
}
}Ngoài ra bạn cũng có thể truyền vào giá trị bất kì khi click
<p v-for="(obj, index) in arrayObj">
<button @click="remove(index)">Remove {{obj.text}}</button>
</p>
methods: {
remove: function(index) {
this.arrayObj.splice(index, 1);
}
}Và cuối cùng, vừa truyền vào giá trị và truyền vào event click của js 😀
2/ Event Change
Tương tự như click, event change khi control thay đổi thì ta sẽ khai báo như sau:
<input type="checkbox" @change="onChangeCheckBox">
<input type="checkbox" v-on:change="onChangeCheckBox">Và cách viết methods cũng tương tự như click 😀
3/ Event KeyUp
Đây là một trong những event để bắt dc những lần nhập của người dùng trên control (sau khi nhập xong 1 phím)
Khai báo như sau:
<input type="text" v-on:keyup="fireKeyUp">
<input type="text" @keyup="fireKeyUp">Khi ta nhập bất kì kí tự nào thì keyup nó sẽ trigger method của chúng ta.
Và cách viết method cũng tương tự như ở trên 😀
Ngoài ra, VueJS còn hỗ trợ chúng ta chỉ trigger sự kiện khi đúng phím đó nhập vào (ví dụ nhập Enter), thì ta khai báo như sau:
// chỉ khi nhấn enter mới trigger
<input type="text" @keyup.enter="enterOnly">
// nhập vào phím bất kì (dùng mã code phím theo js) (13 => enter)
<input type="text" @keyup.13="enterOnly">VueJS có hỗ trợ ta những phím common mà ta hay sử dụng khi dùng keyup (nhớ code phím khá là khó chịu đúng ko :D). List dưới đây 😀
Còn rất nhiền events nữa, các bạn có thể tìm hiểu thêm tại: https://vuejs.org/v2/guide/events.html
IV/ Kết luận
Với directives phong phú mà VueJS đã provide cho chúng ta, chúng ta có thể deal với phần UI, giao diện web app của chúng ta theo tùy ý chúng ta muốn và cực kì đơn giản, dễ sử dụng 😀
Cám ơn các bạn đã quan tâm theo dõi về bài directive cơ bản trong VueJS 😀 !
Bài tiếp theo sẽ là: Data Binding và Two-way Binding trong VueJS
Học VueJS, tìm hiểu thêm tại: https://sethphat.com/sp-category/lap-trinh/vuejs
