vue在html中出现{{}}原因及解决办法

2020-12-14 11:28:01 查看 1853 回复 0

阅读全文

场景：优化以前就项目，部分页面改为vue渲染。
问题：页面渲染可以明显看到{{}}等闪现。

以为这是渲染先后的问题，无法避免的。
以前做法就是数据渲染前加v-if 判断。然后整块渲染。

其实官方文档又给出解决办法，只是当时学习的时候，走马观花，没有仔细的阅读文档和demo例子。
其实解决办法还挺多的。
现在来复现下问题：

<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<p>{{ message }}</p>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>

这样写的话，就会出现{{}}一闪的情况；

原因：html的加载顺序；

　　解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。

　　所以，当html加载的时候，就会把{{}} 当成文本加载出来，当vue初始化完成后，才会把{{}}解析成vue的语法。

　　如果把引入vue.js的script放到head里面，那页面不会出现{{}}，因为在body之前就把vue引入进来了，vue加载完成了。

解决办法：

1、使用 v-cloak指令<div v-cloak>{{msg}}</div>
这个指令保持在元素上知道关联实例结束编译 https://cn.vuejs.org/v2/api/#v-cloak；

2、使用 v-html指令

3、使用 v-text指令

4、使用template标签将需要渲染的 html 包起来

HTML <template> 元素是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。