Có thể nhận thấy rằng bất kỳ framework nhằm hỗ trợ tối đa người dùng cũng đưa ra một thư viện xử lý template riêng và Vue cũng không nằm ngoài dự đoán, Vuejs cũng có những cú pháp giúp việc cho việc render dữ liệu trở nên đơn giản và trơn tru hơn.
Vue.js sử dụng các cú pháp mẫu trong HTML để bind và render DOM (ràng buộc và trích xuất DOM) thành các tag HTML. Đương nhiên tất cả các vue.js template này đều phải tuân thủ theo các tag HTML chuẩn. Thực tế việc xử lý template chủ yếu dựa vào directive (là các thuộc tính của thẻ HTML) với tiền tố đặc biệt riêng của từng framework ở đây Vue thì tiền tố sẽ là v-. Ngoài ra nó còn sử dụng những cú pháp đơn giản khác để giúp việc lấy dữ liệu từ các biến để đưa vào DOM.
Trong bài cú pháp mẫu trong Vue.js này chúng ta sẽ không trình bày nhiều về các khái niệm mà chủ yếu là thực hành các Template Syntax (Cú pháp mẫu) trong Vue.js, lý do các thuật ngữ sử dụng ở đây tương đối khó việt hóa 100% được.
1. Interpolation trong Vuejs
-Intercalation trong Vue.js là một thuật ngữ, rất khó để dịch sát nghĩa chúng ta chỉ hiểu nôm na đây là quá trình thêm một văn bản, nội dung, attribute ,.. vào các thẻ HTML bằng Vue.js.
1.1 Text
Đây là dạng cơ bản nhất trong vue để bind data ở dạng text với cú pháp là hai cặp dấu ngoặc nhọn (mustache) nằm liền kề nhau {{key}} Vue template sẽ nhận diện bất kì cặp dấu ngoặc nhọn nào và lấy tên mà bạn đã đặt ở bên trong, sau đó so sánh với danh sách key mà bạn đã khai báo ở data để hiển thị dữ liệu.
Ví dụ minh họa
HTML viết
<div id="messageApp">{{domain}}<br/>{{author}}</div>
JS viết
var messageApp = new Vue({ el : "#messageApp", data : { domain : "hoc.tv", author : 'Dao Duy Nam' } });
Kết quả hiển thị:
Một lưu ý rất quan trọng đó là nếu bạn lạm dụng việc hiển thị dữ liệu text lên website sẽ rất là nguy hiểm nếu như nội dung được lấy từ người dùng, bởi vì hacker có thể sử dụng kỹ thuật tấn công dựa vào các lỗ hổng XSS, vì vậy hãy sử dụng cách này chỉ với những nội dung đáng tin cậy.
1.2 Raw HTML
-Trong Vue chúng ta cũng có thể hiển thị dữ liệu ra dưới dạng append cả HTML code (như hàm html trong jquery hoặc innerHTML trong javascript).
Sử dụng cú pháp sau:
<tag v-html="data"></tag>Trong đó:
- tag là các tag trong HTML.
- data là dữ liệu mà bạn muốn bind vào tag đó (dữ liệu này thường được khai báo trong data scope của vue.js).
VD: Bind data vào tag h5 đồng thời append các thẻ HTML vào tag h5.
HTML viết:
<div id="app"> <h5 class="text-magenta" style="text-align: center" v-html="slogan"></h5> </div>
VUEJS
var app = new Vue({ el: '#app', data: { slogan: 'Chào mừng bạn đã đến với website: hoc.tv' }, });
Chạy Code kết quả như sau:
Tuy nhiên bạn phải hết sức cẩn thận khi thực hiện cách này, vì nó có thể dẫn đến lỗi XSS
1.3 Attributes (thuộc tính)
Cặp dấu ngoặc không thể được sử dụng bên trong thẻ HTML mà thay vào đó để có thể thêm các attribute vào tag HTML bằng dữ liệu trong vue.js thì bạn sử dụng cú pháp của v-bind directive.
<tag v-bind:attributeName="data"></tag>Trong đó:
- attributeName là tên của attribute mà bạn muốn thực hiện binding.
- data là data mà bạn đã thiết lập trong vue.js.
Ví dụ minh họa
Bind CSS style, slogan, className vào trong tag h5.
HTML
<div id="app">
<h5 v-bind:class="className" v-bind:style="styleData" v-html="slogan"></h5>
</div>VUEJS
var app = new Vue({
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: <font color="green">hoc.tv</font>',
className: 'text-magenta',
styleData: 'text-align: center',
},
});CSS
.text-magenta{
color: magenta;
}Kết quả như sau:
1.4 Using JavaScript Expressions
-Như đã đề cập ở trên chúng ta hoàn toàn có thể sử dụng code javascript trong cặp dấu {{}}, nhưng các bạn cần chú ý là chúng ta chỉ có thể sử dụng các scope đã được khai báo mặc định trong JavaScript thôi còn các biến hay object,.. mà người dùng tự định nghĩa thì sẽ không thể sử dụng được.
VD: Sử dụng các toán tử và câu lệnh điều kiện trong cặp dấu {{}}
HTML
<div id="app"> <p>Tuổi tiếp theo:{{age + 1}}</p> <p>Tuổi có là số chẵn:{{age % 2 == 0 ? 'Chẵn' : 'Lẻ'}}</p> </div>
VUEJS
var app = new Vue({ el: '#app', data: { age : 24 }, });
Chạy Code
Lưu ý: Vì là template nên nó chỉ xử lý được những lệnh đơn có trả về một kết quả. Như những ví dụ dưới đây là sai vì nó không phải là lệnh đơn có trả về kết quả mà là một tập lệnh.
{{if (ok) { return message }}}
2. Directives.
- Directives trong vue.js chính là các attribute được thiết lập bằng các tiền tố v-. Giá trị của các attribute này thường là các biểu thức javascript duy nhất, chỉ trừ v-for ( khái niệm này sẽ giải thích ở các bài sau).
Ví dụ dưới đây thêm lớp text-magenta và style cho thẻ H5
<div id="app"> <h5 v-if="publish" v-bind:class="className" v-bind:style="textCenter">Chào mừng các bạn đã đến với website: hoc.tv</h5> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { className : "text-magenta", textCenter: "text-align: center", publish: true, }, }); </script>
2.1 Arguments
Một số các directives sẽ cho phép chúng ta truyền tham số vào. Để truyền tham số vào các directive này thì bạn chỉ cần ngăn giữa directives và tham số bằng dấu : (hai chấm)
VD1: Như v-bind attribute ở phần 1.
<div id="app"> <img v-bind:> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { logoUrl : "https://media.hoc.tv/static/logo-w.png?t=5f284b3b2127c" }, }); </script>
Nạn cũng có thể thêm các event trên DOM bằng directives v-on trong Vue.js.
VD2: Thêm sự kiện click vào button.
<div id="app"> <p>Click vào button để xem kết quả</p> <button v-on:click="showAlert">Click</button> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { showAlert : function () { alert('bạn vừa click vào button'); } } }); </script>
2.2 Modifiers
- Modifier là một hậu tố đặc biệt được được thêm vào bằng dấu chấm, mục đích của modifier là xác định cho directive hoạt động theo một cách đặc biệt nào đó. Ví dụ modifier .prevent chỉ thị cho v-on gọi even.preventDefault() khi sự kiện được kích hoạt.
VD1: Ví dụ dưới đây sẽ thêm sự kiên submit cho form và kèm theo đó là preventDefault.
<div id="app"> <form action="https://hoc.tv" v-on:submit.prevent="submitForm"> <input type="text" name="name" placeholder="Nhập vào tên"> <input type="submit" value="Gửi"> </form> </div>
Vuejs
var app = new Vue({ el: '#app', methods: { submitForm: function () { alert('Bạn vừa submit form'); } } });
Ở trong ví dụ trên, chúng mình đã thêm sự kiện onsubmit cho form và đồng thời xác định modifier prevent cho form đó. Modifier này sau khi được render thì nó sẽ thành event.preventDefault()
2.3 Filters
Filter hoạt động như là một bộ lọc dữ liệu, chính vì vậy ta chỉ có thể sử dụng nó ở hai nơi đó là nằm bên trong cặp dấu ngoặc nhọn {{}} và bên trong v-bind directive. Bộ lọc sẽ được thêm đằng sau của biểu thức javascript và được ngăn cách bằng dấu gạch đứng |.
Cú pháp
<!-- trong cặp ngoặc nhọn -->{{ message | capitalize }}<!-- trong v-bind --> <div v-bind:id="rawId | formatId"></div>
Lưu ý: Filter chỉ hỗ trợ từ phiên bản 2.1.0 trở về sau.
Xét ví dụ đơn giản sau chuyển từ số thành chữ khi hiển thị dữ liệu.
<div id="messageApp">
{{ message | numberToWord}}
</div>
<script language="javascript">
var messageApp = new Vue({
el : "#messageApp",
data : {
message : "0979306603"
},
filters : {
numberToWord : function(val){
var result = '';
for (var i = 0; i < val.length; i++){
if (val[i] === '0'){
result += '-không-';
}
if (val[i] === '1'){
result += '-một-';
}
if (val[i] === '2'){
result += '-hai-';
}
if (val[i] === '3'){
result += '-ba-';
}
if (val[i] === '4'){
result += '-bốn-';
}
if (val[i] === '5'){
result += '-năm-';
}
if (val[i] === '6'){
result += '-sáu-';
}
if (val[i] === '7'){
result += '-bảy-';
}
if (val[i] === '8'){
result += '-tám-';
}
if (val[i] === '9'){
result += '-chín-';
}
}
return result;
}
}
});
</script>Chạy lên kết quả sẽ là: -không--chín--bảy--ba--một--hai--ba--bốn--năm--sáu-
Bạn có thể sử dụng nhiều filter cùng một lúc ngăn cách nhau bằng dấu gạch đứng
{{ message | filterA | filterB }}Hoặc nhận các tham số truyền vào vì bản chất nó là một hàm javascript bình thường, nhưng có một lưu ý là tham số đầu tiên luôn luôn là giá trị cần lọc nên các tham số truyền vào đó sẽ bắt đầu từ vị trí thứ hai.1
{{message | filterA('arg1', arg2) }}
3. Cú pháp rút gọn
Theo hướng dẫn của Vue thì nó hỗ trợ cú pháp rút gọn cho hai directive hay sử dụng nhất đó là v-bind và v-on.
3.1 Rút gọn v-bind
<!-- cú pháp đầy đủ --> <a v-bind:href="url"></a> <!-- cú pháp rút gọn --> <a :href="url"></a>
3.2 Rút gọn v-on
<!-- cú pháp đầy đủ --> <a v-on:click="doSomething"></a> <!-- cú pháp rút gọn--> <a @click="doSomething"></a>
Lời khuyên là không phải cái gì gọn cũng tốt sử dụng cú pháp rút gọn đôi khi đọc lại code chúng ta sẽ không biết mình muốn làm gì. Chính vì thế với Vue chúng ta nên sử dụng cú pháp đầy đủ để giúp chương trình rõ ràng hơn.
4. Tổng kết
Trên đây Học tv đã giới thiệu sơ lược cho các bạn nắm rõ một số cú pháp căn bản để xử lý template trong Vue, bài này được dịch trên trang chủ của Vuejs nên các bạn hoàn toàn yên tâm nhé. Chúc các bạn học tốt!
