学习VUE第十四天课程（VUE之组件（VUE之内置指令知识扩充（文本渲染指令VS插值表达式））

矫情吗；* 2023-05-29 05:22 120阅读 0赞

# VUE之内置指令知识扩充（文本渲染指令VS插值表达式） #

## 文本渲染指令v-text ##

文本渲染指令：  
这里补充个vue基础指令v-text文本渲染指令，v-text取值为数据data中某项时，便以文本形式渲染到DOM中  
场景：  
如果想单纯展示vue对象中的数据，可以使用文本渲染指令v-text![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

## 插值表达式\{ \{\}\}对比v-text ##

（1）是否显示虚拟DOM即virtual dom  
验证后发现两者渲染结果完全一样，页面元素也一样。

区别：  
但是如果你把网速调的很慢会发现，“v-text”这个属性在页面数据加载没完成的时候不会出现“\{ \{ info \}\}”的现象  
所以说v-text在解析时不会显示虚拟DOM，而插值表达式则会显示虚拟DOM，如果不想显示则需要借助v-cloak遮罩指令

## 插值表达式\{ \{\}\}对比v-text ##

（1）是否显示虚拟DOM即virtual dom  
验证后发现两者渲染结果完全一样，页面元素也一样。

区别：  
但是如果你把网速调的很慢会发现，“v-text”这个属性在页面数据加载没完成的时候不会出现“\{ \{ info \}\}”的现象  
所以说v-text在解析时不会显示虚拟DOM，而插值表达式则会显示虚拟DOM，如果不想显示则需要借助v-cloak遮罩指令  
（2）是否替换和更新  
这时候有的人可能提出质疑，有这个了为什么还要用插值表达式\{ \{\}\}？  
修改代码如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

# 小结 #

**区别：  
1、编译过程是否显示虚拟DOM  
2、是否替换和更新,v-texrt  
场景推荐：  
1、如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-cloak”属性一起使用。  
2、如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。**

## 如有问题琥珀这疑问请留言联系小编！！！！！ ##

## 感谢来访！！！！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104184439588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104184541432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70