vue常見知識點總結

學會查找api
在vue中，v-text=「」等指令中的雙引號能夠是任何簡單的js表達式，
Js簡單的表達式包括：
Js基本類型，數字，字符串等等，
還能夠是三元表達式

v-show 控制顯示隱藏和v-if的區別
v-show 能夠清除style=」display: none」
V-if在虛擬內存中,不會清除style=」display: none」

v-text 顯示文本，和{{}}的區別
頁面首屏不用{{}}，只在組件中使用{{}}

v-bind 兩個用法
1.綁定dom元素的屬性，只要是dom元素的屬性均可以綁定，例如

v-bind:style=」{height: 20px}」
v-bind:class=」{active: isActive}」,默認綁定class用對象的形式

2.給子組件綁定屬性值傳參

<dialog v-bind:display=「true」></dialog>

v-on 兩個用法
1.監聽dom元素的事件

<div v-on:click=」fn」></div>

2.監聽自定義組件內部觸發的事件

<dialog v-on:close=「fn」></dialog>

v-if,v-else-if

<div v-if=」active === true」>v-if</div>
<div v-else=」active === false」>v-else</div>
<div v-else-if>v-else-if</div>

Computed 計算屬性

由其它data中的屬性計算獲得,依賴屬性改變是，其值將會改變
new({
    el:'',
    data:{
        cartNum: 20,
        everyPrice: 20
    },
    computed{
        totalPrice(){
            return cartNum * everyPrice
        }
    }
})

Watch 監聽屬性的改變和computed區別

new({
    el:'',
    data:{
        cartNum: 20,
        everyPrice: 20
    },
    Watch:{
        cartNum (newval,oldval){
            this.totalPric = newval* this.everyPrice
        },
        everyPrice(newval,oldval){
            this.totalPric = newval* this.cartNum 
        }

    }
})

很明顯當一個屬性有兩個或者多個屬性計算獲得的時候用計算屬性可以節省代碼，

當想要某個屬性最初賦值的時候就執行相應的監聽

Watch:{
    isLogin(){
        //isLogin最初賦值的時候不會執行這裏邊的代碼，只有等賦值後再次改變時執行
    }
}

解決辦法

Watch:{
    handler: function (val, oldVal) {
          console.log('new d: %s, old: %s', val, oldVal)
    },
       immediate: true
}

this.$nextTick 用法

例如banner渲染
This.list = getData(); 
this.$nextTick(()=>{
    new Swiper();
})

1.vue語法不要用簡寫,用全稱,避免和後臺語法衝突
2.頁面中避免使用帶有>和<之類的判斷語法
3.首屏模板數據渲染用v-text 不用{{}}
4.實例聲明模板
new({

el:'',
//數據變量聲明以d_開頭，避免和methods重名
data:{
    d_arr:[],
    //類名控制通常寫在class
    d_class:{
            
    },
},
computed:{
        
},
watch:{
        
},
methods:{
        
},
mounted:function(){
        
}

});
5.首屏顯示內容不用組件

6.api 請求方法

建議講本身項目的api請求封裝下，這樣方便添加中間件對請求作處理
1.傳參數
api(url, {ActivityID:item.ID}, function (res) {
            
});
2.參數爲空
api(url, {}, function (res) {
            
});

7.vue風格指南
https://cn.vuejs.org/v2/style...