一、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

2.组件