Vue3 教程
- 第1节:Vue 3.0 安装
- 第2节:Vue 3.0 介绍
- 第3节:Vue 3.0 应用&组件实例
- 第4节:Vue 3.0 模板语法
- 第5节:Vue 3.0 Data Property和方法
- 第6节:Vue 3.0 计算属性和侦听器
- 第7节:Vue 3.0 Class与Style绑定
- 第8节:Vue 3.0 条件渲染
- 第9节:Vue 3.0 列表渲染
- 第10节:Vue 3.0 事件处理
- 第11节:Vue 3.0 表单输入绑定
- 第12节:Vue 3.0 组件基础
- 第13节:Vue 3.0 组件注册
- 第14节:Vue 3.0 Props
- 第15节:Vue 3.0 非Prop的Attribute
- 第16节:Vue 3.0 自定义事件
- 第17节:Vue 3.0 插槽
- 第18节:Vue 3.0 提供/注入
- 第19节:Vue 3.0 动态组件&异步组件
- 第20节:Vue 3.0 模板引用
- 第21节:Vue 3.0 处理边界情况
- 第22节:Vue 3.0 过渡&动画概述
- 第23节:Vue 3.0 进入过渡&离开过渡
- 第24节:Vue 3.0 列表过渡
- 第25节:Vue 3.0 状态过渡
- 第26节:Vue 3.0 混入
- 第27节:Vue 3.0 自定义指令
- 第28节:Vue 3.0 Teleport
- 第29节:Vue 3.0 渲染函数
- 第30节:Vue 3.0 插件
- 第31节:Vue 3.0 响应性 深入响应性原理
- 第32节:Vue 3.0 响应性 基础
- 第33节:Vue 3.0 响应式 计算和侦听
- 第34节:Vue 3.0 组合式API 介绍
- 第35节:Vue 3.0 组合式API Setup
- 第36节:Vue 3.0 组合式API 生命周期钩子
- 第37节:Vue 3.0 组合式API 提供/注入
- 第38节:Vue 3.0 组合式API 模板引用
- 第39节:Vue 3.0 渲染机制和优化
- 第40节:Vue2中的更改检测警告
- 第41节:Vue 3.0 单文件组件
- 第42节:Vue 3.0 测试
- 第43节:Vue 3.0 TypeScript支持
- 第44节:Vue 3.0 Mobile
- 第45节:Vue 3.0 路由
- 第46节:Vue 3.0 状态管理
- 第47节:Vue 3.0 服务端渲染
- 第48节:Vue 3.0 应用配置
- 第49节:Vue 3.0 应用API
- 第50节:Vue 3.0 全局API
- 第51节:Vue 3.0 选项 Data
- 第52节:Vue 3.0 选项 DOM
- 第53节:Vue 3.0 选项 生命周期钩子
- 第54节:Vue 3.0 选项/资源
- 第55节:Vue 3.0 选项 组合
- 第56节:Vue 3.0 选项 杂项
- 第57节:Vue 3.0 实例property
- 第58节:Vue 3.0 实例方法
- 第59节:Vue 3.0 指令
- 第60节:Vue 3.0 特殊指令
- 第61节:Vue 3.0 内置组件
- 第62节:Vue 3.0 响应性基础 API
- 第63节:Vue 3.0 响应性API Refs
- 第64节:Vue 3.0 响应性API Computed与watch
- 第65节:Vue 3.0 组合式API
Vue 3.0 特殊指令
#key
- 预期:
number | string
key
的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除/销毁 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合 v-for
:
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
- 完整地触发组件的生命周期钩子
- 触发过渡
例如:
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text
发生改变时,<span>
总是会被替换而不是被修改,因此会触发过渡。
#ref
- 预期:
string | Function
ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
<!-- vm.$refs.p 会是 DOM 节点 -->
<p ref="p">hello</p>
<!-- vm.$refs.child 会是子组件实例 -->
<child-component ref="child"></child-component>
<!-- 当动态绑定时,我们可以将ref定义为回调函数,显式地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>
当 v-for
用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs
也是非响应式的,因此你不应该试图用它在模板中做数据绑定。
- 参考子组件 Refs
#is
- 预期:
string | Object (component’s options object)
使用动态组件。
例如:
<!-- component changes when currentView changes -->
<component :is="currentView"></component>