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
วิธี 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(''); " );อาร์กิวเมนต์ที่ถูกคำนวณ
สิ่งนี้จะสร้างเนื้อหาด้านล่าง
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 !' ) ;
}adddirective, addglobaldirection อาร์กิวเมนต์
$ 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 อาร์กิวเมนต์
$ 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 );
