组件或者dom的特殊属性
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的特殊属性的更多相关文章
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
- HTML DOM 的nodeType属性
在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...
- js 获取DOM的style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DOM常用的属性和方法
之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...
- DOM相关方法,属性整理
DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
随机推荐
- nginx正向代理和反正代理区别
1)正向代理:客户端 <一> 代理 一>服务端 客户端访问不到服务端,所以找了代理,由代理帮忙访问到了服务端 2)反向代理:客户端 一>代理 <一> 服务端 客户端 ...
- FineUIMvc随笔(1)动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
- selenium跳过webdriver检测并爬取淘宝我已购买的宝贝数据
简介 上一个博文已经讲述了如何使用selenium跳过webdriver检测并爬取天猫商品数据,所以在此不再详细讲,有需要思路的可以查看另外一篇博文. 源代码 # -*- coding: utf-8 ...
- ValueError: too many values to unpack
Error msg: 执行: python manage,py makemigrations 报错:Value: too many values to unpack 问题: django第一次数据库迁 ...
- FLOAT 和 DOUBLE区别
以下是 FLOAT 和 DOUBLE 的区别: float : 单精度浮点数 double : 双精度浮点数 ·浮点数以 8 位精度存储在 FLOAT 中,并且有四个字节. ·浮点数存储在 DOUBL ...
- 分析dhcp.lease文件,统计DHCP服务器IP自动分配
#!/usr/bin/env python # coding=utf-8 import string import time,datetime class TIMEFORMAT: def __init ...
- 【MySQL 读书笔记】全局锁 | 表锁 | 行锁
全局锁 全局锁是针对数据库实例的直接加锁,MySQL 提供了一个加全局锁的方法, Flush tables with read lock 可以使用锁将整个表的增删改操作都锁上其中包括 ddl 语句,只 ...
- Java的String和StringBuilder
一.String 1.创建String对象的方法: String s1="haha"; String s2=new String(); String s3=new String(& ...
- 回忆曾经的SSM框架实现文件上传
近期在使用springboot实现文件上传的功能,想到曾经用SSM做过这个功能,在这里记录一下过去实现的方式 maven添加文件上传所需的依赖 springMVC的配置文件配置一下文件上传 我实现的是 ...
- IFE第一天
我也不知道自己到底能坚持多少天,希望66天可以坚持下来,flag在此. 第一天的知识大概就是了解一些基本概念. Web: 基于HTTP协议,利用浏览器访问网站. HTML 大概就是告诉浏览器我有一个什 ...