Vue v-once指令 和 v-pre指令
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指令的更多相关文章
- Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- Vue中v-on的指令以及一些其他指令
1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...
- Vue.js学习 Item13 – 指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- Vue.js表单校验；动画指令；避免内存泄露。
Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...
- vue入门：（模板语法与指令）
vuejs使用及HTML的模板语法,可以实现声明式将DOM绑定至底层VUE实例的数据.通过模板语法将数据渲染进DOM的系统,结合响应系统,在应用状态改变时,Vue能够计算出重新渲染组件的最小代价并应用 ...
- 【Vue】通过自定义指令回顾 v-内置指令
Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...
- 前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...
- 手写vue中v-bind:style效果的自定义指令
自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
- vue第十三单元(指令的作用，指令的钩子函数)
第十三单元(指令的作用,指令的钩子函数) #课程目标 1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数 #知识点 #一.认识自定义指令 除了核心功能默认内置的指令 ( ...
随机推荐
- VMware-包体选择
3.二进制包如何选择3.1选择适合当前系统的版本号: ●找不到适合的,才去尝试别的系统版本号 ●el6兼容el5; el5无法安装el63.2选择适合cpu的架构: ●x86_ _64包 ...
- AI步枪
最近正在看利用深度学习进行图像处理的资料,神经网络的确是太枯燥了,看不下去了就刷会手机.这几天推荐给我的新闻都是漂亮国又发生校园枪击事件了,不知道推荐算法是怎么认定我对这个话题感兴趣的.这算是老生常谈 ...
- canvas实现屏幕截图
1.引入html2canvas.js 2.调用 2.1 <script src="html2canvas.js"></script> 2.2 定义一个div ...
- VUE学习-自定义指令
自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. <div id="directive-demo"> <input ...
- WDA学习（26）：Phase Indicator使用
1.19 UI Element:Phase Indicator使用 本实例测试创建Phase Indicator; 运行结果: 1.创建Component,View: V_PHASE_IND; 2.创 ...
- 蓝牙mesh消息包与以太网帧的分层构成
目录 笔者在接触以太网之前,先了解的是蓝牙mesh的各类信息.现翻看一本介绍TCP/IP协议的资料,发现应用层数据在以太网协议栈内的封装过程与蓝牙mesh协议栈内的封装过程异曲同工.下图左侧是手头这本 ...
- SVN 提交失败 Unexpected HTTP status 200 'OK' on 'PUT' request to
提交SVN 时 提示 Commit Failed Unexpected HTTP status 200 'OK' on 'PUT' request to 旧的文件在SVN 上也无法删除,删除文件 ...
- Ubuntu18.04LTS虚拟机优化
1.没网 刚安装好没网,可以设置NAT连接,也可以直接设置为桥接模式联网.这里直接桥接. 网络中心使用的是以太网,所以就在菜单的"编辑"里的"虚拟网络编辑器"里 ...
- hadoop服务异常，磁盘坏道critical medium error,dev sdh,sector xxxx
运行spark之后,部分任务失败,排查查看操作系统日志(/var/log/message),发现磁盘坏道,导致服务异常.异常主要错误"critical medium error,dev sd ...
- 负载均衡集群ipvsadm常见参数以及基本用法
---- 固定调度 rr:论调 wrr:加权论调 weight,加权 sh:source hash ,源地址hash 动态调度lc:最少链接 active*256+inactivewlc:加权最少链接 ...