首页 > 其他分享 >Vue v-once指令 和 v-pre指令

Vue v-once指令 和 v-pre指令

时间:2023-02-15 22:13:17浏览次数:36  
标签:pre Vue 所在 指令 节点 once

v-once指令:

1、v-once 所在节点在初始化动态渲染后,就视为静态内容了

2、以后数据的改变不会引起v-once所在结构的更新,可用于优化性能

v-pre指令:

1、跳过其所在节点的编译过程

2、可利用它跳过没有使用指令语法、没有使用插值语法的节点,会加快编译

v-once案例:

<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3 v-once>初识的值:{{n}}</h3>
        <h3>当前的n值是:{{n}}</h3>
        <button @click="n++">点我,n+1</button>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            n:1,
        }
    })
</script>

 

标签:pre,Vue,所在,指令,节点,once
From: https://www.cnblogs.com/technicist/p/17124913.html

相关文章

  • vue基础:js的几种循环方式、key值的解释、数组,对象的检测与更新、input事件、v-model双
    目录一、js的几种循环方式1.1v-for可以循环的变量1.2js的循环方式二、key值的解释三、数组,对象的检测与更新四、input事件五、v-model双向数据绑定六、过滤案例七、事件......
  • vue-3
    js的几种循环方式v-for可以循环的变量可以循环的有数组,对象,字符串,数字<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</titl......
  • vue_day03
    今日内容1js的几种循环方式1.1v-for可以循环的变量<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc......
  • VUE简单实用
    目录v-for的循环方式原生js的循环方式v-for中key值方法的解释vue中数组和对象的检测更新input事件v-model双向数据绑定过滤案例箭头函数事件修饰符按键修饰符Input表单控制......
  • vue框架3
    js的几种循环方式1.v-for可以循环的变量 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vu......
  • vueday3
    昨日回顾#1mvvm演示#2插值语法{{}} -三目运算符条件?'':''#3文本指令 -v-xxvue的指令,放在标签上<pv-xx></p>-v-text='变......
  • vue3
    今日内容概要js的几种循环方式key值的解释数组对象的检测与更新input时间v-model双向数据绑定过滤案例事件修饰符按键修饰符表单控制今日内容详细js几种循环......
  • Axios-Vue
    axios中文文档安装npmiaxios基本使用引入importaxiosfrom'axios';使用//GET请求axios({method:'get',url:'http://api/'}).then(res=>{c......
  • vue基本操作
    1js的几种循环方式1.1v-for可以循环的变量<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vu......
  • Vue的基础操作
    目录Vue的基础操作js的几种循环方式v-for可以循环的变量js的循环方式key值的解释数组,对象的检测与更新input事件v-model双向数据绑定过滤事件事件修饰符(了解)按键修饰符单......