[Series-Vue-04] – Data Binding trong Vue JS

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'
        }
    }
})