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. django-drf知识点梳理

  2. Visual Studio Code 使用总结

      记录一下个人在使用 VS Code 中的一些插件和设置.   该配置在编写 vue + iview 项目时使用. 文件路径 用户文件路径:%AppData%/Code/User 用户设置:sett ...

  3. 内网Linux下安装Nginx1.23，添加stream模块实现tcp/udp代理转发

    环境:centos7.6 ngx_stream_core_module 这个模块在1.9.0版本后将被启用.但是并不会默认安装,需要在编译时通过指定 --with-stream 参数来激活这个模块,w ...

  4. QML与python互相通信

    解决python与QML的通信问题: QML中直接调用python函数 python发送信号,QML响应信号并进行相应处理 py文件 # This Python file uses the follo ...

  5. jumpserver运行源码

    本文运行流程介绍来自jumpserver版本号:v2.23.2 入口文件 run_server.py run_server中通过subprocess.call,用python3运行了同级目录下jms, ...

  6. Mysql-不同场景下操作/查询数据库表

    1. 通过关联字段把一张表的字段值更新另一张表的字段值 update table_a a, table_b b set a.username = b.username where a.id = b.i ...

  7. 「SOL」网络流flow (模拟赛)

    题面 给定一张分层有向图,有 \(n\) 层,每层有 \(m\) 个点.只有从第 \(i\) 层的点连向第 \(i + 1\) 层的点的连边. 记 \(A(i,j)\) 表示从第 \(i\) 层的某些 ...

  8. my.ini

    [client] #客户端设置,即客户端默认的连接参数 # socket = /data/mysqldata/3306/mysql.sock #用于本地连接的socket套接字 # 默认连接端口 po ...

  9. 如何进行多平台部署Client和Server详细讲解

    一:signalR把console用做客户端访问服务端方法 1:新建一个控制台应用程序(ClientConsole) 2:用nuget安装SignalR.Client(必须,下面是nuget命令) I ...

  10. 语法——包、权限修饰符、final

    一.包 1.什么是包? 包是用来分门别类的管理各种不同的类的,类似于文件夹,建包有利于程序的管理和维护. 建包的语法格式: package 公司域名倒写.技术名称.包名建议全部英文小写,且具备意义. ...