Vue.js là một framework frontend theo mô hình MVVM, cho phép phát triển ứng dụng web một cách linh hoạt và từng bước. Các tính năng cốt lõi bao gồm:

• Hiển thị dữ liệu khai báo (Declarative Rendering)
• Hệ thống thành phần (Components)
• Định tuyến phía client với Vue Router
• Quản lý trạng thái quy mô lớn qua Vuex
• Công cụ xây dựng như Webpack hoặc Vue CLI
• Giao tiếp server thông qua Axios

1. Hiển thị dữ liệu với cú pháp mustache

<div id="container">
    {{ greeting }} <!-- Hiển thị giá trị từ data -->

    <!-- Toán tử ba ngôi -->
    {{ isActive ? 'Bật' : 'Tắt' }}

    <!-- Phép toán số học -->
    {{ radius * Math.PI }}

    <!-- Lưu ý: Không hỗ trợ câu lệnh phức tạp -->
    <!-- {{ let x = 5; }} -->
</div>

<script>
new Vue({
    el: '#container',
    data: {
        greeting: 'Chào mừng đến với Vue!',
        radius: 10
    }
});
</script>

2. Ràng buộc hai chiều với v-model

<div id="formApp">
    <input type="text" v-model="formData.name" placeholder="Nhập tên">
    <input type="password" v-model="formData.secret" placeholder="Mật khẩu">
    <p>Dữ liệu hiện tại: {{ formData }}</p>
</div>

<script>
new Vue({
    el: '#formApp',
    data: {
        formData: {
            name: '',
            secret: ''
        }
    }
});
</script>

3. Điều kiện hiển thị: v-if và v-show

<div id="toggleDemo">
    <span v-if="isVisible">Hiện bằng v-if</span>
    <span v-show="isVisible">Hiện bằng v-show</span>
    <button @click="toggleVisibility">Chuyển đổi</button>
</div>

<script>
new Vue({
    el: '#toggleDemo',
    data: {
        isVisible: true
    },
    methods: {
        toggleVisibility() {
            this.isVisible = !this.isVisible;
        }
    }
});
</script>

4. Hiển thị văn bản và HTML: v-text và v-html

<div id="textDemo">
    <div v-text="rawContent"></div>
    <div v-html="htmlContent"></div>
</div>

<script>
new Vue({
    el: '#textDemo',
    data: {
        rawContent: "<strong>Không parse HTML</strong>",
        htmlContent: "<strong>Có parse HTML</strong>"
    }
});
</script>

5. Ràng buộc thuộc tính với v-bind

<div id="attrDemo">
    <span v-bind:title="tooltip">Di chuột xem tooltip</span>
    <span :style="{ color: textColor }">Màu chữ động</span>
</div>

<script>
new Vue({
    el: '#attrDemo',
    data: {
        tooltip: "Thông tin bổ sung",
        textColor: "blue"
    }
});
</script>

6. Xử lý sự kiện với v-on

<div id="eventDemo">
    <p>{{ counter }}</p>
    <button @click="increment">Tăng số</button>
    <button v-on:click="reset">Đặt lại</button>
</div>

<script>
new Vue({
    el: '#eventDemo',
    data: {
        counter: 0
    },
    methods: {
        increment() {
            this.counter++;
        },
        reset() {
            this.counter = 0;
        }
    }
});
</script>

7. Lặp danh sách với v-for

<div id="listDemo">
    <ul>
        <li v-for="(product, idx) in products" :key="idx">
            {{ idx + 1 }}. {{ product }}
        </li>
    </ul>
</div>

<script>
new Vue({
    el: '#listDemo',
    data: {
        products: ['iPhone', 'MacBook', 'iPad', 'Apple Watch']
    }
});
</script>