目 录 致谢 基础 安装 介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入组件 组件注册 Props 非 Prop 的 Attribute 自定义事件 插槽 提供 / 注入 动态组件 & 异步组件 · BookStack.CN 构建 响应性 深入响应性原理 响应式原理 响应式计算和侦听 组合 API 介绍 Setup 生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 语义学 标准 资源 从 Vue Vue. 致谢 - 5 - 本文档使用 书栈网 · BookStack.CN 构建 安装 介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 基础 - 6 - 本文档使用 书栈网 · BookStack.CN 构建 Vue

这是一次难得的和国内外以及腾讯前端大神面对面交流的机会。 大会介绍： 大会介绍： IMWebConf 2017 将于 2017年 年9月 月16日（周六） 日（周六）在 深圳科兴国际会议中心 深圳科兴国际会议中心 举行。届时将邀请国内外知名互联网公 司及组织（包括W3C、微软、Google、腾讯、阿里等）的前端达人为我们带来最新前端技术的分享。 关于我们： 关于我们： IMWebConf 是 的联合创始人。于 2010 年 开发了三款 Facebook 平台的应用，获取了超 过 2 千万的用户。2012 年创立了市面上最简易 的建站平台 Strikingly，成为第一家进入 YC 孵 化器的华人团队。 Inside React Fiber 天猪 阿里游戏前端负责人，EggJS 核心开发者。 Egg & Node.js 从小 工坊走向企业级开发 Egg 是阿里 Node.js jackqqxu(徐杰) 徐杰，腾讯Web前端高级工程师，QQ空间个性 化商城主要开发者 2011年入职腾讯，期间负责flash游戏，支付官 网和内部运营系统等web系统开发，PHP爱好 者； 2014年进入空间，先后负责QQ空间触屏版部 分模块，QQ空间个性化商城系列开发。 RN在QQ空间IOS个 性化商城中的应用 本次演讲主要包括： （1）ReactNative在IOS系

Surely 这个高级包。 果需要用表格处理大量数据，Element Plus 更合适。Ant Design table ，定义好 columns 有几列后 用 template 写法就无法用 v-if 去隐藏某一列 ● 在 Ant Design Vue 里，Modal.confirm 某些 api 不支持 promise 写法，需要写在回调函数里 ● TreeSelect 组件：Ant Design 与卡拉云对比 Element Plus 与 Ant Design Vue 都是 Vue 3 的一个组件库，所以使用 Element 和 antdv 首先要搭 Vue 3 开发环境，然后再引入组件库，再按照文档的说明，根据自己的需求进行二次开发。使用 Elem nt 和 antdv 相对来说对前端技能要求较高。 卡拉云是新一代低代码开发平台，与 Element 和 antdv 相比，卡拉云的优势在于不用搭建 和 Ant Design Vue 对比测评，哪个更好？ 卡拉云搭建的数据看板 DEMO：https://my.kalacloud.com/apps/ykxauq3u6r/published 使用卡拉云 10 分钟内搭建的「天气预报数据看板」，简单拖拽，几行代码即可快速完成，搭建即发 ，可一键分享给其他同学一起使用。立即注册使用卡拉云。 扩展阅读： ● 7 种最棒的 Vue Loading 加载动画组件测评与推荐

mpvue 开发框架介绍和最佳实践 ���Vue.js������� 美团酒旅 - 终端研发组 - 基础服务平台 动态化技术⽅方向，⼩小程序应⽤用、RN 应⽤用 努⼒力力于⼩小程序⼯工程化开发、业务级应⽤用 ������美团点评 ⽬目录 CONTENTS mpvue 介绍 使⽤用⽅方式 设计思路路 实践 & 展望 1 mpvue 介绍 作为⼩小程序应⽤用开发框架，mpvue ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 好扩展 前端赋能 易易学习 超低上⼿手 成本 多端复⽤用 技术沉淀收益规 模化 提⾼高开发效率 减少重复劳动 ⾃自动化构建 组件化开发 ⽣生命周期 data event js Core ⻚页⾯面窗⼝口 mpvue 框架组成 数据同步机制 运⾏行行阶段 全局事件代理理 ⽣生命周期关联 构建集成 开发阶段 项⽬目模板 项⽬目初始化 样式编译 编译阶段 脚本编译 模板编译 SDK 注⼊入 Vue.js 引擎引⼊入 - 运⾏行行时⽀支持 维护 mp 对象实例例 mpvue runtime 实例例间⽣生命周期互通 维护 Vue

命令式语⾔言：C++ Java JavaScript 图灵完备性 • 图灵完备：“可计算性” • 命令式的图灵完备性：if/for， if/goto • 声明式的图灵完备性：if/递归 Vue的Template的图灵完备性 • 实际上Vue的组件系统具有图灵完备性 • 使⽤用Vue计算阶乘 • 使⽤用Vue计算斐波那契数列列 声明式与UI编程 UI编程 • 70年年代 MVC诞⽣生 ⼈人们意识到视图应该被独⽴立抽象 ⼈人们意识到视图应该被独⽴立抽象 • 80年年代 标记语⾔言⼤大热 最初更更与⽂文本相关 • 90年年代 可视化编辑器器出现 “独⽴立的UI代码⽂文件” • 2000年年后 markup language+ programming language • 2009年年 “HTML5” 声明式优势 • 可视化的“可逆性” • 声明式与可再绑定性 • 听说近年年某框架把html和css塞回JS了了？ 可重复绑定性

Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy Layout Text Component Text... Component Node Render Portable 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 Javascript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy Layout Text Component Text... Component Node Render Portable

https://github.com/vueComponent/ant-design-vue 现状 52个组件 单测覆盖率86% Star 3000+ 特⾊色 受控/⾮非受控组件 基于组件的国际化配置(36种语⾔言包) 共享Antd设计资源(Sketch、Axure等) ⼀一致的API 未来规划 提升单测覆盖率 TypeScript⽀支持 周边⽣生态建设 性能优化 总结 姿(zhi)势(shi)很重要

支持 SSR 性能进一步优化 通过编译时优化获得 2~8x 性能提升 SSR + webpack code split 完美支持 （不再局限于路由） vue-cli 3.0 ● 配置依赖化 + 可组合 ● PWA by default ● 一个模板，不同参数 (--ts, --ssr) ● 更好的测试方案 长期展望 ● 单文件组件 CSS 改进：>>> 和 ::slotted 选择器，