php vuejs

Php-vuejs

L'intégration VueJS pour les cadres PHP PHP-VueJS ajoute VueJS à tous les projets PHP , il pourrait être natif, ou même des projets PHP Framework

? Commencer

La façon recommandée d'utiliser cette bibliothèque utilise Composer , exécutez cette commande à partir du répertoire où est situé composer.json

 composer require phpmv/php-vuejs

Guide

Création de Vue Manager

Il gère l'insemble du script injecté, vous devez l'instancier

 $ vueManager = VueManager:: getInstance ();

Méthodes Vuemanager

• addglobaldirective
• addglobalfilter
• addglobalextend
• addglobalxin
• addGlobalObserable
• addglobalComponent
• ImportComponentObject
• setaxios
• addvue

Création de l'objet Vue

 $ vue = new VueJs ();

Arguments Vuejs

1. (Associative Array) Configuration = ["el" => "#App"] [optionNal]
2. (String) Nom de la variable = "App" [optionnal]
3. (boolean) activer Vuetify = false [optionnal]

Méthodes Vuejs

• adddata
• addDataraw
• addMethod
• addcomputé
• addwatcher
• additionnel
• addfilter
• addComponent
• addmixin
• additionner

Création d'un objet composant

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

Arguments VuejsComponent

1. (String) Nom
2. (String) Nom de variable = null [optionNal]

Le nom du composant doit respecter le principe du cas de kebab, si vous ne fournissez pas de nom de variable, il serait converti de nom en PascalCase

Méthodes VuejsComponent

• addprops
• setinheritattrs
• setmodel
• adddata
• prolongement
• addDataraw
• addMethod
• addcomputé
• addwatcher
• additionnel
• addfilter
• addComponent
• addmixin
• complat
• générer un fichier
• additionner

Données d'objet

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

Adddata, arguments adddataraw

1. (String) Nom
2. (String) Valeur

Ces deux lignes de code génèrent exactement les mêmes données VUE

data: { "name" : true }

Méthodes d'objet

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

AddMethod Arguments

1. (String) Nom
2. (String) Corps de la fonction
3. (Array) Argument (s) de la fonction [optionNal]

Cela générera le contenu ci-dessous

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

Objet calculé

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

Arguments compromis

1. (String) Nom
2. (String) Obtenez le corps de la fonction
3. (String) Définir le corps de la fonction par défaut l'argument de la fonction est v [optionnal]

Cela générera le contenu ci-dessous

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

Voici un exemple avec Getter et Setter

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

Ce code génère ce contenu

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

Observateurs d'objets

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

Arguments Addwatcher

1. (String) Données à surveiller
2. (String) Corps de fonction
3. (Array) Argument de fonction (s) [optionNal]

Cela génère le contenu ci-dessous

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

Crochets d'objet

Ce sont toutes les méthodes disponibles pour exécuter une fonction à un cycle de vie donné

• ingéré
• surnommé
• onBeForEmount
• retentit
• onbeforeupdate
• ondulé
• onbeforestroy
• aigu
• onactivé
• sur le point

Tous les crochets fonctionnent de la même manière, l'exemple en dessous peut être appliqué pour chaque crochet

Croche les arguments

1. (String) Corps de la fonction

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

Cela génère le contenu ci-dessous

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

Directives

Arguments supplémentaires, addglobaldirecteurs

1. (String) Nom de la directive
2. (tableau associatif) [Hook => Fonction de Hook]

Directives d'objets

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

Cela génère le contenu ci-dessous

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

Directives mondiales

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

Cela génère le contenu ci-dessous

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

Filtres

AddFilter, AddGlobalFilter Arguments

1. (String) Nom
2. (String) Corps de fonction
3. (Array) Arguments de fonction [optionnal]

Filtres d'objet

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

Cela génère le contenu ci-dessous

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

Filtres mondiaux

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

Cela génère le contenu ci-dessous

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

Composants

addComponent, addGlobalComponent, importcomponentObject arguments

1. (VueJsComponent) Objet composant

Composants Vue

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

Cela génère le contenu ci-dessous

components: { "component-one" : ComponentOne } 

Composants locaux

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

Cela génère le contenu ci-dessous

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

Composants mondiaux

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

Cela génère le contenu ci-dessous

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

Mixins

AddMixin, AddGlobalMixin Argument

1. (VueJsComponent) Mélange Objet

Mixins d'objets

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

Cela génère le contenu ci-dessous

mixins: [ MixinOne ] 

Mixins mondiaux

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

Cela génère le contenu ci-dessous

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

Prolongement

addglobalextend, étend l'argument

1. (VueJsComponent) Extension de l'objet

Composant s'étend

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

Cela génère le contenu ci-dessous

extends: "Component" 

Global s'étend

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

Cela génère le contenu ci-dessous

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

Observables mondiaux

AddGlobalObserable Arguments

1. (chaîne) Nom de la variable
2. (Array) Objet

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

Cela génère le contenu ci-dessous

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

Configuration

Configuration de Vuemanager

Axios

Pour activer Axios

 $ vueManager -> setAxios ( true );

Configuration des composants

Définir les attributs d'Hérit

Pour activer les setInheritAttrs

 $ component -> setInheritAttrs ( true );

Set modèle

Arguments SetModel

1. (String) accessoires
2. Événements (String)

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

Ajout d'objet Vue

argument addvue

1. (Vuejs) Objet Vue

 $ vueManager -> addVue ( $ vue );