php vuejs
1.0.0
PHP Frameworks的VUEJS集成PHP-VueJS將VueJS添加到任何PHP項目，它可以是本地的，甚至是PHP Framework項目
使用此庫的推薦方法是使用Composer ，從目錄中的composer.json運行此命令
composer require phpmv/php-vuejs它管理整個腳本注入，您必須實例化
$ vueManager = VueManager:: getInstance ();VueManager方法
$ vue = new VueJs ();vuejs參數
VUEJS方法
$ component = new VueJSComponent ( ' component-one ' );vuejscomponent參數
組件名稱必須尊重烤肉串原理，如果您不提供可變名稱，它將被轉換為pascalcase
VUEJSCOMPONENT方法
$ object -> addData ( ' name ' , true );
$ object -> addDataRaw ( ' name ' , ' true ' );adddata，adddataraw參數
這兩行代碼生成完全相同的VUE數據
data: { "name" : true } $ object -> addMethod ( ' greet ' , ' window.alert(`Hello ${name}`); ' ,[ ' name ' ]);AddMethod參數
這將生成以下內容
methods: {
"greet" :
function ( name ) {
window . alert ( `Hello ${ name } ` ) ;
}
} $ object -> addComputed ( ' reversedMessage ' , " return this.message.split('').reverse().join(''); " );addcomputed參數
這將生成以下內容
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參數
這生成以下內容
watch: {
"title" :
function ( newTitle , oldTitle ) {
console . log ( 'Title change from ' + oldTitle + ' to ' + newTitle )
}
}這些都是可在給定生命週期運行功能的所有方法
所有鉤子都以相同的方式工作，每個鉤子都可以應用於每個鉤子
鉤子論點
$ object -> onCreated ( " console.log('Page has been created !'); " );這生成以下內容
created:
function ( ) {
console . log ( 'Page has been created !' ) ;
}添加性，addglobaldiractive參數
$ 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參數
$ 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 gragments
$ 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參數
$ 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，擴展參數
$ 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參數
$ vueManager -> addGlobalObservable ( " state " , [ " count " => 0 ]);這生成以下內容
const state = Vue . observable ( { count : 0 } ) ; 啟用Axios
$ vueManager -> setAxios ( true );啟用setInheritattrs
$ component -> setInheritAttrs ( true );setModel參數
$ component -> setModel ( ' checked ' , ' change ' );addVue參數
$ vueManager -> addVue ( $ vue );
