vue 与模板

1： vue 与模板：  编写页面模板

1.1： 直接在html 标签中 写标签

1.2： 使用template 模板

1.3： 使用的单文件组件（<template/>）

1.4:   创建vue 实例

    在Vue 的构造函数中提供： data, methods， computed, (计算属性)， watcher (数据监听)， props: (组件接受数据...)

1.5:  new Vue 相当于构造函数： 创建vue 实例对象：  vue 实例对象中： el: 关联dom 元素， data： 需要渲染的数据源。

vue  执行流程： 

 （01）：获得模板（template 模板），  但是模板中有 “坑”， 需要填坑。

 （02）：利用vue  构造函数中提供的数据来填坑。 （把vue 构造函数中data 数据源： 填到template 模板中）

 （03）： 将标签替换掉原有的坑得标签

1.6：  拆解步骤：  步骤拆解：  

1： 拿到模板：   2： 拿到数据（data）  3： 将数据与模板结合， 得到的是HTML 元素（DOM元素）    4：放到页面中

       获取元素，也就是获取到模板。

2： 自己定义数据：  把数据填充到模板中去： 

3：  如何把数据填充到模板中：  使用递归思想  + 正则

4：  但是在这个案例中： template 模板中 是DOM 元素。

  但是在真正得Vue 源码中 DOM -->  字符串模板 --> vnode  ---> 真正的dom结构。

// 定义正则表达式
let regular = /\{\{(.+?)\}\}/g;
// 花括号在正则表达式里边有特殊含义： 需要转义一下
正则表达式： 修饰符
i： 表示执行对大小写不敏感的匹配。
g:  执行全局匹配。
m： 执行多行匹配。
function compile ( template, data ) {
  let childNodes = template.childNodes;  // 取出子元素
  for ( let i = 0; i < childNodes.length, i++) {
    let type = childNodes [i].nodeType;   // 1: 代表元素   3：代表文本节点
    if (type === 3) {
      // 文本节点, 可以判断里边是否有{{}} mustache 语法
      let text = childNodes [i].nodeValue;    // 该文本只有节点才有意义

      // 判断有没有花括号
     tet = text.replace( regular, (_, g)=> {  
      // replace 使用正则匹配一次， 函数就会调用一次
      // 函数的 第 0 个参数： 表示匹配到内容
      // 函数的 第 n 个参数： 表示正则中 第 n 组； 
      let key = g.trim();   // 写在双括号里边的东西
      let value = data [ key ];
      //  将 {{ xxxxx }}  用这个值替换掉
      return  value;
     }) 

      注意： tet 现在和dom 元素是没有关联的
     childNodes [i] = nodType = tet;
    }else if ( type === 1) {
      //  元素，考虑它有没有子元素， 是否需要将子元素进行判断是否需要插值
      //  调用递归思想
      compiler (childNodes [i], data)
   }
  }
}