上一篇说到插值表达式有一个问题:

页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据。

对于这个问题Vue给予了解决办法,看具体事例。

<div id="app">
<p v-cloak> {{ msg }} </p>
</div>

节点中我们定义了 Vue 的内置属性 “v-cloak”

    <style type="text/css">
[v-cloak]{
display:none;
}
</style>

这里我们定义了样式:包含属性“v-cloak”的节点默认隐藏

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

创建Vue对象,并与id为“app”的节点绑定。

这时如果再在页面访问发现:如果页面加载很慢的时候,不会再出现“{{ msg }}”信息,直接是一片空白,当Vue数据传递完成时,会正确显示数据。

从上面运行截图可以分析出:

Vue在页面数据传递时,如果一开始插值表达式获取不到数据,那么包含“v-cloak”属性的节点就会执行“display:none”样式,导致页面什么也看不到,当插值表达式获取到数据之后,就会在节点中自动移除“v-cloak”属性,这时样式也就不起作用了,展示了正常的数据。这时有的看官就会抱怨尤雨溪大神了,整这么多事干嘛?能一下都解决了吗?

接下来,我们来学习另一个指令:v-text

    <div id="app">
<p v-cloak> {{ msg }} </p>
<p v-text="msg"></p>
</div>

执行代码

结果完全一样,页面元素也一样。但是这时候你把网速调的很慢会发现,“v-text”这个属性在页面数据加载没完成的时候不会出现“{{ msg }}”的现象。这时候有的看官又会提出质疑,有这个了为什么还要用插值表达式?

且往下看,上代码:

    <div id="app">
<p v-cloak> 这是从Vue对象里获取的数据:{{ msg }} </p>
<p v-text="msg">这是从Vue对象里获取的数据:</p>
</div>

运行结果:

结论:插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。

总结:

1、如果要同时展示用户前台数据,那么就需要用插值表达式,但是不要忘记和“v-cloak”属性一起使用哦。

2、如果只是单独展示Vue对象里的数据,建议使用“v-text”指令。

弄清原理,根据需求,使用对应的解决方法,我想这是学习最高效的途径!

每天进步一点点!

Vue学习之路第三篇:插值表达式和v-text的区别的更多相关文章

  1. Vue学习之路第十三篇:v-for指令

    v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <spa ...

  2. Vue学习之路第四篇:v-html指令

    上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...

  3. Vue学习之路第十七篇:全局过滤器的使用

    1.过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 Ja ...

  4. 后端开发者的Vue学习之路(三)

    目录 上节内容回顾 组件 什么是组件 组件注册 全局注册组件 局部注册组件 使用细节 组件注册的命名规范: 组件中只有一个根元素 组件也是一个实例 组件在某些元素中渲染出错 组件间的数据传递 父子组件 ...

  5. vue学习指南:第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

  6. Vue学习之路第十一篇:为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  7. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  8. Vue学习之路第十篇:简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  9. Vue学习之路第八篇:事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

随机推荐

  1. 计蒜客 第 m 大的身份证号码 (水)

    链接 : Here! 思路 : 水题 代码 : #include <cstdio> #include <string> #include <iostream> #i ...

  2. [luogu 2324][SCOI 2005] 骑士精神 (A*算法)

    Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2, ...

  3. css下背景渐变与底部固定的蓝天白云

    <?php defined('_JEXEC') or die; JHtml::_('behavior.framework', true); //if(!$templateparams->g ...

  4. Spring学习总结(19)——Spring概念详解

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/EEfull-stack(一 ...

  5. Java Web学习总结(27)——JavaEE中Web服务器、Web容器、Application服务器区别及联系

    在JavaEE 开发Web中,我们经常会听到Web服务器(Web Server).Web容器(Web Container).应用服务器(Application Server),等容易混淆不好理解名词. ...

  6. [Angular] Component's dependency injection

    An Angular service registered on the NgModule is globally visible on the entire application. Moreove ...

  7. 小米2S电池电量用尽充电无法开机解决方法

    背景:        昨晚睡觉前关机,记得电量还有百分之七八十,但早上起床后,指示灯一直红灯闪烁.按开机键和其它键都没反应! ! 解决方法:         扣下电池,用万能充冲电,略微多冲一会,由于 ...

  8. 逆向学习XXclient怎样仅仅执行一个实例

    个人觉得学习分两种, 一种是当面请教和直接从书本网络中的资料学习. 其二就是看着令你惊叹的作品-顿悟. 什么?顿悟不了?那我们就一起来逆向学习吧!差点忘了,我并不打算提供Demo,这并不重要,难道你打 ...

  9. Jasperreport+ireport 实践操作及web应用

    Jasperreport+ireport 实践操作及web应用   学习完jasperreports+ireport,给我感觉深刻,不仅掌握了报表开发技术,还掌握了怎样在web中生成pdf,xls,r ...

  10. Leetcode--easy系列2

    #14 Longest Common Prefix Write a function to find the longest common prefix string amongst an array ...