Vue初認知
對比laravel和Vue,都是為開發項目簡單方便.laravel主要是為後台開發降低難度,提升效率.但是並不能實現前後端分離,導致項目大了,後端工程師很苦惱.一邊實現API接口,一邊開發頁面,兩者互相切換着做,而且根據不同的url動態拼接頁面,這也導致後台的開發壓力大大增加。前後端工作分配不均。不僅僅開發效率慢,而且代碼難以維護。Vue框架就可以解決前後端分離實現並向開發,不僅提高了效率還提高了質量.
Vue小試牛刀
在這種背景下決定了解下Vue框架是啥玩意
1.安裝Vue
博主是直接引用vue.js的
2.關於雙向關聯
3.事件綁定方法
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 = '';
}
});
}
4.methods:{}方法 直接內部this 調用
methods:{
AddSport(){
if(this.sport){
this.sports.push(this.sport);
this.sport='';
}
}
},
v-on:keyUp == @keyUp="AddSport"
5.屬性綁定事件
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" 命名
}
6.屬性計算
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>
未完待續。。。。
聲明:本文為原創作品,版權歸作者所有。未經許可,不得轉載或用於任何商業用途。如若本站內容侵犯了原著者的合法權益,可聯繫我們進行處理。