手把手带你实现一个min版的vue2（3）编译模板-一一网

提到模板，我们最熟悉的就是es6新增的字符串模板了。例如：

let msg = 'hello'
let a = `${msg} world`
console.log(a) // hello world
复制代码

模板是一个模式,在字符串模板里，

当msg是 hello时，a中的msg就会替换成hello，所有a是 hello world;

当msg是 hi 时，a中的msg就会替换成hi ，a是hi world。

模板类似于生活中的模具，往里套就能生成想要的东西。

在vue中，v-for ，v-if, v-show,也是一种模板，只不过它们有更明确的叫法—指令。{{}}也是一种模板，它也有更明确的叫法—插值。

模板编译 {{}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>compile</title>
</head>
<body>
    <div id="app" >{{name}}</div>
    <script>
        const data = { name: 'hello 编译模板'}
        // 把 {{name}} 替换成 data.name
    </script>
</body>
</html>
复制代码

接下来我们要做的就是把 {{name}} 替换成 data.name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>compile</title>
</head>
<body>
    <div id="app" >{{name}}</div>
    <script>

    </script>
    <script>
        // 正则 （匹配{{}}）
        const defaultRE = /\{\{(.+?)\}\}/g;
        // 把 数据
        const data = {name: 'hello 编译模板'}
        const element = document.querySelector('#app')
        // 替换
        const textContxt = element.textContent.replace(defaultRE, (...rest) => {
            // 把 {{name}} 替换成 data.name
            element.textContent = data[rest[1]]
        })       
    </script>
</body>
</html>
复制代码