唐金州换个角度看 Vue 组件

2020-03-01 361浏览

1.换个角度看 Vue 组件唐金州校宝在线技术专家
2.自我介绍
3.自我介绍
4.换个角度看 Vue 组件唐金州校宝在线技术专家
5.自我介绍 Ant Design Vue 作者极客时间 Vue 专栏讲师曾就职于搜狗、蚂蚁金服、一点资讯
6.目录 1、什么是组件 2、又爱又恨的函数式组件 3、当插槽碰上函数式组件 4、指令的另外一种用途 5、简约而不简单的 Vue
7.什么是组件
8.什么是组件
9.什么是组件
10.什么是组件 function fn () { ...... ...... ...... ...... 成百上千行... } function fn1 () { ...... } function fn2 () { ...... } function fn () { fn1() fn2() fn1() }
11.什么是组件hello vue...... 成百上千个标签const custom1 = { render () { return......} } const custom2 = { ...... }hello vue
12.什么是组件 const custom1 = { render () { return......} } function custom1 (props) { return createElement({ return......}, { prop }) } const custom2 = { ...... } function custom2 () { return ... }hello vuehello vue{{ custom1(props) }} {{ custom2() }} {{ custom1() }}
13.又爱又恨的函数式组件
14.函数式组件 1、无状态(没有响应式数据) 2、无实例(没有this上下文)
15.函数式组件 – 纯展示组件
16.函数式组件 – 纯展示组件{{value}}{{props.value}}
17.但是
18.妙用函数式组件 – 纯展示组件
19.函数式组件 – 纯展示组件{{timer}}{{timer}}
20.函数式组件 function custom1 (props) { return createElement({ return......}, { prop }) } function custom1 (props) { return......}
21.函数式组件hello vue...... 成百上千个标签function custom1 (props) { return......} function custom2 () { return ... }hello vue{{ custom1(props) }} {{ custom2() }} {{ custom1() }}
22.函数式组件 diff div span custom1 custom2 custom1 diff div span div ... div ... div ...
23.函数式组件 or 组件式函数是“组件”更是“函数” (props) => VNodes
24.函数式组件 Vue的Template的图灵完备性实际上Vue的组件系统具有图灵完备性使⽤Vue计算阶乘使⽤Vue计算斐波那契数列 -- winter 计算机之子 2018 vue conf
25.函数式组件 function fn (value) { return (... {value > 1 ? fn(value - 1) : ...}) }
26.函数式组件 – 递归组件
27.函数式组件 – 递归组件
28.函数式组件 – 递归组件
29.当插槽碰上函数式组件
30.插槽{{ slotProps.item.text }}
31.插槽props.getItem = (slotProps) =>{ slotProps.item.text }{{ getItem(slotProps) }}
32.插槽{ }name:’VNodes’,functional:true,render:(h, ctx) => ctx.props.vnodes
33.变量
34.变量优化临时变量计算属性
35.作用域插槽{{ slotProps.item.text }}function com (prop, slot) { return slot(slotProps) }
36.妙用函数式组件 – 临时变量
37.妙用函数式组件 – 临时变量
38.指令的另外一种用途 v-ref v-decorator
39.ref
40.v-ref
41.组件通信 – 访问实例 A B E C F D G H I
42.组件通信 – 访问实例 A B inject v-ref=“setRef” E provide setRef(ref) { this.refE = ref } C F inject D G H I inject
43.v-decorator Ant Design Vue form 表单进化史 1、 getFieldDecorator(‘userName’)() 2、3、
44.v-decorator Vue.directive('decorator', {});
45.Form 表单 data + rule form
46.Form 表单 data + rule form other
47.Form 表单 cloneData + rule data data = cloneData cloneData data submit form other
48.Form 表单 data + rule data = form.getFieldsValue() 初始值 data submit form other
49.但是
50.Form 表单即将支持双向绑定的表单收集校验敬请期待！！！
51.总结 – 简约而不简单的 Vue 1、Vue 简单？ 2、Vue 灵活度低？ 3、不要被固有的概念，限制了我们的思维
52.
53.
54.

唐金州 换个角度看 Vue 组件

唐金州换个角度看 Vue 组件