php vuejs

Php-vuejs

Integração Vuejs para estruturas PHP PHP-VueJS adiciona VueJS a qualquer projeto PHP , pode ser nativo ou até projetos PHP Framework

? Comece

A maneira recomendada de usar esta biblioteca está usando Composer , execute este comando do diretório, onde está localizado composer.json

 composer require phpmv/php-vuejs

Guia

Criação do gerente de vue

Ele gerencia todo o script injetado, você deve instanciar

 $ vueManager = VueManager:: getInstance ();

Métodos Vuemanager

• addglobaldirive
• addglobalfilter
• addglobalextend
• addglobalmixin
• addglobalobservable
• addglobalComponent
• ImportComponentOnBject
• Setaxios
• addvue

Criação do objeto Vue

 $ vue = new VueJs ();

Argumentos de Vuejs

1. (matriz associativa) Configuração = ["el" => "#app"] [Optionnal]
2. (String) Nome da variável = "App" [Optionnal]
3. (booleano) Ativar Vuetify = false [Optionnal]

Métodos Vuejs

• addData
• AddDataRaw
• addMethod
• addcomputed
• addWatcher
• addDirective
• addfilter
• addComponent
• addmixin
• addhook

Criação de objeto componente

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

Argumento de VuejScomponent

1. (string) Nome
2. (String) Nome da variável = null [Optionnal]

O nome do componente deve respeitar o princípio do caso de kebab, se você não fornecer um nome de variável, seria o nome convertido em pascalcase

Métodos VuejSComponent

• addProps
• SetInHeritatTrs
• setModel
• addData
• estende -se
• AddDataRaw
• addMethod
• addcomputed
• addWatcher
• addDirective
• addfilter
• addComponent
• addmixin
• AddTemplate
• generatefile
• addhook

Dados do objeto

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

ADDDATA, argumentos addDataRaw

1. (string) Nome
2. (string) valor

Essas duas linhas de código geram exatamente os mesmos dados de vue

data: { "name" : true }

Métodos de objeto

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

argumentos addmethod

1. (string) Nome
2. (string) o corpo da função
3. (Array) Argumento (s) da função [S) [Optionnal]

Isso irá gerar o conteúdo abaixo

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

Objeto calculado

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

argumentos addcomputed

1. (string) Nome
2. (string) Obtenha o corpo da função
3. (String) Definir o corpo da função por padrão O argumento da função é V [Optionnal]

Isso irá gerar o conteúdo abaixo

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

Aqui está um exemplo com getter e setter

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

Este código gera este conteúdo

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 de addwatcher

1. (string) dados para assistir
2. (string) Corpo de função
3. (Array) Argumento (s) da função [S) [Optionnal]

Isso gera o conteúdo abaixo

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

Ganchos de objeto

Estes são todos os métodos disponíveis para executar uma função em um determinado ciclo de vida

• OnBeforeCreate
• OnCreated
• OnBeforemount
• ONMOUNDED
• onBeforeUpdate
• onUpdated
• On BeforeDestroy
• OnDestroyed
• Onativado
• ondativou

Todos os ganchos funcionam da mesma maneira, o exemplo abaixo pode ser aplicado para cada ganchos

Argumentos de ganchos

1. (string) o corpo da função

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

Isso gera o conteúdo abaixo

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

Diretivas

Argumentos adicionais e adicionais

1. (String) Nome da diretiva
2. (Matriz Associativa) [Hook => Função de Hook]

Diretivas de objetos

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

Isso gera o conteúdo abaixo

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

Diretivas Globais

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

Isso gera o conteúdo abaixo

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

Filtros

AddFilter, argumentos addglobalfilter

1. (string) Nome
2. (string) Corpo de função
3. (Array) Argumentos da função [Optionnal]

Filtros de objetos

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

Isso gera o conteúdo abaixo

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

Filtros globais

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

Isso gera o conteúdo abaixo

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

Componentes

AddComponent, AddGlobalComponent, ImportComponentOnBject Argumentos

1. (VueJSComponent) Objeto do componente

Componentes de vue

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

Isso gera o conteúdo abaixo

components: { "component-one" : ComponentOne } 

Componentes locais

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

Isso gera o conteúdo abaixo

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

Componentes globais

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

Isso gera o conteúdo abaixo

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

Mixins

addmixin, argumento addglobalmixin

1. (VuejSComponent) Mixin Object

Mixins de objetos

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

Isso gera o conteúdo abaixo

mixins: [ MixinOne ] 

Mixins globais

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

Isso gera o conteúdo abaixo

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

Estende -se

addglobalextend, estende o argumento

1. (VuejSComponent) Estenda o objeto

O componente se estende

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

Isso gera o conteúdo abaixo

extends: "Component" 

Global se estende

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

Isso gera o conteúdo abaixo

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

Observáveis ​​globais

ADDGLOBALOBSERVABLE Argumentos

1. (String) Nome da variável
2. (Array) objeto

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

Isso gera o conteúdo abaixo

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

Configuração

Configuração do Vuemanager

Axios

Para ativar axios

 $ vueManager -> setAxios ( true );

Configuração dos componentes

Defina atributos herdados

Para ativar o setIritattrs

 $ component -> setInheritAttrs ( true );

Set Model

Argumentos do SetModel

1. (string) adereços
2. (string) eventos

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

Adicionando objeto Vue

Adicionar argumento

1. (Vuejs) objeto vue

 $ vueManager -> addVue ( $ vue );