v-html的作用?
向指定节点中渲染包含html结构的内容。
v-html与插值语法的区别?
(1) v-html会替换掉节点中所有的内容,{{xx}}则不会。
(2) v-html可以识别html结构。
v-html的使用容易导致安全问题,慎用
(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上!
v-cloak的作用?
v-cloak本质是一个特殊属性,Vue实例创建完并接管容器后,v-cloak属性就会被删除。
使用css配合v-cloak使用,可以解决网速慢时页面展示出插值表达式{{xxx}}的问题,即
防止页面加载时出现闪烁问题(解决插值表达式的闪烁问题);
为什么会有闪烁问题?
代码加载的时,会先加载HTML,把插值语法当做HTML内容加载到页面上;当加载完js文件后才把插值语法替换掉,所以网速慢时会出现闪烁的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak</title>
<script src="http://localhost:8080/resource/5s/vue.js"></script>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'丽丽'
}
})
</script>
</html>