php vuejs

PHP-Vuejs

يضيف تكامل Vuejs لأطر PHP PHP-VueJS VueJS إلى أي مشاريع PHP ، أو يمكن أن يكون مشاريع PHP Framework

؟ ابدأ

الطريقة الموصى بها لاستخدام هذه المكتبة تستخدم Composer ، قم بتشغيل هذا الأمر من الدليل حيث يوجد composer.json

 composer require phpmv/php-vuejs

مرشد

إنشاء مدير VUE

يدير البرنامج النصي بالكامل الذي تم حقنه ، يجب عليك إنشاء مثيل له

 $ vueManager = VueManager:: getInstance ();

أساليب Vuemanager

• addglobaldirective
• addglobalfilter
• addglobalextend
• addglobalmixin
• addglobalobservable
• addglobalcomponent
• importComponentObject
• setaxios
• addvue

إنشاء كائن VUE

 $ vue = new VueJs ();

حجج Vuejs

1. (صفيف ترابط) التكوين = ["el" => "#app"] [OptionNal]
2. (سلسلة) name fariable = "App" [OptionNal]
3. (Boolean) تمكين Vuetify = false [OptionNal]

طرق Vuejs

• adddata
• adddataraw
• addmethod
• addComputed
• AddWatcher
• الإضافة
• addfilter
• AddComponent
• addmixin
• addhook

إنشاء كائن مكون

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

Vuejscomponent حجة

1. (سلسلة) الاسم
2. (سلسلة) الاسم المتغير = null [OptionNal]

يجب أن يحترم اسم المكون مبدأ حالة الكباب ، إذا لم تقدم اسمًا متغيرًا ، فسيتم تحويل الاسم إلى PascalCase

طرق VuejsComponent

• الإضافات
• setinheritattrs
• setModel
• adddata
• يمتد
• adddataraw
• addmethod
• addComputed
• AddWatcher
• الإضافة
• addfilter
• AddComponent
• addmixin
• addtemplate
• generatefile
• addhook

بيانات الكائن

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

adddata ، حجج adddataraw

1. (سلسلة) الاسم
2. (سلسلة) القيمة

ينشئ هذان السطران من التعليمات البرمجية نفس بيانات VUE بالضبط

data: { "name" : true }

طرق الكائن

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

حجج addmethod

1. (سلسلة) الاسم
2. (سلسلة) جسم الوظيفة
3. (صفيف) وسيطة (ق) الدالة [OptionNal]

هذا سيولد المحتوى أدناه

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

الكائنات المحسوبة

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

حجج addComputed

1. (سلسلة) الاسم
2. (سلسلة) احصل على جسم الوظيفة
3. (سلسلة) تعيين جسم الوظيفة افتراضيًا ، وسيطة الوظيفة هي v [OptionNal]

هذا سيولد المحتوى أدناه

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

هنا مثال مع Getter و Setter

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

يولد هذا الرمز هذا المحتوى

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

مراقبي الكائنات

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

حجج AddWatcher

1. (سلسلة) البيانات لمشاهدة
2. (سلسلة) وظائف الجسم
3. (صفيف) الوسيطة (s) الدالة [خيار]

هذا يولد المحتوى أدناه

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

السنانير الكائن

هذه كل الطرق المتاحة لتشغيل وظيفة في دورة حياة معينة

• OnBeforecreate
• oncreated
• Onbeforemount
• onmounted
• onbeforeupdate
• onupdated
• Onbeforedestroy
• ondestroyed
• onActivated
• ondeactivated

تعمل جميع الخطافات بنفس الطريقة ، يمكن تطبيق المثال الأساسي على كل خطافات

السنانير الحجج

1. (سلسلة) جسم الوظيفة

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

هذا يولد المحتوى أدناه

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

التوجيهات

حجج adddirective ، addglobaldirective

1. (سلسلة) اسم التوجيه
2. (صفيف ترابط) [hook => وظيفة الخطاف]

توجيهات الكائن

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

هذا يولد المحتوى أدناه

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

التوجيهات العالمية

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

هذا يولد المحتوى أدناه

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

المرشحات

addfilter ، حجج addglobalfilter

1. (سلسلة) الاسم
2. (سلسلة) وظائف الجسم
3. (صفيف) وسيطات الوظائف [OptionNal]

مرشحات الكائنات

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

هذا يولد المحتوى أدناه

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

المرشحات العالمية

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

هذا يولد المحتوى أدناه

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

عناصر

AddComponent ، addglobalcomponent ، وسيطات importComponentObject

1. (VuejsComponent) كائن مكون

مكونات VUE

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

هذا يولد المحتوى أدناه

components: { "component-one" : ComponentOne } 

المكونات المحلية

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

هذا يولد المحتوى أدناه

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

المكونات العالمية

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

هذا يولد المحتوى أدناه

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

Mixins

addmixin ، حجة addglobalmixin

1. (VuejsComponent) كائن Mixin

كائن mixins

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

هذا يولد المحتوى أدناه

mixins: [ MixinOne ] 

Mixins العالمية

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

هذا يولد المحتوى أدناه

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

يمتد

addglobalextend ، يمتد الحجة

1. (VuejsComponent) تمديد الكائن

مكون يمتد

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

هذا يولد المحتوى أدناه

extends: "Component" 

يمتد العالمي

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

هذا يولد المحتوى أدناه

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

الملاحظات العالمية

addglobalobservable الحجج

1. (سلسلة) الاسم المتغير
2. (صفيف) كائن

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

هذا يولد المحتوى أدناه

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

إعدادات

تكوين Vuemanager

البديهية

لتمكين axios

 $ vueManager -> setAxios ( true );

تكوين المكونات

تعيين سمات الوراثة

لتمكين setinheritattrs

 $ component -> setInheritAttrs ( true );

تعيين نموذج

حجج setModel

1. (سلسلة) الدعائم
2. (سلسلة) الأحداث

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

إضافة كائن VUE

حجة addvue

1. (Vuejs) كائن Vue

 $ vueManager -> addVue ( $ vue );