Capitulo 4 del Módulo 3 SinglePage VueJS

➜ CRUD LIST | Mostrar registros con Vue.js

VueJS y PHP: Construyendo un CRUD List para Mostrar Usuarios | La extracción de registros se realiza mediante peticiones ajax para ello usaremos axios, que integrado a Vue.js ofrece más velocidad y código más legible.


¡Sumérgete en el desarrollo web con este tutorial práctico donde aprenderás a construir un CRUD List para mostrar la lista de usuarios! Utilizaremos VueJS para la interfaz dinámica y PHP junto con MySQL para gestionar la información del usuario. Desde la configuración inicial hasta la visualización de datos en tiempo real, este tutorial te proporcionará las habilidades esenciales para crear aplicaciones web interactivas.

Html

<div class="page">
            <H1 class="text-center">VUE JS | API REST EN PHP MYSQL</H1>
            <button @click="modalCreate=true">Create</button>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>EMAIL</th>
                    <th>IMAGE</th>
                    <th>ACCIÓN</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>
                        <img :src="'img/'+user.image" width="100">
                    </td>
                    <td>
                        <button @click="modalUpdate=true; selectUser(user)">Edit</button>
                        <button @click="modalDel=true; selectUser(user)">Del</button>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>

Vue JS

const app= Vue.createApp({
    data() {
        return{
            message : "Hola Vue !!!!",
            users:[]
        }
    },
    mounted(){
        this.getUsers()
    },
    methods:{
        getUsers(){
            axios.get(api+"?opc=list")
            .then(function(response){                
                app.users = response.data.users
            })
        },}).mount("#app")

 


4950 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

¡Qué aprenderás?

tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú