VueJS 2: Tìm hiểu Methods - VueJS 2x căn bản
Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình hướng đối tượng phải không nào, nó là những hàm đặc biệt thể hiện cho những hành động của một đối tượng. Vậy trong VueJS cách trình bày methods như thế nào để đúng chuẩn thì trong bài này chúng ta cùng tìm hiểu ...
Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình hướng đối tượng phải không nào, nó là những hàm đặc biệt thể hiện cho những hành động của một đối tượng. Vậy trong VueJS cách trình bày methods như thế nào để đúng chuẩn thì trong bài này chúng ta cùng tìm hiểu nhé.
Methods trong VueJS
Việc phân chia từng phần trong VueJS giúp việc quản lý của nó trở nên đơn giản hơn, ví dụ với dữ liệu thì bạn sẽ lưu trữ trong key data.
var vm = new Vue({
el: '#example',
data: {
message: 'Chào mừng đến với Zaidap.com.net',
author : "thehalfheart@gmail.com"
}
});Nếu chúng ta muốn tạo một hàm để xử lý dữ liệu thì có thể tạo nó ngay trong data luôn.
<div id="example">
<p>"{{ showMessage() }}"</p>
</div>
<script language="javascript">
var vm = new Vue({
el: '#example',
data: {
message: 'Chào mừng đến với Zaidap.com.net',
showMessage : function(){
return "[" + this.message + "]";
}
}
});
</script>Cách làm này không thực sự hay lắm, vì vậy VueJS tạo ra một key methods để chúng ta tạo các hàm ở bên trong đó. Như ở ví dụ trên thì mình sẽ viết lại như sau.
<div id="example">
<p>"{{ showMessage() }}"</p>
</div>
<script language="javascript">
var vm = new Vue({
el: '#example',
data: {
message: 'Chào mừng đến với Zaidap.com.net'
},
methods : {
showMessage : function(){
return "[" + this.message + "]";
}
}
});
</script>Việc phân chia nơi lưu trữ data và methods giúp cho chương trình sáng hơn, quản lý code dễ hơn.
