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>

未完待續。。。。