
Contents
Mở đầu
Data binding hiểu đơn giản là nó sẽ render dữ liệu ra DOM. Hiển thị dữ liệu ở trong data ra ngoài màn hình. Trong các bài trước mình cũng đã demo một số ví dụ. Và trong đó đã bao gồm data binding rồi.
Tổng quan
Trong bài này mình sẽ đưa ra ví dụ khác cho các bạn dễ hình dung, trong file app.js
ta sẽ khai báo một data có title, website
như code bên dưới
var app = new Vue({ el: "#app", data() { return { title : 'các bạn đang học vue js', website : 'https://aduka.asia' } } })
Bên file index.html
sẽ thử show ra như thế này xem sao, xem nó sẽ hiển thị như nào nhé.
<div id="app"> <h1>Link : <a href="{{website}}" title="{{title}}">Đây là Link</a></h1> </div> <script src="app.js"></script>
Kết quả không như mong đợi, nó không hiện ra cái href
và cái title
chúng ta cần.
Bây giờ hãy thêm v-bind
và sửa lại code như sau v-bind:href
và v-bind:title
<div id="app"> <h1>Link : <a v-bind:href="website" :title="title">Đây là Link</a></h1> </div> <script src="app.js"></script>
F5 lại và cùng xem kết quả nhé. Dữ liệu từ bên data đã được hiện thị ra như mong muốn.
Như vậy các bạn có thể thấy rằng là, để show ra giá trị ở bên trong attribute, thì ta phải dùng đến v-bind
, cú pháp của Vue sẽ giúp render ra DOM dữ liệu của data, các bạn cũng có thể dùng với v-bind:src
, v-bind:value
, v-bind:alt
..v.v.v..
Ở phần trên các bạn có thể để ý, mình chỉ ghi là :title
kết quả nó cũng hiển thị ra được, đó chính là cú pháp viết tắt, thay vì phải viết v-bind: thì các bạn chỉ cần “:” dấu 2 chấm là được.
Tổng kết
Data binding sẽ gặp rất nhiều và hầu như là làm việc với nó. Đó là cách để ta hiển thị được dữ liệu ra DOM.
var app = new Vue({ el: "#app", data() { return { title : 'các bạn đang học vue js', website : 'https://aduka.asia' } } })