Vue声明式编程 摘要 • 声明式与图灵完备性 • 声明式与UI编程的演进 • 声明式与UI架构 • 声明式与交互 声明式与图灵完备性 声明式 • 我们对语⾔言有很多划分的维度 • 声明式 vs 命令式 • 声明式语⾔言：HTML XML CSS SQL • 命令式语⾔言：C++ Java JavaScript 图灵完备性 • 图灵完备：“可计算性” • 命令式的图灵完备性：if/for， 声明式的图灵完备性：if/递归 Vue的Template的图灵完备性 • 实际上Vue的组件系统具有图灵完备性 • 使⽤用Vue计算阶乘 • 使⽤用Vue计算斐波那契数列列 声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” Recycle Pool Visible Area 声明式与UI架构 MVVM • MVC => MVP => MVVM ⼀一脉相承的演化 • MVVM是为声明式/多语⾔言量量身定做的编程模型 MVVM的数据绑定 • 数据绑定是声明式的数据与UI通讯 • ⼀一些逻辑中数据绑定不不需要命令式代码 声明式数据交换 交互的抽象 ⼿手势 时间 陀螺仪 …… 位置 透明度

JavaScript 中的子组件。为此，可以使 用 ref attribute 为子组件或 HTML 元素指定引用 ID。例如： 1. 例如，你希望以编程的方式 focus 这个 input 在组件上挂载，这可能有用 1. const app = Vue.createApp({}) 2. 3. app.component('base-input' mount('#app') 我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。总之，对于完成各种过渡 动效几乎没有阻碍。 你可以看到我们如何使用它进行数据可视化，物理效果，角色动画和交互，天空是极限。 只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的 通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 传入 - 177 - 本文档使用 书栈网 · BookStack.CN 构建 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。 让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标 题： 1.

2.

0 码力 | 368 页 | 3.97 MB | 1 年前

3