php vuejs

PHP-vuejs

PHP 프레임 워크에 대한 vuejs 통합 PHP-VueJS 모든 PHP 프로젝트에 VueJS 추가하고, 기본 또는 PHP Framework 프로젝트 일 수 있습니다.

? 시작하세요

이 라이브러리를 사용하는 권장 방법은 Composer 사용하는 것입니다. composer.json 에 위치한 디렉토리 에서이 명령을 실행하십시오.

 composer require phpmv/php-vuejs

가이드

VUE 관리자의 생성

주입 된 전체 스크립트를 관리하고 인스턴스화해야합니다.

 $ vueManager = VueManager:: getInstance ();

vuemanager 방법

• addglobaldipication
• addglobalfilter
• addglobalextend
• addglobalmixin
• addglobalobservable
• addglobalcomponent
• importComponentObject
• setaxios
• addVue

vue 객체의 생성

 $ vue = new VueJs ();

vuejs 주장

1. (연관 배열) configuration = [ "el"=> "#app"] [옵션 말]
2. (문자열) 변수 이름 = "app" [옵션]
3. (부울) 활성화 vuetify = false [옵션]

vuejs 방법

• addData
• adddataraw
• AddMethod
• addcomputed
• AddWatcher
• 부가 적
• addfilter
• addcomponent
• addmixin
• 추가 후

구성 요소 객체 생성

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

vuejscomponent argument 's

1. (문자열) 이름
2. (문자열) 변수 이름 = null [옵션]

구성 요소 이름은 Kebab-Case 원칙을 존중해야합니다. 변수 이름을 제공하지 않으면 PascalScase로 변환됩니다.

vuejscomponent 메소드

• AddProps
• setinheritattrs
• setModel
• addData
• 확장
• adddataraw
• AddMethod
• addcomputed
• AddWatcher
• 부가 적
• addfilter
• addcomponent
• addmixin
• addTemplate
• 생성
• 추가 후

객체 데이터

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

AddData, AddDataraw 인수

1. (문자열) 이름
2. (문자열) 값

이 두 줄의 코드는 정확히 동일한 VUE 데이터를 생성합니다.

data: { "name" : true }

객체 방법

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

추가 메드 인수

1. (문자열) 이름
2. (문자열) 기능의 몸
3. (배열) 기능의 인수 [옵션]

아래의 내용이 생성됩니다

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

객체 컴퓨팅

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

AddComputed 인수

1. (문자열) 이름
2. (문자열) 기능의 몸을 얻습니다
3. (문자열) 기능의 본문 설정 기본적으로 함수 인수는 v [옵션] 입니다.

아래의 내용이 생성됩니다

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

다음은 Getter and 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 ' ]);

부가 된 논쟁

1. (문자열) 볼 데이터
2. (문자열) 기능 본문
3. (배열) 함수 인수 [옵션]

아래의 내용이 생성됩니다

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

객체 고리

주어진 수명주기에서 함수를 실행하는 데 사용할 수있는 모든 방법입니다.

• Onbeforecreate
• oncreated
• inbeforeMount
• 마운트
• onbeforeupdate
• onupdated
• onbeforedestroy
• 파괴
• 활성화
• ondectivated

모든 후크는 동일한 방식으로 작동하며 아래의 예는 각 후크에 적용될 수 있습니다.

논쟁을 고리합니다

1. (문자열) 기능의 몸

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

아래의 내용이 생성됩니다

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

지침

adddirective, addglobaldinipication Arguments

1. (문자열) 지침의 이름
2. (연관 배열) [hook => 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. (배열) 함수 인수 [옵션]

객체 필터

 $ 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 객체

물체 믹스 인

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

모델 설정

세트 모델 인수

1. (문자열) 소품
2. (문자열) 이벤트

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

vue 객체 추가

AddVue 인수

1. (vuejs) 객체 vue

 $ vueManager -> addVue ( $ vue );