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. allure安装配置

    代理节点配置allure 下载allure https://repo.maven.apache.org/maven2/io/qameta/allure/allure-commandline 配置环境变 ...

  2. C#-out和ref 参数修饰符

    参数修饰符: 无参数修饰符:如果一个参数没有任何参数修饰符修饰,那么认为它是值传递,意味着方法内部收到的是实参数据的副本 out:输出参数由方法内部进行赋值,(引用传递),如果方法内部没有给被out修 ...

  3. CORScanner-20211125

    Usage: cors_scan.py [-h] [-u URL] [-i INPUT] [-t THREADS] [-o OUTPUT] [-v] [-d [HEADERS [HEADERS ... ...

  4. 关于Python 面向对象寻值的问题. How the number be found in the OOP in Python

    今天在看Python面向对象的时候看到了一个很有意思的问题 Today. When i learning the OOP in python , I found a very interesting ...

  5. Linux 软件包 管理

    rpm.deb包管理操作 yum.apt/apt-get线上管理操作 查找软件包 $ yum search [name|info] $ apt-cache search [name|info] 安装软 ...

  6. openGL 学习笔记 （一） 了解 OpenGL，创建第一个OpenGL窗口

    // 序章最开始我以为OpenGL是一系列的API,他给出了一系列对计算机图像的操作接口.但其实OpenGL其实并不是一个API,他是由khronos组织制定并维护的规范. 早期的OpenGL使用立即 ...

  7. CSP202104-4 校门外的树

    设状态时,首先从简单状态设起: 一维不行再试二维.简单状态应付不了再设复杂的(因为某些状态可以体现在状态转移的过程中,或者说状态转移方程中,不一定体现在原式中) E.g. 计算机软件能力认证考试系统- ...

  8. mysql5.7 不兼容问题

    通过navicat工具导入psc数据库备份文件,报错如下,mysql版本5.7 执行如下语句不通过 DROP TABLE IF EXISTS `guard_user`; CREATE TABLE `g ...

  9. 微信支付模式二java

    这个星期写了下微信支付模式二,在这里进行下整理 微信支付官方文档 1. 需要的配置..具体看下面的链接. https://pay.weixin.qq.com/wiki/doc/api/native.p ...

  10. 通过一个简单的实例来展示 Java 编程，创建文件 HelloWorld.java

    public class HelloWorld { public static void main(String[] args) { System.out.println("Hello Wo ...