Vue定義組件和生命週期函數及實例演示！

定義全局組件
Vue.component("name",{...})

定義局部組件
let Com = {....}

new Vue({
data : ...,
...,
components : {
Name : Com
}
})

定義組件時 對象內的屬性
data : 數據模型(除了初始化 該屬性必須是函數類型)
methods : 封裝方法(用於給模板調用)
computed : 計算屬性
watch : 監聽某個數據模型的變化(默認只能監聽基本數據類型,準確的來講應該是隻能監聽到引用的變化)
props : 用於接收父級傳遞進來的參數
components : 掛載子組件
生命週期函數: xxx
filters : 掛載局部過濾器

 

生命週期函數
四大時期: 實例化 加載期 更新期 卸載期
每一個時期分以前和以後
以前的套路是前面加 before
以後的套路時過去時(加ed)

具體函數名以下:
beforeCreate
created

beforeMount
mounted

beforeUpdate
updated

beforeDestroy
destroyed

props的類型驗證
無驗證: props:["username"]
單純類型驗證: props:{
username : String
}
多條件類型驗證:
props : {
username : {
type : String,
required : true, //必填
default : "zhuiszhu", //默認值
validator : function(value){ //自定義驗證規則
if(){
return true //驗證經過
}else{
throw new Err("錯誤緣由") //拋出驗證異常

//或者 return false 該種方式也能夠使驗證不經過 只是沒法具體看到不經過的緣由 故推薦使用上列拋異常的方式
}
}
}
}