Vue基础5
5.1 todolist案例
-
sui - ui库 + Vue + OOCSS
5.2 虚拟DOM & DIff算法
-
掌握程度: 了解
-
案例
-
操作真实DOM越少越好,尽量的去操作数据
-
所以总结出来虚拟dom,
-
所以Vue利用VDOM的对象模型来模拟DOM结构
-
但是当一个页面很复杂式,DOM结构的模拟就变的很复杂了,所以Vue使用了一个新的语法糖,叫做JSX
-
-
jsx
-
javascript + xml 让我们可以在js中书写dom结构
<template id="mask">
<div class="mask-box">
<div class="mask-bg"></div>
<div class="mask-content">
<p> 您确定要离开吗? </p>
<button
class="button button-warning button-fill pull-right"
@click = "removeItem( activeIndex )"
> 确定 </button>
</div>
</div>
</template>
-
-
render
-
( createElement => VNode )
-
将 jsx 通过 render 方法解析为对象模型
-
-
流程
-
第一次时
-
template模板使用jsx语法进行编辑
-
通过render函数将jsx解析为 vdom 对象模型
-
将VDOM对象模型渲染为真实DOM,然后挂载到页面中
-
当我们的数据发生改变时
-
重新生成VDOM
-
总结:
-
-
为什么Vue中要使用VDOM?
-
-
-
VDOM为什么可以优化Vue ?
-
-
-
VDOM渲染流程
-
-
-
JSX语法
-
-
-
render函数
-
-
-
5.3 生命周期 [ 王者 ]
掌握程度
会写
会念
明白和了解每一个钩子函数的作用和意义
特别注意:
钩子函数不要写成箭头函数,箭头函数可能会改变this指向
-
理解: 为什么要有生命周期 ?
-
Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能,方便我们更好的去控制组件
-
类比: 人
-
出生 - 哭
-
小学 - 小学
-
中学
-
高中
-
大学 / 专科
-
工作
-
。。。
-
-
Vue的生命周期分为三个阶段,8个钩子函数
-
初始化
-
beforeCreate
-
created
-
beforeMount
-
mounted
-
-
运行中
-
beforeUpdate
-
updated
-
-
销毁
-
beforeDestroy
-
destroyed
-
-