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. 十进制转化十六进制 && 各类进制转换问题详解

    问题描述 十六进制数是在程序设计时经常要使用到的一种整数的表示方式.它有0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F共16个符号,分别表示十进制数的0至15.十六进制的计数方法是满1 ...

  2. function 和mapped function的区别

    1 --在函数定义上使用mapped前缀将此函数标记为自动映射到集合上.这意味着,如果将集合作为函数的第一个参数,则该函数将在集合的元素上自动重复调用.这允许您定义脚本化函数,这些函数的行为方式与映射 ...

  3. 前端下载csv文件

    var str = [ 'ssssssssssssssssssssssssssssssssssssssss' ]; var uri = 'data:text/csv;charset=utf-8,%EF ...

  4. cenots7 rpm 包升级ssh

    rpm下载地址 也可以自行官网下载 链接: https://pan.baidu.com/s/1S945MehpmZbIriKK6l7Sfw 提取码: y5ua centos7rpm包升级ssh 逻辑思 ...

  5. canvas 学习笔记

    1.利用上下文对象进行绘制画笔 var canvas=canvas.getContext('2d') 2.绘制路径 canvas.rect(30,30,300,300) 3.填充 canvas.fil ...

  6. ubuntu18.04 安装cython_bbox

    方式一: pip install cython_bbox 方式二:下载地址 https://github.com/samson-wang/cython_bbox 解压后并cd cython_bbox- ...

  7. 解决windows环境TIM无法修改个人文件夹位置

    原文在这里,我做了一下整理并方便下次找到 步骤如下 进入C:\Users\Public\Documents\Tencent\QQ文件夹下(没有则创建),创建UserDataInfo.ini文本文档 编 ...

  8. NXOpen获取UFUN的tag

    #include <NXOpen/NXObject.hxx>#include <NXOpen/NXObjectManager.hxx> 1 NXObject* nXObject ...

  9. [iOS]获取地理位置信息

    1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Descrip ...

  10. SDN第二次实验

    一.实验目的能够对Open vSwitch进行基本操作:能够通过命令行终端使用OVS命令操作Open vSwitch交换机,管理流表:能够通过Mininet的Python代码运行OVS命令,控制网络拓 ...