homefinance blog
En mi último artículo para Torque, ofrecí una introducción al uso del marco JavaScript Vuejs con la API REST WordPress. En esa publicación, ha aprendido a combinar REST WordPress con Vuejs y Jquey Ajax para mostrar y editar publicaciones individuales. También fue una introducción al Vue Builder y la sintaxis de la plantilla. Esta semana, quiero ingresar componentes y algunos atributos de datos adicionales. Los componentes permiten una mayor reutilización del código en toda la aplicación. Como ejemplo práctico, este artículo mostrará cómo crear una lista de publicaciones y un solo componente de publicación.
Debido a que este es Vuejs, el código será relativamente simple, pero aprovecha todos los poderes de un marco reactivo. Nociones básicas para este artículo, creé un tema muy simple de WordPress, que publiqué en GitHub. Por supuesto, puede construir su propio tema desde cero, pero si lo desea, puede usar la plantilla que creé. Comencé tomando Header.php, Footer.php e index.php de veinte quince y eliminé la mayoría del PHP, incluido el bucle. Lo único importante que hice fue poner a Vuejs y Jquey en mis colas. Haga esto antes de crear un tema libre de bucle usando su marco favorito o descargue mi tema.
También utilicé esta función, a través de wp_localise_criztt para agregar al DOM una variable llamada configuración con la URL API y el resto Nonce. El primer componente que crea los componentes VueJS es muy similar a la creación de una cancha VUE. Crearemos un componente “post-lista” para usar en nuestra cancha. Debido a que este componente está separado de la corte VUE, podemos reutilizarlo. Los componentes VUE se crean usando vue.component (). El resultado de crear un componente es que tenemos un elemento HTML que se ejecutará como una mini aplicación. Aquí está la marca HTML que usaremos:
Esto es. Tendremos que proporcionar una plantilla y escribir el componente y la corte de Vue principales, pero esto es todo el HTML para la aplicación que necesitamos. Lo último que necesitamos crear es una plantilla, pero la sintaxis será la misma que usé en el último artículo. Para esta plantilla, utilicé un script “Text/HTML”, de modo que el navegador no lo recupere hasta que sea necesario. En el interior utilicé el atributo V-for para pasar por las publicaciones. Esta sintaxis es como un PHP para cada bucle, pero viceversa. Usamos para “publicaciones en publicaciones” en Vuejs y dentro del bucle, la publicación es la publicación actual que se muestra. Aquí está la plantilla:
(función ($) {
lima config = {
API: {
Publicaciones: ” REST_BASE. ‘/’)); ?> “},
Nonce: “”
};
var vue;
$ .When ($ .get (config.api.posts + ‘1’)) .shen (function (d) {
lima post = vue.component (‘post’, {
plantilla: “#post-tamp”,
Datos: function () {
Devolver {
Publicación: D.
}
}
});
vue = new Vue ({
Él: ‘#App’,
Datos: {}
});
});
}) (JQuery);
<!-.
Es muy similar a la última vez, pero sin bucle y es un componente separado. Mejorar los componentes para la reutilización hasta ahora, en aras de la simplicidad, han creado estos componentes en un componente de jQuery.get (). Obtenemos las publicaciones o publicaciones y luego las usamos para hacer el componente. Esto funciona, pero hace que nuestros componentes estén estrechamente relacionados con la solicitud HTTP y difícil de reutilizar. Entonces, quiero hablar sobre el ciclo de vida temprano de un componente y cómo podemos mover esa llamada Ajax dentro del componente. Esto hará que los componentes se carguen perezosamente y les permitirá ser reutilizados en un enrutador, que es la siguiente parte de esta serie. Cuando se carga un componente, si tiene un método llamado, se llamará a ese método. Este es el método que podemos usar para llamar a una función desde la propiedad de los métodos de componentes o en otro lugar para obtener los datos de la API REST WordPress. Aquí está nuestro nuevo componente posterior a la lista: vue.component (‘post-list’, {
plantilla: “#post-list”,
Datos: function () {
Devolver {
Lista: Verdadero,
Mostrar: 0, publicaciones: []
}
},
Montado: function () {
this.getPosts ();
},
métodos: {
GetPosts: function () {
Var self = this;
$ .Get (config.api.posts, function (r) {
self. $ set (self, ‘publicaciones’, r);
});
},
Leer: function (id) {
this.list = false;
this.show = id;
},
Close: function () {
this.list = true;
this.show = 0;
}
}
}); Observe cómo todavía tenemos valor en las publicaciones para publicaciones, pero está vacío. Si no hiciéramos esto, no se consideraría una propiedad reactiva del componente y no podríamos actualizarlo más tarde. Otra cosa importante a tener en cuenta es que usé esto. $ Set () para actualizar su valor en la devolución de llamada exitosa .get (). ¿Donde ahora? Así es como podemos crear componentes reutilizables en el uso de VueJS. Ahora tenemos una lista y una sola vista. Debido a que no están estrechamente relacionados con ninguna consulta de API, podríamos usarlos con diferentes tipos de publicaciones o podríamos proporcionar datos sin AJAX, al menos para cargar una sola página. Estamos muy cerca de todo lo que necesitamos para un tema web inicial de WordPress inicial. La próxima semana nos sumergiremos en el enrutador Vuejs, para que podamos cambiar los estados entre rutas sin nuevas páginas y las cosas comenzarán a ser más interesantes. Inicie sesión la próxima semana, donde conectaremos ambos componentes a un enrutador para crear una aplicación más completa. Para obtener más información sobre JavaScript Frames API REST, ver Caldera Learn.
