vue常識
摘要：
對MVVM的理解
MVVM是Model-View-ViewModel的縮寫
Model代表資料模型，進行業務邏輯操作
View代表UI元件，使用者介面
ViewMo...
對MVVM的理解
-
MVVM是Model-View-ViewModel的縮寫
Model代表資料模型，進行業務邏輯操作
View代表UI元件，使用者介面
ViewModel核心樞紐，通過雙向資料繫結把 View 層和 Model 層連線了起來，View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上。
Vue實現資料雙向繫結的原理：Object.defineProperty（）
- 利用Object.defineProperty重新定義了物件的獲取屬性（get）和設定屬性（set）的操作來實現的
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" name="" id="inp">
<div id="show"></div>
<script type="text/javascript">
function getId(id) {
return document.getElementById(id);
}
var inp = getId("inp");
var show = getId("show");
var obj = {};
/*
*@param 要操作的物件
*@param 要定義或修改的物件屬性名
*@param 屬性描述符
*/
Object.defineProperty(obj, "prop", {
get: function() {
return obj;
},
set: function(newValue) {
console.log(newValue);
inp.value = newValue;
show.innerHTML = newValue;
}
})
inp.oninput = function(e) {
obj.prop = this.value
}
</script>
</body>
</html>
Vue的生命週期
Vue 例項從建立到銷燬的過程，就是生命週期。從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之為 Vue 的生命週期。
vue生命週期8個階段
- beforeCreate(建立前)
- created(建立後)
- beforeMount(載入前)
- mounted(載入後)
- beforeUpdate(更新前)
- updated(更新後)
- beforeDestroy(銷燬前)
- destroy(銷燬後)
第一次頁面載入會觸發哪幾個鉤子？
- beforeCreate, created, beforeMount, mounted
DOM 渲染在 哪個週期中就已經完成？
- DOM 渲染在 mounted 中就已經完成了
Vue元件間的引數傳遞
- 父元件傳給子元件：子元件通過props方法接受資料;
- 子元件傳給父元件：$emit方法傳遞引數
後續更新。。。。。