key:用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。

常用姿势:

1、结合 v-for,有相同父元素的子元素必须有唯一key。

<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>

2、强制替换元素/组件而不是复用它。

使用场景:

  • 完整地触发组件的生命周期钩子
  • 触发过渡

下例中,当 text 发生改变时,<span> 会被更新,因此触发过渡。

<transition>
<span :key="text">{{ text }}</span>
</transition>

ref:给元素或子组件注册引用,在普通的DOM 元素上使用,引用指向的就是 DOM 元素;在子组件上,引用指向组件实例,通过父实例的 $refs对象访问引用。

v-for 用于元素或组件的时候,引用是包含 DOM 节点或组件实例的数组。

注意:

1、ref 是作为渲染结果被创建的,在初始渲染的时候不存在,所以不能访问。

2、$refs 不是响应式的,不应该用它在模板中做数据绑定。

is:用于动态组件且基于 DOM 内模板的限制来工作。

组件或者dom的特殊属性的更多相关文章

  1. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  2. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  3. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  4. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  5. HTML DOM 的nodeType属性

    在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...

  6. js 获取DOM的style属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DOM常用的属性和方法

    之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...

  8. DOM相关方法,属性整理

    DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...

  9. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

随机推荐

  1. echarts 配置

    堆叠柱状图, 只要保证 stack 属性相同,就强制画成一列 这就是切割线

  2. [Alpha阶段]第八次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第八次Scrum Meeting 基本信息 名称 时间 地点 时长 第八次Scrum Meeting 19/04/12 新主楼F座2楼 35min ...

  3. 01构建第一个SpringBoot工程

    第一篇:构建第一个SpringBoot工程 文章指导 学习笔记 学习代码 创建项目 创建工程:Idea-> new Project ->Spring Initializr ->填写g ...

  4. Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述—— 隐鹤

    Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述——    隐鹤 1. 引言 Excel任务窗格是一个可以用来存放各种常用命令的侧边窗口(准确的说是一个可以停靠在类名为x ...

  5. To B Vs To C

    谈谈 To B 业务的难点https://tangjie.me/blog/259.html

  6. java篇 之 类型转化

    类型转换时,如果最初的数值类型是有符号的,那么就执行符号扩展:如果它是char,那么不管将要被转换成什么类型,都执行零扩展 代码执行顺序是从上至下,从右至左 强制转换: Int a =(int)(sh ...

  7. Nginx HTTP变量原理

    L:72 首先如何获取url追加参数值 如: http://www.xxx.com?a=1&b=2 return '$arg_a, $arg_b'; #通过前缀 arg_a 就能获取到 参数a ...

  8. centos 桌面没有有线设置,不能上网

    1.ifconfig 发现缺少网卡 ensxx 2.cd /etc/sysconfig/network-scripts/  发现有网卡ens的配置文件,只是没有启动 3.ifconfig -a 发现有 ...

  9. Quartus16.1布线优化选择,重编译可能会满足时序

    流程 (1)在默认的优化编译下,时序违例. (2)在assignments中选择setting. (3)根据需求,选择不同的优化方式,目前选择性能优先. (4)可以发现时序满足要求. 以上.

  10. 【SEERC2018A】【XSY3319】Numbers

    给你一个数 \(n\),求有多少种方案能把 \(n\) 分成两个非零回文数 \((a,b)\) 之和. 两个方案不同当且仅当 \(a_1\neq a_2\). \(n\leq {10}^{18}\) ...