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>

Vue v-once指令 和 v-pre指令的更多相关文章

  1. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  2. Vue中v-on的指令以及一些其他指令

    1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...

  3. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  5. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  6. vue入门：（模板语法与指令）

    vuejs使用及HTML的模板语法,可以实现声明式将DOM绑定至底层VUE实例的数据.通过模板语法将数据渲染进DOM的系统,结合响应系统,在应用状态改变时,Vue能够计算出重新渲染组件的最小代价并应用 ...

  7. 【Vue】通过自定义指令回顾 v-内置指令

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...

  8. 前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...

  9. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  10. vue第十三单元(指令的作用，指令的钩子函数)

    第十三单元(指令的作用,指令的钩子函数) #课程目标 1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数 #知识点 #一.认识自定义指令 除了核心功能默认内置的指令 ( ...

随机推荐

  1. SAP 开具发票的抬头文本带到会计凭证上

    #需求 将开具发票的抬头文本带到会计凭证上.方便财务处理凭证,不然需要再去编辑凭证,容易遗忘. 达到的效果如图所示: #二代增强SDVFX001 事务码cmod分配增强 编写增强出口 代码如下: DA ...

  2. vue移动端禁止弹层穿透、点击元素滚动到视图中心杂文日志

    一,需求是在无限列card加载页面,点击任何一个card的显示图表按钮,图表自适应居中显示,显示遮罩层,页面可以滑动,但不能穿透点击 一个无限列表加载页面设置遮罩层一般需求是页面不能滑动的,但这比较特 ...

  3. Java面向对象之Object类

    Object类 Object类是所有Java类的根父类 如果在类的声明中未使用extends关键字指明其父类,则默认父类为java.lang.Object类 Object类中的功能(属性.方法)就具有 ...

  4. 一些excel随笔，瞎记一下

    1 使用sumif函数的时候,如果对于一列0求值返回的时候,显示一个英文中的破折号例 "-" ,是数字格式可能设置为了会计专用,改回数值就行,要逗号的话点其他格式里面的数值,找一下 ...

  5. 02. C语言基础知识

    一.注释   注释 就是对代码进行解释说明的文字,注释的内容不会参与编译和运行,仅仅是对代码的解释说明.在 C语言 中注释主要分为以下两类: 单行注释://,注释内容从 // 始到本行和结尾 多行注释 ...

  6. float高度塌陷和BFC

    开启BFC方式: 1.设置浮动float(副作用比较大,不推荐) 2.将元素设置为行内块元素 display:inline-block:(不推荐) 3.将元素的overlfow设置为非visible的 ...

  7. java NIO原理和代码实践

    一,先说java IO 1,线程阻塞:当线程调用write()或read()时,线程会被阻塞,直到有一些数据可用于读取或数据被完全写入. 2,面向流: 我们需要从流中读取一个或多个字节.它使用流来在数 ...

  8. KingbaseES V8R6备份恢复案例之---自定义表空间指定恢复目录数据恢复

    案例说明: KingbaseES V8R6在通过sys_rman执行物理备份恢复时,可以通过参数'--kb1-path',指定恢复的数据(data)目录,但如果原备份中包含自定义表空间时,需要建立表空 ...

  9. 手机、ESP32单片机、MQTT服务器连接实验

    实验目的:通过自己制作的手机APP,连接MQTT服务器,获取ESP32单片机的温湿度信息,控制ESP32单片机上的LED开关. 实验准备: 1.硬件:ESP32开发板(型号不限,esp01s也可以). ...

  10. 51电子-STC89C51开发板：目录

    51电子(我要电子:www.51dz.com),是国内最早一批的电子类相关网站,在深圳有实体店. 这个系列文章以 STC89C51 来做笔记,讲解使用过程. --------------------- ...