Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)

在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍：

一、插值表达式

插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义：
通过Vue提供的指令即可很方便地将数据渲染到页面上无需手动操作DOM元素了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入Vue --><script src="./lib/vue-2.4.0.js"></script>
</head>
<body><div id="app"><p>{{msg}}</p></div><script>var vm=new Vue({el:"#app",data:{msg:"Hello Vue!"}})</script>
</body>
</html>

由于插值表达式的语法是{{}} 像是一撇胡子因而也被称为mustache胡子表达式

二、v-clock

插值表达式存在闪烁的问题
在网速卡的情况下加载插值表达式时页面会显示{{xxx}} 当页面加载好了才会显示内容影响美观

此时可添加v-cloak属性以解决插值表达式{{}}闪烁的问题

<div id="app"><!-- 解决插值表达式闪烁的问题 --><p v-cloak>{{msg}}</p>
</div>

然后给v-clock添加一个css样式即可：

<style>[v-cloak]{display: none;}
</style>

这样在网速卡的情况下插值表达式不会被显示出来会被display:none隐藏等页面加载完了直接显示内容

三、v-text

v-text的效果和{{}}插值表达式差不多都是显示数据

<div id="app"><h4 v-text="msg"></h4>
</div>

<script>var vm=new Vue({el:"#app",data:{msg:"Hello Vue!"}})
</script>

v-text和插值表达式的区别是：
v-text不会有闪烁问题
因为并没有在里面写表达式而是加在属性里

但插值表达式也有其优点：
插值表达式可以在前后加上任意内容：
例如：

<p v-cloak>---{{msg}}---</p>

因为插值表达式只会替换自己的占位符不会影响其它内容
而v-text会覆盖元素中原本的内容

四、v-html

若要渲染HTML标签 v-text是不行的因为v-text并不会转义Html标签
这会导致Html标签被原原本本的显示到页面上

此时需要用到v-html：
类似于Thymeleaf的th:utext属性会对Html标签进行转义

<!-- v-html可以转义html标签 -->
<div v-html="msg"></div>

<script>var vm=new Vue({el:"#app",data:{msg:"Hello Vue!"}})
</script>