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