PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >Vue.js > 正文

Vue基础知识总结之vue组件化开发

转载2022-08-10 09:56:11813 + Vue前端学习QQ群(点击入群)
本篇文章给大家带来了关于vue其中主要介绍了关于vue组件化开发的相关问题,组件化开发提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件,下面一起来看一下,希望对大家有帮助。

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

【相关推荐:javascript视频教程web前端

一、函数式编程

1、函数式编程简介

函数式编程是种编程方式,它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算(lambda calculus),而且λ演算的函数可以接受函数当作输入(参数)和输出(返回值)。

和指令式编程相比,函数式编程强调函数的计算比指令的执行重要。

和过程化编程相比,函数式编程里函数的计算可随时调用。

filter函数自动过滤对象的所有元素,返回true才会存入指定对象;

Reduce函数对数组内部的所有元素进行汇总;

2、代码实例




  
  Title


{{totalPrice()}}
登录后复制

二、v-model

vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。

1、v-model双向绑定

登录后复制

v-model动态双向绑定实现原理,本质上包含两个操作:

(1)v-bind绑定一个value属性

(2)v-on指令给当前元素绑定input事件




  
  Title


{{message}}
登录后复制

2、v-model和radio结合使用




  
  Title


您选择的是:{{sex}}

登录后复制

3、v-model和CheckBox单选框结合使用




  
  Title


您选择的是:{{isAgree}}

登录后复制

4、v-model和CheckBox多选框结合使用




  
  Title


比比东 千仞雪 美杜莎 云韵 雅妃

您选择的是:{{girls}}

登录后复制

5、v-model结合select使用




  
  Title


您的选择是:{{girl}}

登录后复制

6、v-for值绑定




  
  Title


您的选择是:{{girls}}

登录后复制

7、v-model修饰符的使用




  
  Title


{{message}}

{{age}} --> {{typeof age}}

{{name}}

登录后复制

三、组件化开发

组件是Vue.js中重要思想

  • 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件
  • 可以扩展 HTML 元素,封装可重用的代码
  • 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

组件化思想应用

  • 有了组件化的思想, 我们之后开发中就要充分的利用它
  • 尽可能将页面拆分成一个个小的, 可复用的组件
  • 这样让我们代码更方便组织和管理, 并且扩展性也强

1、全局组件




  
  Title


登录后复制

2、局部组件




  
  Title


登录后复制

3、父子组件




  
  Title


登录后复制

4、组件化语法糖写法

vue为了简化注册组件的过程,提供了语法糖的写法,主要是省去了调用Vue.extend()的步骤,直接使用一个对象替代。




  
  Title


登录后复制

5、组件模板抽离写法




  
  Title


 
登录后复制

四、组件可以访问Vue实例数据吗?

1、简介

实验发现,组件不能访问Vue实例数据,而且即便可以访问,如果将所有的数据都放在Vue实例中,Vue实例就会变得非常臃肿。

Vue组件应该有自己保存数据的地方。

组件自己的数据存放在哪里?

  • 组件对象也有一个data属性(也有method等属性);
  • 只是这个data属性必须是一个函数;
  • 而且这个函数返回一个对象,对象内部保存着数据;

2、代码实例




  
  Title


 
登录后复制

3、效果展示

五、父子组件通信

1、父子组件通信简介

在开发中,往往一些数据确实需要从上层传递到下层:

比如在一个页面中,我们从服务器请求到了很多的数据。

其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。

这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢?Vue官方提到:

通过props向子组件传递数据

通过事件向父组件发送消息

在组件中,使用选项props来声明需要从父级接收到的数据。

props的值有两种方式:

方式一:字符串数组,数组中的字符串就是传递时的名称。

方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。

2、父传子代码实例




  
  Title


 
登录后复制

3、父传子效果展示

4、props中的驼峰标识




  
  Title


 
登录后复制

效果展示

5、子传父(自定义事件方式)

自定义事件方式完成子传父。

什么时候需要自定义事件呢?

当子组件需要向父组件传递数据时,就要用到自定义事件了。

我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。

自定义事件的流程:

  • 在子组件中,通过$emit()来触发事件。

  • 在父组件中,通过v-on来监听子组件事件。

6、子传父代码实例




  
  Title


 

登录后复制

7、子传父效果展示

【相关推荐:javascript视频教程web前端

以上就是Vue基础知识总结之vue组件化开发的详细内容,更多请关注php中文网其它相关文章!

声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Vue
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐