vue中双大括号替换的简单原理

最新推荐文章于 2024-04-26 22:23:28 发布

qq_47452289

最新推荐文章于 2024-04-26 22:23:28 发布

阅读量4.3k

点赞数 4

文章标签： javascript vue.js es6 html5

本文链接：https://blog.csdn.net/qq_47452289/article/details/114936429

版权

Vue中双大括号解析的简单原理

Vue中主要思路思路就是三步：

获取所有节点
找到所有 {{ }} 的节点
替换 {{ }} 的内容

我们这里就简单一点，替换一个节点就可以了，我们先定义一个类似Vue的data对象。

<body>
<h1>{{user.name}}的数学成绩为{{user.test.math}}</h1>
<script>
    // 模仿Vue中的data属性，为一个对象
    let data={
        word:'hello',
        user:{
            name:'张三',
            test:{
                math:93
            }
        }
    }
</script>
</body>

首先获取这个节点，获取文本内容

let doc=document.querySelector('h1')
let str = doc.innerText  //{{user.name}}的数学成绩为{{user.test.math}}

然后我们需要去匹配所有的{{ }}，这里我们采用正则，并且获取到{{ }}里面的内容。

str.replace(/\{\{(.+?)\}\}/g,(...args)=>{
        console.log(args)
    })

这里打印的args为一个数组，如下图
在这里插入图片描述
可以看到数组的第二个值就是双大括号的内容，就是我们要的东西，所以下一步就是把它转化为data里面的值就可以了。
我们定义一个方法getValue()来解析这种对象的值，这里传入对象类型的字符串，以“user.name”为例

function getValue(val){
		//val=user.name
		let arr=val.split('.') //['user','name']
        return arr.reduce((data,currentVal)=>{
            return data[currentVal]
        },data)
        //利用reduce方法，传入的初始值就是我们自己定义的data对象
        //currentVal为当前数组的值，第一次为'user'，第二次为'name'
    }

我们定义好了方法，调用一下该方法就可以解析了

 let value=str.replace(/\{\{(.+?)\}\}/g,(...args)=>{
        return getValue(args[1])
    })

 function getValue(val){
        return val.split('.').reduce((data,currentVal)=>{
            return data[currentVal]
        },data)
    }
    
 console.log(value) //张三的数学成绩为93

最后一步就是把这个值赋值给该节点就可以了 ٩(๑>◡<๑)۶

doc.textContent=value

下面为完整的代码以及页面展示效果

<body>
<h1>{{user.name}}的数学成绩为{{user.test.math}}</h1>
<script>
    let data={
        word:'hello',
        user:{
            name:'张三',
            age:'18',
            test:{
                math:93
            }
        }
    }
    let doc=document.querySelector('h1')
    let str = doc.innerText
    let value=str.replace(/\{\{(.+?)\}\}/g,(...args)=>{
        return getValue(args[1])
    })
    function getValue(val){
        return val.split('.').reduce((data,currentVal)=>{
            return data[currentVal]
        },data)
    }
    doc.textContent=value
</script>
</body>

在这里插入图片描述

qq_47452289

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue中双大括号替换的简单原理

Vue中双大括号解析的简单原理Vue中主要思路思路就是三步：获取所有节点找到所有 {{ }} 的节点替换 {{ }} 的内容我们这里就简单一点，替换一个节点就可以了，我们先定义一个类似Vue的data对象。<body><h1>{{user.name}}的数学成绩为{{user.test.math}}</h1><script> // 模仿Vue中的data属性，为一个对象 let data={ word:'he
复制链接

扫一扫