Vue指令学习

最新推荐文章于 2022-09-13 13:32:48 发布

Zhu_lin_feng_150

最新推荐文章于 2022-09-13 13:32:48 发布

阅读量154

点赞数

分类专栏：前端框架-Vue 文章标签：前端框架-Vue Vue指令语法

本文链接：https://blog.csdn.net/Zhu_lin_feng_150/article/details/84939015

版权

前端框架-Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.{{}}
插值表达式

2.v-cloak
       在低速网络环境中，vue.js的文件请求速度会很慢，从而导致{{}}插值表达式会在页面中渲染成双花括号。
       使用v-cloak 指令给插值表达式所在元素添加这个属性，然后再配合使用属性选择器[v-cloak]{display:block},这样就可以解决渲染错误的问题了。其原理是，当vue.js下载完成之后，那么vue会自动去除v-cloak这个属性，从而显示出这个标签及标签中的内容。
3.v-text
       v-text没有插值表达式闪烁的问题，该指令与插件表达式的区别：
插值表达式更加灵活，前后可以加上更多的内容如：
       +++++{{msg}}++++，
       而v-text是不具备这种特性的。
4.v-html
       当渲染带有html标签的文本时，如 “<h1>这是一段带html元素的字符串</h1>”，v-text或{{}}插值表达式会将其作为普通字符串进行输出成： “<h1>这是一段带html元素的字符串</h1>”而v-html指令会对html元素进行解析，将其渲染成html代码。

{{}}、v-cloak、v-text、v-html三者在页面中呈现效果及代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-cloak、v-text、v-html</title>
		<style>
			[v-cloak]{
				display: none;
			}
        </style>
        

	</head>
	<body>
		<div class="box">
			<!--当网速比较慢的时候,会先显示{{msg}},再显示king-->
			{{msg}} 
			<br>
			<!-- 使用v-text和v-html可以避免网速慢导致的问题, v-text会将msg对应的值作为整个字符串显示出来-->
			<span v-text="msg"></span>
			<br>
			<!-- v-html可以显示字符串中的标签 -->
			<span v-html="msg"></span>
			<!-- v-cloak配合css样式也能解决网速慢的问题 ,但是同样是直接输出字符串-->
			<span v-cloak>{{msg}}</span>
		</div>
	</body>
	<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
	<script>
		new Vue({
			el:'.box',
			data:{
				msg:'<h3>测试</h3>'
			}
		});
	</script>

页面呈现效果：