對比laravel和Vue,都是為開發項目簡單方便.laravel主要是為後台開發降低難度,提升效率.但是並不能實現前後端分離,導致項目大了,後端工程師很苦惱.一邊實現API接口,一邊開發頁面,兩者互相切換着做,而且根據不同的url動態拼接頁面,這也導致後台的開發壓力大大增加。前後端工作分配不均。不僅僅開發效率慢,而且代碼難以維護。Vue框架就可以解決前後端分離實現並向開發,不僅提高了效率還提高了質量.
在這種背景下決定了解下Vue框架是啥玩意
博主是直接引用vue.js的
created:在範本渲染成html前調用,即通常初始化某些屬性值,然後再渲染成視圖。
created(/*傳參*/){
}
mounted:{在範本渲染成html後調用,通常是初始化頁面完成後,再對html的dom節點進行一些需要的操作。
mounted(){
document.getElementById('AddSport').addEventListener('click',function(){
var sport = document.getElementById('sport');
if(sport.value){
app.sports.push(sport.value);
sport.value = '';
}
});
}
methods:{
AddSport(){
if(this.sport){
this.sports.push(this.sport);
this.sport='';
}
}
},
v-on:keyUp == @keyUp="AddSport"
title 綁定 v-bind:title ="title" data{title:"title value"}
class 綁定 :class ={ active:isactive} data{isactive:true} true控制啟動
<!--nextpage-->
<!--nextpage-->
多class 綁定 :class="[class1,class2]"
data:{
class1:"abcd"
class2:"efgh" 命名
}
computed:{
myName(){
return this.firstName+this.fullName+this.lastName;
}
}
<p>my name is {{myName}}</p>
/* 減少在範本中的邏輯運算;可在範本中使用該函式所得到的值;捆綁關聯
* 如果你不希望有緩存,請用方法來替代。
*/
methods:{
myName(){
return this.firstName+this.fullName+this.lastName;
}
}
<p>my name is {{myName()}}</p>