Ngày 04 - Các thuộc tính chỉ thị trong Vuejs - Vue Directives
Hello các bạn, lại là mình đây, hôm nay sẽ là bài thứ 4, ở bài hôm trước
Ồ, bạn chưa phải thành viên của forum
Đăng nhập hoặc đăng ký ngay.
, chúng ta đã cùng nhau học được cách mà Vuejs thao tác trên dữ liệu, khởi tạo dữ liệu cũng như dữ liệu tự phản ứng của nó.Hôm nay ta sẽ tiếp tục học các khái niệm mới, mình dịch ra tiếng Việt cái này hơi củ chuối. Tiếng Anh thì nó gọi là Vue Directives, dịch ra tiếng Việt thì thành các chỉ thị của Vue. Nói chung các bạn chỉ cần hiểu cái Vue Directives là những thứ mà có thể chèn trực tiếp làm các thuộc tính của một thẻ HTML để thực hiện một công việc nào đó, ví dụ như v-on, cái mà ta đã dùng trong các bài trước đây.
Event handling với v-on
Ta cùng nhắc lại một chút về v-on:
Ở bài thứ 2
Ồ, bạn chưa phải thành viên của forum
Đăng nhập hoặc đăng ký ngay.
, v-on được sử dụng trong việc gọi một phương thức có tên là changeGreeting() khi button được nhấn:
JavaScript:
<button v-on:click="changeGreeting">Change Greeting</button>Thay vì ta gọi hàm như thường lệ thì ta hoàn toàn có thể viết Javascript inline vào trong cái thuộc tính v-on này:
HTML:
<button v-on:click="greeting = 'Hello các bạn!'">
Change Greeting
</button>Mặc dù như thế này thì code vẫn hoạt động tốt, những để dễ quản lý ở một instance thì chúng ta nên khai báo method riêng ở trong Vue Instance
Ví dụ:
HTML:
<h1 v-on:click="method">Click me!</h1>
<h1 v-on:dblclick="method">Double Click me!</h1>
<form v-on:submit="method">...</form>
<input v-on:keydown="method" placeholder="Press down on keys" />
<input v-on:keyup="method" placeholder="Release keys" />
<!-- ... -->Bây giờ chúng ta sẽ thử lướt qua một ví dụ phức tạp hơn một xíu, sử dụng các chỉ thị khác và hiển thị các kết quả khác hơn:
HTML
HTML:
<html>
<body>
<div id="app">
<h1>Chào mừng các bạn đến với khóa học Vuejs 30 ngày tại tuihocweb.com</h1>
<h2>{{ greeting }}</h2>
<p>{{alertMessage}}</p>
<button v-on:click="changeGreeting">Change Greeting</button>
<button v-on:dblclick="changeGreeting">
Double click to change greeting
</button>
<input
v-on:keyup="alertMessageGreeting"
placeholder="Type something"
/>
<input
v-on:keyup.enter="alertEnterGreeting"
placeholder="Type and release Enter"
/>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>JS
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'Hello World!',
alertMessage: ''
},
methods: {
changeGreeting() {
this.greeting = this.greeting === 'Hello World!' ?
'What is up!' :
'Hello World!';
},
alertMessageGreeting() {
this.alertMessage = 'You typed something!';
},
alertEnterGreeting() {
this.alertMessage = 'You typed and pressed Enter!';
},
}
});Result
Ở đây các bạn thấy mình đã sử dụng chỉ thị v-on với các sự kiện khác như
keyup.enter, dblclick, keyup, các sự kiện này là các sự kiện được Vuejs quy định sẵn như một bộ quy tắc ứng xử cho một element khi bạn gán vào nó. Các hành động thao tác lên nếu đúng với event mà các bạn đã cài đặt cho element thì tự động handle của event đó sẽ được gọi.Nếu bạn muốn lấy tất cả thông tin của event đó, Vuejs hỗ trợ việc này, bạn chỉ cần truyền vào một tham số ở handle của nó là được:
Ví dụ:
HTML:
<h1 v-on:click="method($event)">Click me!</h1>Binding các thuộc tính với chỉ thị v-bind
Trước hết chúng ta cùng nhắc lại Mustache Syntax, là cái quy tắc mà khi bạn muốn in giá trị một biến ra view bạn sẽ thêm hai dấu ngoặc nhọn mở ra
{{ và đóng lại }}, ở các ví dụ của bài 1 và bài 2, ta đã sử dụng quy tắc này để in các giá trị các biến greeting, user, và country ra view
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="addGreeting">Change Greeting</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Chúng ta không thể dùng Mustache Syntax để bind dữ liệu tới các attribute của HTML như
href, id, src được. Do đó, chúng ta có một loại chỉ thị mới, được hỗ trợ bởi Vuejs đó là v-bind.HTML
HTML:
<html>
<body>
<div id="app">
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<h2>{{ greeting }}</h2>
<p>by {{ user }} from {{ country }}</p>
<img v-bind:src="countryFlag" />
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>JS
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'biến này rỗng nhé',
user: 'Le Dung',
country: 'Viet Nam',
countryFlag: 'https://bom.to/ul8RuO'
}
});Result
Như vậy chúng ta đã có thể thay đổi thuộc tính src bằng giá trị countryFlag bằng cách sử dụng v-bind, thật là thú vị đúng không nào
Render có điều kiện với v-if hoặc v-show
Chúng ta có một ví dụ sau:
HTML:
<html>
<body>
<div id="app">
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<h2>{{ greeting }}</h2>
<p>by {{ user }} from {{ country }}</p>
<img v-bind:src="countryFlag" />
<button v-on:click="changeCountry">
Change Country
</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>JS
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'biến này rỗng nhé',
user: 'Le Dung',
country: 'Viet Nam',
countryFlag: 'https://bom.to/ul8RuO'
},
methods: {
changeCountry() {
if (this.country === 'Viet Nam') {
this.country = 'Lao';
this.countryFlag = 'https://bom.to/n5q6t1';
} else {
this.country = 'Viet Nam';
this.countryFlag = 'https://bom.to/ul8RuO';
}
}
}
});Result
Khi nhấn nút Change Country, ta được:
Bây giờ nếu chúng ta muốn thayđổi dòngchữ by LeDung from Lao bằng một dòng kiểu khác,ví dụ như Le Dung muốn tới Lao chẳng hạn. Thì sao? chúng ta sẽ thử qua một ví dụ với v-if
HTML:
<html>
<body>
<div id="app">
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<h2>{{ greeting }}</h2>
<p v-if="country === 'Viet Nam'">by {{ user }} from {{ country }}</p>
<p v-if="country === 'Lao'">by {{ user }} muốn tới nước {{ country }}</p>
<img v-bind:src="countryFlag" />
<button v-on:click="changeCountry">
Change Country
</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main1.js"></script>
</body>
</html>Ta sẽ thử lại và xem kết quả:
HTML:
<html>
<body>
<div id="app">
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<h2>{{ greeting }}</h2>
<p v-show="country === 'Viet Nam'">by {{ user }} from {{ country }}</p>
<p v-show="country === 'Lao'">by {{ user }} muốn tới nước {{ country }}</p>
<img v-bind:src="countryFlag" />
<button v-on:click="changeCountry">
Change Country
</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main1.js"></script>
</body>
</html>Kết quả sẽ hiển thị tương tự với v-if.
Cách viết tắt của v-on và v-bind
Đối với v-bind
HTML:
<!-- viết theo kiểu đầy đủ -->
<img v-bind:src="dataProperty" />
<!-- viết tắt -->
<img :src="dataProperty"Đối với v-on
HTML:
<!-- viết theo kiểu đầy đủ -->
<button v-on:click="methodName"></button>
<!-- viết tắt -->
<button @click="methodName"></button>
