1.模板解析的关键对象: compile对象

模板解析的基本流程:

• 将el的所有子节点取出, 添加到一个新建的文档fragment对象中

• 对fragment中的所有层次子节点递归进行编译解析处理(主要对应的init()函数)
  《1》对大括号表达式文本节点进行解析
  《2》对元素节点的指令属性进行解析
  《2.1》 事件指令解析
  《2.2》 一般指令解析

• 将解析后的fragment添加到el中显示

模板解析类型

• 解析表达式文本节点: textNode.textContent = value
  1). 根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1，得到name(与data中的name，进行匹配)
  2). 从data中取出表达式对应的属性值(得到name的value)
  3). 将属性值设置为文本节点的textContent
• 事件指令解析: elementNode.addEventListener(事件名, 回调函数.bind(vm))
  v-on:click=“test”
  1). 从指令名中取出事件名
  2). 根据指令的值(表达式)从methods中得到对应的事件处理函数对象
  3). 给当前元素节点绑定指定事件名和回调函数的dom事件监听
  4). 指令解析完后, 移除此指令属性
• 一般指令解析: elementNode.xxx = value
  1). 得到指令名和指令值(表达式)
  2). 从data中根据表达式得到对应的值
  3). 根据指令名确定需要操作元素节点的什么属性
  * v-text—textContent属性
  * v-html—innerHTML属性
  * v-class–className属性
  4). 将得到的表达式的值设置到对应的属性上
  5). 移除元素的指令属性

  模板解析图