作者简介:哪吒,CSDN2021博客之星亚军、新星计划导师✌、博客专家
哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师
关注公众号【哪吒编程】,回复1024,获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
目录
一、函数式编程
1、函数式编程简介
2、代码实例
二、v-model
1、v-model双向绑定
2、v-model和radio结合使用
3、v-model和CheckBox单选框结合使用
4、v-model和CheckBox多选框结合使用
5、v-model结合select使用
6、v-for值绑定
7、v-model修饰符的使用
三、组件化开发
1、全局组件
2、局部组件
3、父子组件
4、组件化语法糖写法
5、组件模板抽离写法
四、组件可以访问Vue实例数据吗?
1、简介
2、代码实例
3、效果展示
五、父子组件通信
1、父子组件通信简介
2、父传子代码实例
3、父传子效果展示
4、props中的驼峰标识
5、子传父(自定义事件方式)
6、子传父代码实例
7、子传父效果展示
函数式编程是种编程方式,它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算(lambda calculus),而且λ演算的函数可以接受函数当作输入(参数)和输出(返回值)。
和指令式编程相比,函数式编程强调函数的计算比指令的执行重要。
和过程化编程相比,函数式编程里函数的计算可随时调用。
filter函数自动过滤对象的所有元素,返回true才会存入指定对象;
Reduce函数对数组内部的所有元素进行汇总;
Title
{{totalPrice()}}
vue中经常使用到和
v-model动态双向绑定实现原理,本质上包含两个操作:
(1)v-bind绑定一个value属性
(2)v-on指令给当前元素绑定input事件
Title
{{message}}
Title
您选择的是:{{sex}}
Title
您选择的是:{{isAgree}}
Title
比比东
千仞雪
美杜莎
云韵
雅妃
您选择的是:{{girls}}
Title
您的选择是:{{girl}}
Title
您的选择是:{{girls}}
Title
{{message}}
{{age}} --> {{typeof age}}
{{name}}
组件是Vue.js中重要思想
组件化思想应用
Title
Title
Title
vue为了简化注册组件的过程,提供了语法糖的写法,主要是省去了调用Vue.extend()的步骤,直接使用一个对象替代。
Title
Title
我是标题
我是CSDN哪吒
实验发现,组件不能访问Vue实例数据,而且即便可以访问,如果将所有的数据都放在Vue实例中,Vue实例就会变得非常臃肿。
Vue组件应该有自己保存数据的地方。
组件自己的数据存放在哪里?
Title
{{title}}
我是热门
在开发中,往往一些数据确实需要从上层传递到下层:
比如在一个页面中,我们从服务器请求到了很多的数据。
其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢?Vue官方提到:
通过props向子组件传递数据
通过事件向父组件发送消息
在组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:
方式一:字符串数组,数组中的字符串就是传递时的名称。
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
Title
- {{item}}
{{cmessage}}
Title
{{cInfo}}
{{childMyMessage}}
效果展示
自定义事件方式完成子传父。
什么时候需要自定义事件呢?
当子组件需要向父组件传递数据时,就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
自定义事件的流程:
Title
上一篇:Vue知识体系总结 3:Vue常用标签
下一篇:Vue基础知识总结 5:Vue实现树形结构
作者简介:哪吒,CSDN2021博客之星亚军、新星计划导师✌、博客专家
哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师
关注公众号【哪吒编程】,回复1024,获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
关注公众号,备注1024,获取Java学习路线思维导图、加入万粉计划交流群