php vuejs

Php-vuejs

Integrasi Vuejs untuk Kerangka PHP PHP-VueJS menambahkan VueJS ke proyek PHP , itu bisa asli, atau bahkan proyek PHP Framework

? Mulai

Cara yang disarankan untuk menggunakan pustaka ini adalah menggunakan Composer , jalankan perintah ini dari direktori di mana terletak composer.json

 composer require phpmv/php-vuejs

Memandu

Penciptaan manajer vue

Itu mengelola seluruh skrip yang disuntikkan, Anda harus membuat instantiasi

 $ vueManager = VueManager:: getInstance ();

Metode Vuemanager

• addglobaldirective
• addglobalfilter
• addglobalextend
• addglobalmixin
• addglobalobservable
• AddGlobalComponent
• ImportComponentObject
• setaxios
• addvue

Pembuatan Objek Vue

 $ vue = new VueJs ();

Argumen Vuejs

1. (asosiatif array) konfigurasi = ["el" => "#app"] [optionnal]
2. (String) Variabel Name = "App" [OptionNal]
3. (boolean) Aktifkan vuetify = false [optionnal]

Metode Vuejs

• addData
• addDataRaw
• addmethod
• addComputed
• addwatcher
• addDirective
• addFilter
• tambahkan komponen
• addmixin
• addhook

Pembuatan Objek Komponen

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

Argumen VuejsComponent

1. (String) Nama
2. (String) Name Variabel = NULL [OptionNal]

Nama Komponen Harus Menghormati Prinsip Kasus Kebab, Jika Anda tidak memberikan nama variabel, itu akan dikonversi ke Pascalcase

Metode VuejsComponent

• addprops
• setinheritattrs
• setModel
• addData
• meluas
• addDataRaw
• addmethod
• addComputed
• addwatcher
• addDirective
• addFilter
• tambahkan komponen
• addmixin
• AddTemplate
• GenerateFile
• addhook

Data objek

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

AddData, argumen AddDataRaw

1. (String) Nama
2. nilai (string)

Dua baris kode ini menghasilkan data vue yang sama persis

data: { "name" : true }

Metode objek

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

Tambah argumen Metode

1. (String) Nama
2. (String) Tubuh Fungsi
3. (array) argumen fungsi [optionnal]

Ini akan menghasilkan konten di bawah ini

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

Objek dihitung

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

Tambah argumen yang dikomputasi

1. (String) Nama
2. (string) Dapatkan tubuh fungsi
3. (String) Set Function's Body Secara default Argumen fungsi adalah V [optionnal]

Ini akan menghasilkan konten di bawah ini

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

Berikut adalah contoh dengan Getter dan Setter

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

Kode ini menghasilkan konten ini

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

Pengamat objek

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

argumen addwatcher

1. (string) data untuk ditonton
2. (String) Fungsi Tubuh
3. (array) argumen fungsi [optionnal]

Ini menghasilkan konten di bawah ini

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

Kait objek

Ini semua adalah metode yang tersedia untuk menjalankan fungsi pada siklus hidup yang diberikan

• OnBeforeCreate
• oncreated
• Onbeforemount
• onmounted
• OnBeforeUpdate
• onupdated
• Onbeforedestroy
• Ondestroyed
• onactivated
• onseactivated

Semua kait bekerja dengan cara yang sama, contoh di bawahnya dapat diterapkan untuk setiap kait

argumen kait

1. (String) Tubuh Fungsi

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

Ini menghasilkan konten di bawah ini

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

Arahan

AddDirective, addglobalDirdurective argumen

1. (String) Name Directive
2. (array asosiatif) [hook => fungsi hook]

Arahan objek

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

Ini menghasilkan konten di bawah ini

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

Arahan Global

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

Ini menghasilkan konten di bawah ini

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

Filter

AddFilter, argumen addGlobalfilter

1. (String) Nama
2. (String) Fungsi Tubuh
3. (array) Argumen fungsi [OptionNal]

Filter objek

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

Ini menghasilkan konten di bawah ini

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

Filter global

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

Ini menghasilkan konten di bawah ini

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

Komponen

AddComponent, AddGlobalComponent, ImportComponentObject Argumen

1. (VuejsComponent) Objek Komponen

Komponen vue

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

Ini menghasilkan konten di bawah ini

components: { "component-one" : ComponentOne } 

Komponen lokal

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

Ini menghasilkan konten di bawah ini

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

Komponen global

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

Ini menghasilkan konten di bawah ini

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

Mixin

Addmixin, argumen addglobalmixin

1. (VuejsComponent) Objek Mixin

Mixin objek

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

Ini menghasilkan konten di bawah ini

mixins: [ MixinOne ] 

Mixin Global

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

Ini menghasilkan konten di bawah ini

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

Meluas

addglobalextend, memperluas argumen

1. (VuejsComponent) memperluas objek

Komponen meluas

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

Ini menghasilkan konten di bawah ini

extends: "Component" 

Global Extends

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

Ini menghasilkan konten di bawah ini

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

Global Observable

argumen addglobalobservable

1. (String) Nama variabel
2. Objek (array)

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

Ini menghasilkan konten di bawah ini

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

Konfigurasi

Konfigurasi Vuemanager

Axios

Untuk mengaktifkan Axios

 $ vueManager -> setAxios ( true );

Konfigurasi Komponen

Atur atribut waris

Untuk mengaktifkan setinheriteTtrs

 $ component -> setInheritAttrs ( true );

Setel model

Setmodel argumen

1. (String) alat peraga
2. Acara (String)

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

Menambahkan Objek Vue

argumen addvue

1. (Vuejs) objek vue

 $ vueManager -> addVue ( $ vue );