Vue 2.0 学习笔记（四）

Vue 2.0 学习目录 

第一章 前端工程化与webpack

第二章 Vue基础入门（1）

第三章 Vue基础入门（2）

第四章 组件和生命周期

第五章 Vue组件的高级用法

第六章 路由（vue-router）

---

目录

Vue 2.0 学习目录

一、Vue组件

1. 什么是组件化开发

2. Vue中的组件化开发

3. vue 组件的三个组成部分

3.1 template

3.2 script

3.3 style 

4. 组件之间的父子关系

4.1 使用组件的三个步骤

4.2 通过 components 注册的是私有子组件

4.3 注册全局组件

5. 组件的 props

5.1 props 是只读的

5.2 props 的 default 默认值 

 5.3 props 的 type 值类型

5.4 props 的 required 必填项 

6. 组件之间的样式冲突问题

6.1 思考：如何解决组件样式冲突的问题

6.2 style 节点的 scoped 属性

6.3 /deep/ 样式穿透

二、组件的生命周期

1. 生命周期 & 生命周期函数

2. 组件生命周期函数的分类

3. 生命周期图示

三、组件之间的数据共享

1. 组件之间的关系

2. 父子组件之间的数据共享

2.1 父组件向子组件共享数据

2.2 子组件向父组件共享数据 

3. 兄弟组件之间的数据共享

三、ref引用

1. 什么是 ref 引用

2. 使用 ref 引用 DOM 元素

3. 使用 ref 引用组件实例

4. 控制文本框和按钮的按需切换 

5. 让文本框自动获得焦点 

6. this.$nextTick(cb) 方法

---

一、Vue组件

1. 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

2. Vue中的组件化开发

vue 是一个支持组件化开发的前端框架。

vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件

3. vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

（1） template -> 组件的模板结构

（2）script -> 组件的 JavaScript 行为

<script>
//默认导出，这是固定写法
export default {
//data数据源
//组件里面的data不能指向对象，必须是一个函数
data() {
//这个return出去的{}可以定义数据
return {
...
}
}
...
}
</script>

（3）style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

注：在vscode中安装Vetur和Vue 3 Snippets插件，在新的组件页面输入“<”时就能选择自动生成Vue结构

3.1 template

vue 规定：每个组件对应的模板结构，需要定义到<template>节点中。

 注意：

（1）template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM 元素；

（2） template 中只能包含唯一的根节点（el所控制的区域）。下面写法是错误的：

模板结构中有两个div根节点，错误
只能在外面再包一个大div

3.2 script

vue 规定：开发者可以在<script>节点中封装组件的 JavaScript 业务逻辑。

<script>节点的基本结构如下：

.vue组件中的 data 必须是函数 

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。 因此在组件中定义 data 数据节点时，下面的方式是错误的：

上面的做法会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例： https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

3.3 style 

vue 规定：组件内的<style>节点是可选的，开发者可以在<style>节点中编写样式美化当前组件的 UI 结构。

<style>节点的基本结构如下：

 让 style 中支持 less 语法

在<style>标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式：

4. 组件之间的父子关系

 在使用的时候，才会形成父子or兄弟关系。

4.1 使用组件的三个步骤

示例：

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 以标签的形式使用注册好的组件 -->
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left></Left>
      <Right