【vue】特殊的attribute
特殊的attribute
- key
- ref
- is
主要用在Vue的虚拟DOM的
diff算法
,对比新旧nodes来辨识Vnodes不使用
key
时,Vue会使用一种最大限度减少动态元素且尽可能的尝试就地修复/复用相同类型元素的算法使用
key
时,会基于key的变化重新排列
元素顺序,并且会移除key不存在的元素常见与
v-for
组合使用v-for
单独使用时可以强制替换元素,变化的key值,虚拟DOM的diff算法会优先比较key,不存在则会整体替换,而不是部分的替换
{{ msg }}
2 ref 【【vue】特殊的attribute】给元素或子组件注册
引用信息
。引用信息会注册在父组件的
$refs
对象上普通的DOM元素:该DOM元素
子组件:组件实例
$refs
是非响应式的{{ msg }}
3 is 预期:String|Object
绑定需要渲染的
动态组件
例如在详情页中,不确定使用哪一类型的组件,可以
根据数据
来使用动态组件
数据文件
export default [
{
id: 1,
type: 'video'
},
{
id: 2,
type: 'text'
},
{
id: 3,
type: 'image'
},
{
id: 4,
type: 'text'
}
]
父组件
component组件中的is的值时引入的子组件,通过计算属性遍历原数据,根据每条数据生成对应组件的type,这样就可以使用
v-for
进行列表渲染动态引入
如果组件子组件较多,并且并不是所有组件都用到,可以使用传值动态引入
的方式
components:{ newsImage:()=>import('./components/newsImage.vue') }
在列表渲染时,可以将每条数据
逐个绑定到对应组件上,相同类型的数据进行统一处理
//父组件
//子组件 props:['newsItem']
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境,人生还很长