一、MVVM
1.背景：用js操纵html
1.1. 直接用js操纵dom节点，原生API
var dom = document.getElementById('name');
dom.innerHTML='Homer';
dom.style.color = ' red' ;
1.2. jQuery，更加便捷修改dom节点
<p>Hello, <span id="name"> </span>!</p>
var name='Homer';
$('#name').text(name);
1.3. MVC模式，JS渲染数据
=>MVVM模式：不修改dom节点，直接控制js对象，框架同步更新dom状态
【View：显示，HTML某些DOM节点】-【ViewModel：同步对象】-【Model：js对象】
综合比较最容易上手的框架：vue
<div id='app'>
<p>Hello,{{ name }} </span>
</div>
var app= new Vue({
el: '#app',
data: {
name:'Bart'
}
});
2.单向绑定
model（js中var部分）变化映射➡️dom结构（html显示）
3.双向绑定
model⬅️➡️dom，例如：填写表单
4.Vue & Angular & React
二、Vue
1.Vue的生命周期
1.1生命周期概述
生命周期参考
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
即：创建前后、载入前后、更新前后、销毁前后
1.2生命周期的作用是
生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。
1.3第一次页面加载触发哪些钩子
beforeCreat created
beforeMount mounted
1.4DOM渲染、AJAX在那个周期中完成
mounted
