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. win7系统IE浏览器主页被搜狗篡改问题的解决方法

    IE浏览器使用一段时间后可能大家就会遇到主页被篡改的问题,篡改之后主页就变成了搜狗页面,我们常用的百度搜索也变成了搜狗搜索,这不仅使得我们操作起 来不习惯,使用起来也会感觉非常别扭.那如果在使用IE浏 ...

  2. 电梯调度编写(oo-java编程)

    第二单元的问题是写一个关于电梯调度的程序. 需要模拟一个多线程实时电梯系统,从标准输入中输入请求信息,程序进行接收和处理,模拟电梯运行,将必要的运行信息通过输出接口进行输出. 主要锻炼学生的多线程程序 ...

  3. mysql数据库连接语句一定要加传参的编码格式

    jdbc:mysql://localhost:3306/pachong?useUnicode=true&characterEncoding=UTF-8 不然可能会出现从源代码传出的中文参数到m ...

  4. LR socket协议脚本

    socket协议分为TCP.UDP两种(区别与联系在此不做赘述),一种为长连接.一种为短连接.如果创建连接时在init中对应关闭连接在end中,则为长连接:如果创建关闭连接都是在action则为短连接 ...

  5. Windows 下使用 工具修改文件的 时间

    1. 下载工具 https://www.cr173.com/soft/12992.html 2. 使用工具修改即可 3. 忘记了东西处理挺方便的.  尤其是往前改日期的时候.

  6. 腾讯云服务器哪个地区节点好?来ping一下速度就知道了

    腾讯云服务器怎么样?速度快吗?相信很多网友在购买云服务器之前都有此疑惑. 本人找了很久也没找到各区域节点的测试速度的域名和IP.即使有也不能批量查看对比哪个区域的速度. 网上都说这个区域节点速度快,那 ...

  7. 本部jdk切换的坑!!!

    https://www.cnblogs.com/ll409546297/p/6593173.html 如果你参考其他博主没有解决,可以来参考下这个. 1.我们打开注册表,然后找到这个路径: HKEY_ ...

  8. 一本通 一笔画问题 洛谷P1636 Einstein学画画

    P1636 Einstein学画画 相信大家都玩过一笔画这种游戏吧,这其实算得上是我们能够接触到的比较常见的数学问题,有一个很知名的就是七桥问题 这个问题包括所有的一笔画问题都是在欧拉回路的涵盖范围内 ...

  9. logstash filter 处理json

    根据输入的json字段,分别建立索引.循环生成注册log和登录log保存到testlog文件中,结果如下: {"method":"register"," ...

  10. MySQL 主从复制实战解析

    前言:前面几篇文章讲解了在应用层读写分离的配置和使用,这篇文章将来个主从复制的实战解析. 说明:主从复制,读写分离结构图 原理图 主库生成一个线程: Binlog Dump线程 1.此线程运行在主库, ...