php vuejs
1.0.0
Интеграция Vuejs для PHP Frameworks PHP-VueJS добавляет VueJS к любым проектам PHP , может быть нативным или даже PHP Framework
Рекомендуемый способ использования этой библиотеки использует Composer , запустите эту команду из каталога, где находится composer.json
composer require phpmv/php-vuejsОн управляет всем сценарием, вы должны создать его экземпляр
$ vueManager = VueManager:: getInstance ();Методы Vuemanager
$ vue = new VueJs ();Vuejs Arguments
Методы Vuejs
$ component = new VueJSComponent ( ' component-one ' );Vuejscomponent Arcome's
Имя компонента должно уважать принцип кебаб-ваза, если вы не предоставите имя переменной, оно будет преобразовано в Pascalcase
Vuejscomponent Методы
$ object -> addData ( ' name ' , true );
$ object -> addDataRaw ( ' name ' , ' true ' );AddData, AddDataraw Arguments
Эти две строки кода генерируют точно одинаковые данные 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(''); " );AddCompured Arguments
Это будет генерировать контент ниже
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 ' ]);Добавить аргументы
Это генерирует контент ниже
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 !' ) ;
}Дополнительные, addglobaldirective аргументы
$ 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 Arguents
$ 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, AmportComponentObject Arguments
$ 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 Arguments
$ component -> setModel ( ' checked ' , ' change ' );AddVue Arcome
$ vueManager -> addVue ( $ vue );
