vue常识
2019-03-22 本文已影响6人
jia林
对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方法传递参数
后续更新。。。。。
