Práctica de un archivo por componente en Vue.js

Este aspecto proporcionado por el sitio web oficial requiere herramientas de compilación, pero nodejs no tiene la energía para aprender, por lo que solo puedo salvar la patria por un camino indirecto. El autor de VueJS tiene un artículo en otro sitio web que habla sobre cómo implementar componentes usando jQuery.getScript o RequireJS, pero no proporciona ejemplos, por lo que he explorado un método por mí mismo.

Utilizados}}Herramientas:

vue.js --- 0.12.+ (requiere 0.12soporte para componentes asíncronos en)
require.js
text.js --- Plugin de texto de RequireJS https://github.com/requirejs/text

Lista de archivos

index.html
index.js
comp.js (aquí se define el componente)
comp.html (plantilla del componente)

En realidad, el componente se ha dividido en js y html, html es el contenido de la plantilla, aquí parece que no coincide con "un archivo para un componente", pero si el contenido de la plantilla es bastante grande, esto es necesario y también es más conveniente para la mantenimiento. Aquí va el código.

comp.html -- Plantilla de componente

<h2{{título}}</h2>
<p>{{contenido}}</p>
comp.js -- Definición de componente
define(['text!comp.html'], function (temp) { // Definir un módulo en requirejs, dependiendo del texto de la plantilla
 retornar {
 props: ['título', 'contenido'],
 plantilla: temp
 }
});

Hasta aquí, se ha creado una plantilla simple. Luego es necesario registrar este componente en VueJS.

index.js

require.config({
 rutas: { // Especificar las rutas de text.js y vue.js, sin la extensión .js, consulte el documento de RequireJS
 texto: '../../../activos/requirejs/texto',
 vue: '../../../activos/vue/vue'
 }
});
require(['vue'], function (Vue) { // Depende de vue.js
 Vue.component('comp', function (resolver) { // Registrar un componente asíncrono
 require(['comp'], function (comp) { // Debido a que debemos cargar componentes a pedido, require(['comp']) debe estar dentro de la función
 resolver(comp)
 })
 });
 new Vue({
 el: 'body'
 });
 //new Vue({
 // el: 'cuerpo',
 // componentes: {
 // comp: function (resolver) {
 // require(['comp'], function (comp) {
 // resolver(comp)
 // })
 // }
 // }
 //});
});

index.html

!DOCTYPE html>
<html lang="es">
<cabecera>
 <meta charset="UTF-8">
 <título></título>
</cabecera>
<cuerpo>
<componente is="comp" título="[#1#]" contenido="fjkldsjfkldjsklgjks"></componente>}}
<script data-main="index" src="../../../activos/require.js"></script>
</body>
</html>

Ejecute el código, quite el comentario de <component> para ver la diferencia.

Si hay muchos componentes, el registro de componentes será muy tedioso, por lo que se puede resumir esta parte.

index.js mejorado

require.config({
 rutas: {
 texto: '../../../activos/requirejs/texto',
 vue: '../../../activos/vue/vue'
 }
});
function componente(name) {
 devolver función (resolver, rechazar) {
 require([name], function (comp) {
 resolver(comp)
 })
 }
}
require(['vue'], function (Vue) {
 Vue.component('comp', componente('comp'));
 Vue.component('comp',2', componente('comp',2});
 new Vue({
 el: 'body'
 });
});

Hasta aquí.

Este artículo ha sido organizado en el 'Tutorial de Componentes Frontend de Vue.js', bienvenidos a aprender y leer.

Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y también espero que todos los apoyen al tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido ha sido contribuido y subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará