v-once、v-clock、v-pre

最新推荐文章于 2024-06-27 22:42:30 发布
最新推荐文章于 2024-06-27 22:42:30 发布
阅读量371 收藏 4
点赞数 6
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libingjiedd/article/details/138170177
版权
本文介绍了Vue.js中的v-once指令，它用于只渲染一次元素，提升更新性能；v-cloak指令用于在网络加载延迟时隐藏Vue源码；v-pre指令跳过编译，显示原始模板。这些特性有助于提升用户体验和开发效率。
摘要由CSDN通过智能技术生成

v-once指令只渲染元素和组件一次，随后的渲染，如果使用了此指令的元素、组件及其所有子节点，则都会当作静态内容并跳过。这个特性可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
</head>
<body>
   <div id="app">
   	<p> <input type="type" v-model="message"/></p>
   	<p v-once> 只渲染一次: {{message}} </p>
   	<p> 可以改变: {{message}} </p>
   </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message :"Hello"
            }
        })
    </script>

</body>
</html>

在浏览器中运行的效果如图所示:
在这里插入图片描述
运行上面的示例代码，当打开浏览器页面时，DOM元素中的{ {message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。

2.v-cloak

v-cloak指令将会保持在DOM元素上，直到关联实例结束编译后自动移除。v-cloak指令的使用场景非常有限，常用于解决网络较慢时数据的加载问题。用户在访问Vue.js实现的网站时，如果网络延迟，网页还在加载Vue.js，便会导致Vue来不及渲染，这时页面就会显示出Vue源代码，我们就可以使用v-cloak指令来解决这一问题。

  <div id="app">
		{{message}}
   </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message :"hello world"
            }
        })
    </script>

当网络较慢时，在浏览器中打开页面，此时会在页面中出现Vue源码，直到Vue.js加载完成并编译之后，才会显示正常的数据内容blog.csdnimg.cn/f79172fa6b6c48e280f09e6bb1709178.png" alt="在这里插入图片描述" />
为了解决上面代码运行的问题，我们可以为DOM元素添加v-cloak指令，并使用属性选择器为指定的DOM元素设置隐藏样式。v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。

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

<div id=“app”>
{ { message}}
</div>

3.v-pre

v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译，代码如下：

<span v-pre>{{this will not be compiled}}</span>
冰糖雪梨dd
关注
coderwhy前端课程笔记|vue基础教程|v-memo,v-pre,v-clock,v-html,v-once,v-text,v-bind绑定属性，基本属性，class,style属性，musta
VAN
04-13 39
在开发中，有时候我们的元素class也是动态的，比如：当数据为某个状态时，字体显示红色。当数据另一个状态时，字体显示黑色。绑定class有两种方式：对象语法数组语法对象语法：我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。--1.普通的绑定方式.<--2.对象绑定。-->:<--动态切换class是否加入：[类（变量）:[类（变量）:boolean(true/false]]-->--3.案例练习。-->
【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】013 - arch\arm\lib\crt0_64.S 汇编源码逐行详解
最新发布
|~~~热爱生活、努力学习的小伙汁~~~|
06-30 313
【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】013 - arch\arm\lib\crt0_64.S 汇编源码逐行详解
v-cloak 指令,v-once 指令,v-pre 指令,事件修饰符,v-model原理 ,自定义指令，二级联动
XCXLOVE_的博客
03-17 1077
/ 使用时要v-自定义名称// 函数写法// 名称(节点,绑定对象){}// 对象写法// 名称:{// 绑定成功调用// bind(节点,绑定对象){},// 插入到页面调用// inserted(节点,绑定对象){},// 重新解析时调用(值发生改变)// update(节点,绑定对象){}// }2.局部自定义指令//directives ,写入Vue实例中// .全局自定义指令// Vue.directive ,定义在实例化之前<body>
关于Vue的学习—v-once、v-clock、v-pre
衍生星球的博客
07-20 320
v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。
VUE——v-once指令
汪汪汪汪
03-07 435
仅渲染元素和组件一次，并跳过之后的更新。'关于v-once的用法'
【Vue】没有v-clock 只有 v-cloak！
南乡人的博客
12-18 975
如题
Vue技术—v-once指令
u013140948的博客
12-29 238
v-once指令： 1.v-once所在节点在初次动态选然后，就视为动态内容了， 2.以后数据的改变不会引起v-once所在结构的变更，可以用于优化性能 <div id="root"> <h2 v-once>当前n的值时：{{n}}</h2> <h2>当前n的值时：{{n}}</h2> <button @click='n++'>点我n+1</button> </div> <script> ne
基于Q-Learning 的FlappyBird AI
BENULL的博客
12-27 1864
基于Q-Learning 的FlappyBird AI 在birdbot实现的FlappyBird基础上训练AI，这个FlappyBird的实现对游戏进行了简单的封装，可以很方便得到游戏的状态来辅助算法实现。同时可以显示游戏界面方便调试，能够看到算法实现的效果。也可以选择关闭游戏界面以及声音，这样游戏仍然能正常运行，一般用于训练阶段，可以减少CPU的占用 实现参考的是SarvagyaVaish的Flappy Bird RL Q-Learning Q-Learning是强化学习算法中value-based的算
Vue学习
qq_45000823的博客
10-21 248
<div id="root"> <!-- 双向数据绑定只适合有value属性的输入框 --> 单向数据绑定<input type="text" v-bind:value="name"><br> <!-- v-bind：value可以简写：vaue --> <!-- v-model：value可以简写为v-model --> 双向数据绑定&
Vue 学习总结笔记 (四)
m0_67401270的博客
03-09 229
文章目录 1. 使用Vue 写一个表单数据 2. Vue 过滤器 2.1 moment.js 和 day.js 的库 2.2 Vue的 过滤器的使用 3. v-text 指令 4. v-html 指令 (谨慎使用！！！) 4.1 cookie 工作原理 4.２ v-html 指令 5. v-clock 指令 6. v-once 指令 7. v-pre 指令 8. Vue的 自定义指令 8.1 设置自定义指令的 两种方式 8.2 自定义指令的 element参数 和 binding参数
vue常用指令v--clock，v-pre，v-once等
weixin_44767805的博客
06-27 972
vue常用指令v-clock，v-pre，v-once,v-model以及双向绑定实现父子组件通信
vue_的基本格式
liu1992452008的博客http://write.blog.csdn.net/configu
11-18 784
fgffd{{msg}} 对对对{{msg}} new Vue({ el:'#app', data:{ msg:'今天的天气很好' } })
Vue的常用指令之v-once
Mr_xiaoxuboke的博客
05-19 176
说明： v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。 代码如下： <div id="app"> <h2 v-once>{{msg}}</h2> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: "#app", data() {
Vue指令---v-clock
热门推荐
踏步修行
05-16 1万+
v-clock解决页面闪烁问题 如果网速慢，而该标签内容是变量没有请求响应回来的时候，页面上先不显示该标签（vue给该标签加了css样式），当响应回来的时候改标签默认将css样式去除。此指令可以解决使用差值表达式页面闪烁问题 将该指令加在html标签中时，可以在该文件中加style属性为display：none，例子如下： <div class="#app" v-cloak> ...
Vue系列之指令 v-once
老__L的博客
12-18 519
v-once指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。v-once是一个不需要表达式的指令。
说说 Vue.js 中的 v-once 指令
weixin_34417200的博客
11-17 551
被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。 html： &lt;div id="app"&gt; &lt;div v-once&gt; {{content}} &lt;/div&gt; &lt;/div&gt; 复制代码js： &lt;script...
Vue技术 v-once指令（表示其内容只会被渲染一次）
weixin_55772633的博客
07-11 3889
指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。用法如下： 在上面的示例中， 指令应用在 元素上，并绑定了 数据。一旦 数据的值发生变化，被标记为 的 元素将保持原始的内容，不再更新。当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变 2.总结
vue中v-once
cmolong的博客
03-08 2718
v-once 作用： 执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v...
v-once命令
qq_44822110的博客
03-16 224
v-once命令 v-once 只编译一次，显示的信息不再修改，可以使用此指令， 提高性能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值