php vuejs

php-vuejs

PHPフレームワークのVUEJS統合PHP-VueJSは、 VueJS PHP PHP Frameworkに追加します。

？始めましょう

このライブラリを使用する推奨される方法は、 Composerを使用することですcomposer.json

 composer require phpmv/php-vuejs

ガイド

Vue Managerの作成

挿入されたスクリプト全体を管理します、あなたはそれをインスタンス化する必要があります

 $ vueManager = VueManager:: getInstance ();

Vuemanagerメソッド

• addglobaldirective
• addglobalfilter
• addglobalextend
• addglobalmixin
• addglobalobservable
• addglobalComponent
• ImportComponentObject
• Setaxios
• addVue

Vueオブジェクトの作成

 $ vue = new VueJs ();

Vuejsの議論

1. （Associative Array）configuration = ["el" => "#App"] [optionnal]
2. （文字列）変数名= "app" [optionnal]
3. （boolean）enable vuetify = false [optionnal]

Vuejsメソッド

• adddata
• adddataraw
• addmethod
• addcomputed
• watcherを追加します
• adddirective
• addfilter
• addComponent
• addmixin
• addhook

コンポーネントオブジェクトの作成

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

VuejsComponent引数

1. （文字列）名前
2. （文字列）変数名= null [optionnal]

コンポーネント名はKebabケースの原則を尊重する必要があります。変数名を提供しない場合、Pascalcaseに変換されます

VuejsComponentメソッド

• AddProps
• Setinheritattrs
• SetModel
• adddata
• 拡張
• adddataraw
• addmethod
• addcomputed
• watcherを追加します
• adddirective
• addfilter
• addComponent
• addmixin
• addtemplate
• GenerateFile
• addhook

オブジェクトデータ

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

adddata、adddatarawの議論

1. （文字列）名前
2. （文字列）値

これらの2行のコードは、まったく同じVueデータを生成します

data: { "name" : true }

オブジェクトメソッド

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

引数を追加します

1. （文字列）名前
2. （文字列）関数の本体
3. （配列）関数の引数（s） [optionnal]

これにより、以下のコンテンツが生成されます

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

オブジェクトコンピューター

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

追加の引数を追加します

1. （文字列）名前
2. （文字列）関数の本体を取得します
3. （文字列）機能の本体をデフォルトで設定します関数引数はV [オプション]です

これにより、以下のコンテンツが生成されます

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

これがゲッターとセッターの例です

 $ 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 ' ]);

追加の議論を追加します

1. （文字列）監視するデータ
2. （文字列）関数本文
3. （配列）関数引数（s） [optionnal]

これにより、以下のコンテンツが生成されます

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

オブジェクトフック

これらはすべて、特定のライフサイクルで機能を実行するために利用できる方法です

• onbeforecreate
• 作成された
• onbeforemount
• オンマウント
• onbeforeupdate
• オンになっています
• onbeforedestroy
• Ondestroyed
• onactivated
• 耐性

すべてのフックが同じように機能し、下の例を各フックに適用できます

引数をフックします

1. （文字列）関数の本体

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

これにより、以下のコンテンツが生成されます

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

指令

adddirective、addglobaldirectiveの議論

1. （文字列）ディレクティブの名前
2. （連想配列）[フック=>フックの関数]

オブジェクトディレクティブ

 $ 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. （配列）関数引数[オプション]

オブジェクトフィルター

 $ 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" }
		}
	} ) ;

ミキシン

addmixin、addglobalmixin引数

1. （vuejsComponent）ミックスインオブジェクト

オブジェクトミキシン

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

これにより、以下のコンテンツが生成されます

mixins: [ MixinOne ] 

グローバルミックス

 $ 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

Axiosを有効にする

 $ vueManager -> setAxios ( true );

コンポーネントの構成

継承属性を設定します

Setinheritattrsを有効にする

 $ component -> setInheritAttrs ( true );

モデルを設定します

SetModel引数

1. （文字列）小道具
2. （文字列）イベント

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

Vueオブジェクトの追加

addvue引数

1. （Vuejs）オブジェクトVue

 $ vueManager -> addVue ( $ vue );