Passa ai contenuti principali

Vue.js inline component


title: Componente Vue.js inline browser tags: vue.js, single file component vue.js

Come creare un componente con Vue.js?

Come crearlo e come usarlo direttamente nella pagine? Mi trovo in diversi progetti a bisticciare con jquery che ritengo un ottimo tool, ma non supremo. In ogni progetto possono esistere più tecnologie per risolveere problemi diversi. La SPA la preferisco con React o Angular, ma per creare dei componenti ad hoc o uso Polymer o Vue. Senza scomodare l’intero scaffolding di progetto è possibile creare un semplice componente ed usarlo nella pagina del browser senza fare il transpiling.

Come iniziare.

Preparo la base di folder. Come server uso quello integrato in php.

mkdir vuewjs
cd vuejs
php -S localhost:8080
touch index.html
google-chrome index.html

Io uso Ubuntu e quelli sopra sono semplici comandi shell che creano un folder vuejs e dentro creano un file html e avviano il server presente in php7; infine apro con chrome la pagina index.hml.

Pagina base

Ora prepariamo la pagina base html. Modifichiamo index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>

Caricamento della libreria

Per il caricamento di vue, si usa il link https://unpkg.com/vue Oltre a Vue.js usiamo anche la libreria http-vuew-loader Questo è il progetto che permette di caricare dinamicamente i componenti Vue e fare il transpiling live. Attenzione: questo metodo va bene per piccoli componenti, per piccoli progetti, non S.P.A. Aggiungiamo dopo il body il caricamento delle librerie:

....
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
....
<html>

Creazione del componente

Creiamo nel progetto un single file component: hello.vue.

<template>
    <div class="hello">Ciao {{who}}</div>
</template>
<script>
	module.exports = {
	    data: function() {
	            return {
	              who: 'world'
	             }
	         }
	   }
</script>
<style>
	.hello {
	    background-color: #ffe;
	}
</style>

Quindi ora abbiamo due file nella directory:

  • index.html
  • hello.vue.

Caricare il componente

Ora carichiamo il componente nella pagina html:

<div id="my-app">
    <my-component></my-component>
</div>
....
<script type="text/javascript">
    new Vue({
        el: '#my-app',
        components: {
            'my-component': httpVueLoader('hello.vue')
        }
    });
</script>
</html>

‘my-component’: httpVueLoader(‘hello.vue’) registra il componente my-component e gli abbina il componente presente in hello.vue tramite httpVueLoader

Infine

Ora aggiorniamo il browser: dobbiamo vedere il solito hello world.

Conclusione

La libreria http-vuew-loader permette di caricare live il compoente, piccolo, fatto con vue Il caricamento deve essere fatto da server.

Commenti

Post popolari in questo blog

install language on osTicket

this simple guide aims you to install and configure your language on osTicket i written this guide based on forum post http://osticket.com/forum/discussion/76252/installing-language-pack

Ubuntu: La propria installazione di python è danneggiata. Correggere il collegamento simbolico «/usr/bin/python».

Questa è un problema, soprattutto se si vuole aggiornare la distribuzione.+
Dì la verità: hai pacioccato con le versioni di python vero? Volevi usare la 3.5 e non 2.7 e così hai aggiunto alternatives o manipolato il symlink.
No? io si.
Così in fase di aggiornamento mi sono bloccato.
Allora per risolverlo ecco la soluzione: elimina tuttle le eventuali alternative : sudo update-alternatives –remove-all pythoncrea il symlink alla 2.7 sudo ln -s /usr/bin/python3.5 /usr/bin/pythonaggiorna i permessi: sudo chmod 7777 /usr/bin/python
Ora funziona tutto.
La soluzione l’ho scovata qui: https://askubuntu.com/questions/448926/do-release-upgrade-python-install-is-corrupted

Setup Google Tag Manager con PrestaShop per l'e-commerce avanzato

Google Tag Manage e E-commerce Avanzato all’interno della documentazione ufficiale è descritto sia il processo che il codice di implementazione per il monitoraggio avanzato dell’e-commerce
In breve il codice da inserire deve essere un array tipo dataLayer che contiene una serie di informazioni per il monitoraggio di:
impressioni di prodotto e di categoriadettaglio di prodottocheckoutacquisto Sono presenti anche i meccanismi per il monitoraggio delle promozioni, per l’annullamento ordine e per l’aggiunta dinamica del prodotto in carrello
Nel caso del modulo BwAnalytics sono monitorati i primi 4.
Google Tag Manager L’attivazione dell’ecommerce avanzato si effettua sulla vista di Google Analytics e si impostano i nomi degli step del processo di checout mappati all’interno del codice
Limpostazione di Google Tag Manager per l’e-commerce avanzato richiede la greazione di 3 tag:
impressioni e dattagli categoria e prodottocheckout acquisto pagine prestashop coinvolte Su prestashop le pagine di…