Vue2框架学习二：组件基础

侦听器

什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

watch: {
  // 监听 username 值的变化
  // newVal 是“变化后的新值”， oldVal 是“变化之前的旧值”
  username(newVal, oldVal) {
    console.log(newVal, oldVal))
  }
}

使用 watch 监测用户名是否可用

监听 username 值的变化，并使用 axios 发起 ajax 请求，监测当前输入的用户名是否可用

watch: {
  async(newVal) {
    if(newVal === '') return
    const { data: res } = await axios.get('' + newVal)
    console.log(res)
  }
}

immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项

 watch: {
   username: {
     // handler 是固定写法，表示当 username 的值发生变化时，自动调用 handler 函数
     handler: async function(newVal) {
       if(newVal === '') return
       const { data: res } = await axios.get('' + newVal)
       console.log(res)
     },
       // 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
       immediate: true
   }
 }

deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项

data: {
  info: { username: 'admin' }
},
  watch: {
    info : {
      handler(newVal) {
        console.log(newVal.username)
      },
        deep: true
    }
  }

监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以如下定义

data: {
  info: { username: 'admin' }
},
  watch: {
    'info.username' : {
      handler(newVal) {
        console.log(newVal)
      }
    }
  }

计算属性

什么是计算属性

计算属性值的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用

computed: {
  rab() { return `rgb(${this.r}, ${this.g}, ${this.b})` }
}

计算属性的特点

虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

vue-cli

单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

什么是 vue-cli

vue-cli 是 vue 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 vue 项目的过程。

中文官网：https://cli.vuejs.org/zh/

安装和使用

• 安装

  vue 是 npm 上的一个全局包，使用 npm install 即可安装。

  npm install g @vue/cli

• 使用（基于 vue-cli 快速生成工程化的 vue 项目）

  vue create 项目名称

vue 项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

1. App.vue 用来编写待渲染的模版结构

2. index.html 中需要预留一个 el 区域

3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中

vue 组件

什么是组件化开发

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

vue 中的组件化开发

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

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

vue 组件的三个组成部分

template 组件的结构

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

格式：

<template>
  // 当前组件的 DOM 结构
</template>

注意：

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

2. template 中只能包含唯一的根节点

script 组件的 JavaScript 行为

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

格式：

<script>
  // 今后，组件相关的 data 数据、 methods 方法等，都需要定义到 export default 所导出的对象中。
  export default {}
</script>

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

vue规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。

原因：vue 组件可以同时存在多个实例，如果直接使用对象形式的data选项，那么所有的实例会共享同一个data对象，这样就会造成数据互相干扰的问题。因此，将data选项设置为函数可以让每个实例都拥有自己独立的data对象。

style 组件的样式

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

格式：

<style>
  h1 {
    font-weight: normal;
  }
</style>

让 style 支持 less 语法

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

<style lang="less">
  h1 {
    font-weight: normal;
    span {
      color: red;
    }
  }
</style>

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

组件之间的父子关系

使用组件的三个步骤（导入-注册-使用）

1. 使用 import 语法导入需要的组件

   import Left from '@/components/Left.vue'

2. 使用 components 节点注册组件

   export default {
    components: {
      Left
    }
   }

3. 以标签形式使用刚才注册的组件

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

组件中注册的是私有子组件，只能供当前组件使用。如果需要给其他组件使用，则需要借用下面的全局组件。

注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。

注册步骤：

1. 导入需要全局注册的组件

   import Count from '@/components/Count.vue'

2. 注册组件

   // 参数1: 字符串格式，表示组件的“注册名称”
   // 参数2: 需要被全局注册的组件
   Vue.component('MyCount', Count)

组件的 props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性。

格式

export default {
  // 组件的自定义属性
  props: ['自定义属性A', '自定义属性B', '...']
}

props的构成

• props 是只读的

  vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 中的值。那么如何才能修改这个值呢，可以通过把 props 的值传给 data进行修改，因为data中的数据是可读可写的。

  export default {
  props: ['init'],
  data() {
    return {
      // 把 this.init 的值转存到 count 
      count: this.init
    }
  }
  }

• props 的 default 默认值

  声明自定义属性时，可以通过 default 来定义属性的默认值

  export default {
  props: {
    init: {
      default: 0
    }
  }
  }

• props 的 type 值类型

  声明自定义属性时，可以通过 type 来定义属性的值类型

  export default {
  props: {
    init: {
      // 用 default 属性定义属性的默认值
      default: 0,
      // 用 type 属性定义属性的值类型，如果传递过来的值不符合此类型，则会在终端报错
      type: Number
    }
  }
  }

• props 的 require 必填项

  声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。

  export default {
  props: {
    init: {
      // 值类型为 Number 数字
      type: Number
      // 必填项
      required: true
    }
  }
  }

组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

样式冲突的根本原因如下：

1. 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
2. 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

如何解决样式冲突问题

为每个组件分配唯一的自定义属性，在编写样式时，通过属性选择器来控制样式的作用域

<template>
  <div class="container" data-v-001>
    </div>
</template>
<style>
    // 通过中括号“属性选择器”，来防止组件之间的样式冲突问题，因为每个组件分配的自定义属性是唯一的。
    .container[data-v-001] {
      border: 1px solid red;
    }
</style>

style 节点的 scoped 属性

vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突

<style scoped>
  // scoped 属性，自动的实现自定义唯一的属性，并与之关联
  .container {
    border: 1px solid red;
  }
</style>

/deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

<style lang="less" scoped>
  .title {
    color: blue; // 不加 /deep/ 时，生成的选择器格式为 .title[data-v-052242de]
  }
  /deep/ .title {
    color: blue; // 加 /deep/ 时，生成的选择器格式为 [data-v-052242de] .title
  }
</style>