README

VueJS集成到PHP框架 PHP-VueJS 将 VueJS 集成到任何 PHP 项目中，无论是原生项目还是 PHP 框架 项目

📍 开始使用

使用此库的推荐方法是使用 Composer，从包含 composer.json 的目录中运行此命令

composer require phpmv/php-vuejs

📕 指南

创建Vue管理器

它管理注入的所有脚本，您必须实例化它

$vueManager = VueManager::getInstance();

VueManager方法

• addGlobalDirective
• addGlobalFilter
• addGlobalExtend
• addGlobalMixin
• addGlobalObservable
• addGlobalComponent
• importComponentObject
• setAxios
• addVue

创建Vue对象

$vue = new VueJs();

VueJS参数

1. (关联数组) 配置 = ["el" => "#app"] [可选]
2. (字符串) 变量名 = "app" [可选]
3. (布尔值) 启用 vuetify = false [可选]

VueJS方法

• addData
• addDataRaw
• addMethod
• addComputed
• addWatcher
• addDirective
• addFilter
• addComponent
• addMixin
• addHook

创建组件对象

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

VueJSComponent参数

1. (字符串) 名称
2. (字符串) 变量名 = null [可选]

组件名称必须遵循 kebab-case 规则，如果您不提供变量名，则名称将转换为 PascalCase

VueJSComponent方法

• addProps
• setInheritAttrs
• setModel
• addData
• extends
• addDataRaw
• addMethod
• addComputed
• addWatcher
• addDirective
• addFilter
• addComponent
• addMixin
• addTemplate
• generateFile
• addHook

对象数据

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

addData, addDataRaw参数

1. (字符串) 名称
2. (字符串) 值

这两行代码生成相同的Vue数据

data: { "name": true }

对象方法

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

addMethod参数

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('');
		}
}

这里是一个包含获取器和设置器的示例

$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参数

1. (字符串) 要观察的数据
2. (字符串) 函数体
3. (数组) 函数参数 [可选]

这将生成以下内容

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

对象钩子

这些方法可以在给定生命周期中运行函数

• onBeforeCreate
• onCreated
• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeDestroy
• onDestroyed
• onActivated
• onDeactivated

所有钩子的工作方式相同，以下示例可以适用于每个钩子

钩子参数

1. (字符串) 函数体

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

这将生成以下内容

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

指令

addDirective, addGlobalDirective参数

1. (字符串) 指令名称
2. (关联数组) [hook => hook's function]

对象指令

$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, extends参数

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. (字符串) props
2. (字符串) 事件

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

添加 Vue 对象

addVue 参数

1. (VueJS) 对象 vue

$vueManager->addVue($vue);