Ngày 02 - Ví dụ về Vuejs và dữ liệu của nó.
Chào các bạn, lại là mình, Dũng đây :v qua bài viết đầu tiên
Ồ, bạn chưa phải thành viên của forum
Đăng nhập hoặc đăng ký ngay.
thì chắc các bạn đã có cái hình dung tổng quan về framework này rồi ha.Hôm nay mình sẽ đồng hành cùng các bạn đi tìm hiểu một ví dụ của VueJS khi nó được render lên trang web thì nó sử dụng dữ liệu như thế nào, làm sao để ta hiển thị lên dữ liệu của ta mong muốn. Đó chính là mục đích của bài viết hôm nay.
Trước hết chúng ta sẽ ôn lại những thứ ta được học ở ngày thứ nhất:
- Ta sẽ có một file html nạp thư viện Vuejs đã được build sẵn.
- Ta sẽ có một file javascript được viết riêng và cũng nạp vào file html này gọi là main.js
- Trong file main.js ta tạo ra một instance của Vuejs bắt đầu được render (mouting point) từ thẻ div có id là app
- Ta được kết quả là một file html đã được render.
Ồ, bạn chưa phải thành viên của forum
Đăng nhập hoặc đăng ký ngay.
nhé 
Vue Instance
Ở bài trước, khi ta tạo ra một instance của Vuejs, ta chỉ cung cấp duy nhất hai thuộc tính là el - mouting point và data ta chỉ cung cấp một biến duy nhất là greeting để hiển thị dòng chữ
Hello World from TuiHocWeb!
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'Hello World from TuiHocWeb!',
},
});Bây giờ ta sẽ đổi biến đổi một chút, ta sẽ thay biến greeting sẽ có dữ liệu là
Hello World!, ta sẽ thêm hai biến nữa, là user và country, hai biến này chúng ta cũng sẽ in ra trên template với Mustache Syntax.
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'Hello World!',
user: 'Le Dung',
country: 'Viet Nam'
},
});Template sẽ như thế này:
HTML:
<html>
<body>
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<div id="app">
<h2>{{ greeting }}</h2>
<p>by {{ user }} from {{ country }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Ta sẽ được kết quả:
Các hàm và events
Ở template, ta sẽ thêm một button để thực hiện việc thay đổi dòng chữ này:
HTML:
<html>
<body>
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<div id="app">
<h2>{{ greeting }}</h2>
<p>by {{ user }} from {{ country }}</p>
<button>Change Greeting</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Như vậy, ta đã có button, bây giờ ta sẽ khai báo hàm mà button này sẽ nhấn, mình tạm gọi hàm này là changeGreeting()
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'Hello World!',
user: 'Le Dung',
country: 'Viet Nam'
},
methods: {
changeGreeting() {
this.greeting = this.greeting === 'Hello World!' ?
'What is up!' :
'Hello World!';
}
}
});Bằng cách khai báo thêm thuộc tính methods, mình đã khai báo được hàm changeGreeting(). Việc còn lại bây giờ là mình sẽ chỉ định cái hàm này sẽ được thực thi bởi ai qua từ khóa v-on, chúng ta sẽ bind thuộc tính này cho button ta đã có ở template:
HTML:
<html>
<body>
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<div id="app">
<h2>{{ greeting }}</h2>
<p>by {{ user }} from {{ country }}</p>
<button v-on:click="changeGreeting">Change Greeting</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Bây giờ ta sẽ xem kết quả:
Hôm nay đến đây thôi, hẹn các bạn ngày mai nhé!
