【Vue知识体系总结 4】Vue组件化开发(2)

<input type="checkbox"id=“license” v-model=“isAgree”>同意协议

您选择的是：{{isAgree}}

下一步

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

比比东

千仞雪

美杜莎

云韵

雅妃

您选择的是：{{girls}}

5、v-model结合select使用

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

您的选择是：{{girl}}

6、v-for值绑定

<input type=“checkbox” :value=“item”

:id=“item” v-model=“girls”>{{item}}

您的选择是：{{girls}}

7、v-model修饰符的使用

{{message}}

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

{{name}}

三、组件化开发

---

组件是Vue.js​中重要思想

• 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件

• 可以扩展 HTML 元素，封装可重用的代码

• 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件化思想应用

• 有了组件化的思想, 我们之后开发中就要充分的利用它

• 尽可能将页面拆分成一个个小的, 可复用的组件

• 这样让我们代码更方便组织和管理, 并且扩展性也强

1、全局组件

2、局部组件

3、父子组件

4、组件化语法糖写法

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

5、组件模板抽离写法

我是标题

我是CSDN哪吒

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

---

1、简介

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

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

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

• 组件对象也有一个data属性（也有method等属性）；

• 只是这个data属性必须是一个函数；

• 而且这个函数返回一个对象，对象内部保存着数据；

2、代码实例

{{title}}

我是热门

3、效果展示

五、父子组件通信

---

1、父子组件通信简介

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

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

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

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

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

通过props向子组件传递数据

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

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

props的值有两种方式：

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

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

2、父传子代码实例

• {{item}}

• {{cmessage}}

  3、父传子效果展示

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  ',

  // props: [‘cgirls’, ‘cmessage’],

  props: {

  // 1.类型限制

  // cgirls: Array,

  // cmessage: String,

  // 2.提供一些默认值, 以及必传值

  cmessage: {

  type: String,

  default: ‘aaaaaaaa’,

  required: true

  },

  // 类型是对象或者数组时, 默认值必须是一个函数

  cgirls: {

  type: Array,

  default() {

  return []

  }

  }

  },

  data() {

  return {}

  },

  methods: {

  }

  }

  const app = new Vue({

  el: ‘#app’,

  data: {

  message: ‘CSDN哪吒’,

  girls: [‘云韵’, ‘比比东’, ‘雅妃’]

  },

  components: {

  cpn

  }

  })

  3、父传子效果展示

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-areSWkTD-1715770908786)]

  [外链图片转存中…(img-Y6fzBxF7-1715770908787)]

  [外链图片转存中…(img-AqMXAqCZ-1715770908787)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！