php vuejs

Php-vuejs

La integración de Vuejs para PHP Frameworks PHP-VueJS agrega VueJS a cualquier proyecto PHP , podría ser nativo o incluso proyectos PHP Framework

? Empezar

La forma recomendada de usar esta biblioteca es usar Composer , ejecute este comando desde el directorio donde se encuentra composer.json

 composer require phpmv/php-vuejs

Guía

Creación del gerente de Vue

Administra todo el script inyectado, debes instanciarlo

 $ vueManager = VueManager:: getInstance ();

Métodos Vuemanager

• AddGlobalDirective
• AddGlobalFilter
• addGlobalExtend
• addGlobalMixin
• addGlobalobservable
• addGlobalComponent
• importComponentObject
• setAxios
• addvue

Creación de objeto Vue

 $ vue = new VueJs ();

Argumentos de Vuejs

1. (Array Associative) Configuración = ["El" => "#App"] [OpcionNal]
2. (String) Variable Name = "App" [OptionNal]
3. (boolean) habilitar vuetify = false [opcionnal]

Métodos Vuejs

• data
• Adddataraw
• addmethod
• addComputed
• addwatcher
• adirectivo
• addfilter
• AddComponent
• addmixin
• admirador

Creación de objeto componente

 $ component = new VueJSComponent ( ' component-one ' );

Argumento de vuejscomponent

1. (cadena) nombre
2. (String) Nombre de la variable = NULL [OpcionNal]

El nombre del componente debe respetar el principio de Kebab-Case, si no proporciona un nombre de variable, se convertiría en Pascalcase

VuejsComponent Methods

• addprops
• setinheritattrs
• setmodelo
• data
• extender
• Adddataraw
• addmethod
• addComputed
• addwatcher
• adirectivo
• addfilter
• AddComponent
• addmixin
• AddTemplate
• archivo de generación
• admirador

Datos de objetos

 $ object -> addData ( ' name ' , true );
$ object -> addDataRaw ( ' name ' , ' true ' );

AddData, Adddataraw Arguments

1. (cadena) nombre
2. (cadena) Valor

Estas dos líneas de código generan exactamente los mismos datos de Vue

data: { "name" : true }

Métodos de objetos

 $ object -> addMethod ( ' greet ' , ' window.alert(`Hello ${name}`); ' ,[ ' name ' ]);

argumentos addmethod

1. (cadena) nombre
2. (cadena) Cuerpo de la función
3. (Array) Argumento (s) de la función [OppectionNal]

Esto generará el contenido a continuación

methods: {
	"greet" :
		function ( name ) {
			window . alert ( `Hello ${ name } ` ) ;
		}
}

El objeto calcula

 $ object -> addComputed ( ' reversedMessage ' , " return this.message.split('').reverse().join(''); " );

AddComputed Arguments

1. (cadena) nombre
2. (cadena) Obtener el cuerpo de la función
3. (String) Establecer el cuerpo de la función Por defecto, el argumento de la función es v [OppectionNal]

Esto generará el contenido a continuación

computeds: {
	reversedMessage :
		function ( ) {
			return this . message . split ( '' ) . reverse ( ) . join ( '' ) ;
		}
}

Aquí hay un ejemplo con Getter y Setter

 $ object -> addComputed (
	' fullName ' ,
	" return this.firstName+' '+this.lastName " ,
	" this.firstName=v[0];this.lastName=v[1] " );

Este código genera este contenido

computeds: {
	fullName : {
		get : function ( ) {
			return this . firstName + ' ' + this . lastName
		} ,
		set : function ( v ) {
			this . firstName = v [ 0 ] ;
			this . lastName = v [ 1 ]
		}
	}
}

Observadores de objetos

 $ object -> addWatcher (
	" title " ,
	" console.log('Title change from '+ oldTitle +' to '+ newTitle) " ,
	[ ' newTitle ' , ' oldTitle ' ]);

argumentos addwatcher

1. (cadena) datos para mirar
2. (cadena) cuerpo de función
3. (Array) Argumento de la función [s) [OppectionNal]

Esto genera el contenido a continuación

watch: {
	"title" :
		function ( newTitle , oldTitle ) {
			console . log ( 'Title change from ' + oldTitle + ' to ' + newTitle )
		}
}

Ganchos de objetos

Estos son todos los métodos disponibles para ejecutar una función en un ciclo de vida dado.

• enborecreate
• abatido
• OnbeforEd
• montado
• OnbeforeUpdate
• inapropiado
• onbeforedestroy
• estestado
• onactivado
• inteactivado

Todos los ganchos funcionan de la misma manera, el ejemplo debajo se puede aplicar para cada ganchos

argumentos de ganchos

1. (cadena) Cuerpo de la función

 $ object -> onCreated ( " console.log('Page has been created !'); " );

Esto genera el contenido a continuación

created:
	function ( ) {
		console . log ( 'Page has been created !' ) ;
	}

Directivas

AddIrective, AddGlobalDirective Arguments

1. (String) Nombre de la Directiva
2. (matriz asociativa) [Hook => Función de gancho]

Directivas de objetos

 $ object -> addDirective ( ' focus ' ,[ ' inserted ' => " el.focus() " ]);

Esto genera el contenido a continuación

directives: {
	focus : {
		inserted :
			function ( el , binding , vnode , oldVnode ) {
				el . focus ( )
			}
	}
} 

Directivas globales

 $ vueManager -> addGlobalDirective ( ' focus ' ,[ ' inserted ' => " el.focus() " ]);

Esto genera el contenido a continuación

 Vue . directive ( 'focus' , {
	inserted :
		function ( el , binding , vnode , oldVnode ) {
			el . focus ( )
		}
	} ) ;

Filtros

AddFilter, AddGlobalFilter Arguments

1. (cadena) nombre
2. (cadena) cuerpo de función
3. (matriz) Argumentos de función [OppectionNal]

Filtros de objeto

 $ object -> addFilter (
	' capitalize ' ,   
	" if(!value){ "
		. " return ''; "
	. " } "
	. " value = value.toString(); "  
	. " return value.charAt(0).toUpperCase() + value.slice(1); " ,  
	[ " value " ]);

Esto genera el contenido a continuación

filters: {
	capitalize : function ( value ) {
		if ( ! value ) { return '' ; }
		value = value . toString ( ) ;
		return value . charAt ( 0 ) . toUpperCase ( ) + value . slice ( 1 ) ;
	}
} 

Filtros globales

 $ vueManager -> addGlobalFilter (
	' capitalize ' ,   
	" if(!value){ "
		. " return ''; "
	. " } "
	. " value = value.toString(); "  
	. " return value.charAt(0).toUpperCase() + value.slice(1); " ,  
	[ " value " ]);

Esto genera el contenido a continuación

 Vue . filter ( 'capitalize' ,
	function ( value ) {
		if ( ! value ) { return '' ; }
		value = value . toString ( ) ;
		return value . charAt ( 0 ) . toUpperCase ( ) + value . slice ( 1 ) ;
	} ) ;

Componentes

AddComponent, AddGlobalComponent, ImportComponentObject argumentos

1. Objeto componente (vuejscomponent)

Componentes vue

 $ component = new VueJSComponent ( ' component-one ' );
$ component -> addData ( ' framework ' , ' ubiquity ' );
$ vue -> addComponent ( $ component );

Esto genera el contenido a continuación

components: { "component-one" : ComponentOne } 

Componentes locales

 $ component = new VueJSComponent ( ' component-one ' );
$ component -> addData ( ' framework ' , ' ubiquity ' );
$ vueManager -> importComponentObject ( $ component );

Esto genera el contenido a continuación

 const ComponentOne = {
	data :
		function ( ) {
			return { framework : "ubiquity" }
		}
	} ; 

Componentes globales

 $ component = new VueJSComponent ( ' component-one ' );
$ component -> addData ( ' framework ' , ' ubiquity ' );
$ vueManager -> addGlobalComponent ( $ component );

Esto genera el contenido a continuación

 Vue . component ( 'component-one' , {
	data :
		function ( ) {
			return { framework : "ubiquity" }
		}
	} ) ;

Mezcla

Addmixin, AddGlobalMixin Argumento

1. (VuejsComponent) MIXIN Object

Mezclas de objetos

 $ mixin = new VueJSComponent ( ' mixin-one ' );
$ mixin -> addData ( ' framework ' , ' ubiquity ' );
$ vue -> addMixin ( $ mixin );

Esto genera el contenido a continuación

mixins: [ MixinOne ] 

Mixins globales

 $ mixin = new VueJSComponent ( ' mixin-one ' );
$ mixin -> addData ( ' framework ' , ' ubiquity ' );
$ vueManager -> addGlobalMixin ( $ mixin );

Esto genera el contenido a continuación

 Vue . mixin ( {
	data : 
		function ( ) {
			return { framework : "ubiquity" }
		}
	} ) ;

Extender

addGlObalExtend, extiende el argumento

1. (VuejsComponent) Extender objeto

El componente se extiende

 $ component = new VueJSComponent ( ' component ' );
$ componentOne = new VueJSComponent ( ' component-one ' );  
$ componentOne -> addData ( ' framework ' , ' ubiquity ' );
$ componentOne -> extends ( $ component );
$ vueManager -> addGlobalComponent ( $ componentOne );

Esto genera el contenido a continuación

extends: "Component" 

Global se extiende

 $ extend = new VueJSComponent ( ' extend-one ' );
$ extend -> addData ( ' framework ' , ' ubiquity ' );
$ vueManager -> addGlobalMixin ( $ extend );

Esto genera el contenido a continuación

 Vue . extend ( {
	data :
		function ( ) {
			return { framework : "ubiquity" }
		}
	} ) ;

Observables globales

argumentos addglobalobservables

1. (cadena) Nombre de la variable
2. (matriz) Objeto

 $ vueManager -> addGlobalObservable ( " state " , [ " count " => 0 ]);

Esto genera el contenido a continuación

 const state = Vue . observable ( { count : 0 } ) ; 

Configuración

Configuración de Vuemanager

Axios

Para habilitar axios

 $ vueManager -> setAxios ( true );

Configuración de componentes

Establecer atributos de heredar

Para habilitar setinheritattrs

 $ component -> setInheritAttrs ( true );

Modelo establecido

argumentos setmodel

1. (cadena) accesorios
2. (cadena) Eventos

 $ component -> setModel ( ' checked ' , ' change ' );

Agregar objeto Vue

argumento addVue

1. (Vuejs) objeto vue

 $ vueManager -> addVue ( $ vue );