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. C#二维码与条形码的生成

    二维码 using Gma.QrCodeNet.Encoding;using Gma.QrCodeNet.Encoding.Windows.Render; string str = "Htt ...

  2. SQL 行转列的运用

    适用场景:需要将行数据转换成列数据 例子: 现在有一个学生的成绩表 但是我们需要将每个学生的成绩汇集到一条数据上,这时候就可以用到行转列. 代码如下 一.不使用  PIVOT SELECT ),[St ...

  3. UVA - 11090 - Going in Cycle!!(二分+差分约束系统)

    Problem  UVA - 11090 - Going in Cycle!! Time Limit: 3000 mSec Problem Description You are given a we ...

  4. 一键发布部署vs插件[AntDeploy],让net开发者更幸福

    一键发布工具(ant deploy tool) 插件下载地址: https://marketplace.visualstudio.com/items?itemName=nainaigu.AntDepl ...

  5. 关于H5从PC端切换到移动端,屏幕显示内容由横向转为竖向的研究!

    1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...

  6. LODOP不同电脑打印效果不同排查

    1.位置不同,偏移问题.详细的相关偏移问题的博文:LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文:Lodop打印控件传入css样式.看是否传入正确样式 ...

  7. luogu P2194 HXY烧情侣

    残忍的题面 我们来看这一道题,其实冗长的题目告诉我们一个核心——用tarjan tarjan是用来干什么呢?是用来求强连通分量(代码中指sc) 求出来又有什么用呢?每当我们求出一个强连通分量时,就去计 ...

  8. statsmodels.tsa.arima_model预测时报错TypeError: int() argument must be a string, a bytes-like object or a number, not 'Timestamp'

    在 python 中用 statsmodels创建 ARIMA 模型进行预测时间序列: import pandas as pd import statsmodels.api as sm df = pd ...

  9. Codeforces 1092F Tree with Maximum Cost(树形DP)

    题目链接:Tree with Maximum Cost 题意:给定一棵树,树上每个顶点都有属性值ai,树的边权为1,求$\sum\limits_{i = 1}^{n} dist(i, v) \cdot ...

  10. Django框架基础之Form组件

    服务端假设所有用户提交的数据都是不可信任的,所以Django框架内置了form组件来验证用户提交的信息 form组件的2大功能:       1 验证(显示错误信息)       2 保留用户上次输入 ...