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

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

  1. 获取所有节点
  2. 找到所有 {{ }} 的节点
  3. 替换 {{ }} 的内容

我们这里就简单一点，替换一个节点就可以了，我们先定义一个类似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>

在这里插入图片描述

# javascript # vue.js # es6 # html5
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue