• 实际上Vue的组件系统具有图灵完备性 • 使⽤用Vue计算阶乘 • 使⽤用Vue计算斐波那契数列列 声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” • 2000年年后 markup language+ programming MVVM是为声明式/多语⾔言量量身定做的编程模型 MVVM的数据绑定 • 数据绑定是声明式的数据与UI通讯 • ⼀一些逻辑中数据绑定不不需要命令式代码 声明式数据交换 交互的抽象 ⼿手势 时间 陀螺仪 …… 位置 透明度 颜⾊色 …… 交互的抽象 ⼿手势 时间 陀螺仪 …… 位置 透明度 颜⾊色 …… Event Property Expression 使⽤用Vue Directive给元素添加⾏行行为

createApp(ListRendering).mount('#list-rendering') 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组 件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树： 组件化应用构建 介绍 - 16 - 本文档使用 书栈网 · BookStack.CN 构建 在 Vue 中，组件本质上是一个具有预定义选项的实例。在 & 动画概述 进入过渡 & 离开过渡 列表过渡 状态过渡 过渡 - 126 - 本文档使用 书栈网 · BookStack.CN 构建 Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包 括： 在 CSS 和 JS 中，使用内置的 组件来钩住组件中进入和离开 DOM。 过渡模式，以便你在过渡期间编排顺序。 在处理多个元素位置更新时，使用 这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。 通过侦听器我们能监听到任何数值 property 的数值更新。可能听起来很抽象，所以让我们先来看看 使用 GreenSock (opens new window) 一个例子： 1.