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. [后端-python实战总结]-chapter1-python基础01

    1.1 week 1 > 密码秘文: import getpass username = input('username:') passwd = getpass.getpass('passwd: ...

  2. CVE-2013-2566 SSL/TLS RC4 信息泄露漏洞 修复方案

    详细描述 安全套接层(Secure Sockets Layer,SSL),一种安全协议,是网景公司(Netscape)在推出Web浏览器首版的同时提出的,目的是为网络通信提供安全及数据完整性.SSL在 ...

  3. python + unittest + request + parameterized 参数化遇到中文名称testcase不显示的问题

    最近使用python+unittest+request+parameterized做接口测试,然后在利用parameterized做参数化时,发现测试用例的中文名称,感觉很奇怪,于是跟踪了parame ...

  4. 前端记录：树形插件zTree 和 表格扩展 tableX

    树形插件zTree 表格扩展 tableX 项目实例 [地区联动实现_前端] <title>区域设置</title> <!--当前位置开始--> <div c ...

  5. BlendCAC: A Smart Contract Enabled Decentralized Capability-Based Access Control Mechanism for the IoT

    摘要 BlendCAC,它是一种分散的.基于联合能力的 AC 机制,可有效保护大规模物联网系统中的设备.服务和信息.引入了基于联合能力的委托模型 (FCDM) 以支持分层和多跳委托.探索了委托授权和撤 ...

  6. Linux 第八节(防火墙 )

    -------------------iptables-------------------------- RHEL 5 6 7.0 7.1 iptable RHEL 8 firewall FORWA ...

  7. WPF检测设备变化

    如果在构造函数中设置会出现为空 HwndSource source = PresentationSource.FromVisual(this) as HwndSource; 此时 source = n ...

  8. argocd

    argocd Argo CD - Declarative GitOps CD for Kubernetes (argo-cd.readthedocs.io) What Is Argo CD Argo ...

  9. Linux环境下给python项目写个启停服务

    写个服务,写完后放在/lib/systemd/system路径下 update_rule.server [Unit] Description = TinyScan update rule [Servi ...

  10. Raize

    Raize.v5和Raize.v6 本人在windows10下装有delphi7和delphi2010,安装好Raize.v6后,两个版本delphi的控件页都找不到Raize控件,即使想编译相应的D ...