vue模板解析 --- 大括号表达式

最新推荐文章于 2025-10-13 20:44:04 发布

原创

最新推荐文章于 2025-10-13 20:44:04 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了Vue中大括号{{}}如何解析为data中的数据。通过调试，文章揭示了从获取表达式、查找data中的对应值，到替换HTML内容的基本步骤。在Vue的complie.js文件中，详细解释了如何将模板转换并更新为实际的数据值。

我们在页面中书写 { {}}，为什么可以转换为 data 中的数据呢？我们可以进行调试来看看代码做了什么事情？

先总结基本的步骤：

拿到大括号里面的表达式；
在 data 中找到对应的值；
然后把值代替到大括号的位置；

html 结构为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板解析</title>
</head>
<body>
	<div id="app">
		{
  
  {name}}
	</div>
	
<script src="./bil/mvvm.js"></script>
<script src="./bil/compile.js"></script>
<script src="./bil/observer.js"></script>
<script src="./bil/watcher.js"></script>
<script>
	new MVVM ({
    
    
		el: '#app',
		data: {
    
    
			name: '你好'
			}
		})
</script>
</body>
</html>