Vue2框架学习二：组件基础

侦听器

什么是 watch 侦听器

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

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

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)
  }
}

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
   }
 }

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 : {

handler(newVal) {

console.log(newVal.username)

deep: true

}

监听对象单个属性的变化

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

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

data: {

info: { username: 'admin' }

watch: {

'info.username' : {

handler(newVal) {

console.log(newVal)

}

计算属性

什么是计算属性

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

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

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

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 的指定区域中。

其中：

App.vue 用来编写待渲染的模版结构
index.html 中需要预留一个 el 区域
main.js 把 App.vue 渲染到了 index.html 所预留的区域中

vue 组件

什么是组件化开发

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

vue 中的组件化开发

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

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

vue 组件的三个组成部分

template 组件的结构

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

格式：

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

// 当前组件的 DOM 结构

</template>

注意：

template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染成真正的 DOM 元素
template 中只能包含唯一的根节点

script 组件的 JavaScript 行为

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

格式：

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

h1 {

font-weight: normal;

}

</style>

让 style 支持 less 语法

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

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

h1 {

font-weight: normal;

span {

color: red;

}

</style>

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

组件之间的父子关系

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

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

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

1

import Left from '@/components/Left.vue'
使用 components 节点注册组件

export default { components: { Left } }

1
2
3
4
5

export default {
components: {
Left
}
}
以标签形式使用刚才注册的组件

<div class="box"> <Left></Left> </div>

1
2
3

<div class="box">
<Left></Left>
</div>

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

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

注册全局组件

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

注册步骤：

导入需要全局注册的组件

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

1

import Count from '@/components/Count.vue'
注册组件

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

1
2
3

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

组件的 props

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

格式

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

export default {

// 组件的自定义属性

props: ['自定义属性A', '自定义属性B', '...']

}

props的构成

props 是只读的

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

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

1
2
3
4
5
6
7
8
9

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

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

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

1
2
3
4
5
6
7

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

props 的 type 值类型

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

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

export default {

props: {

init: {

// 用 default 属性定义属性的默认值

default: 0,

// 用 type 属性定义属性的值类型，如果传递过来的值不符合此类型，则会在终端报错

type: Number

}

props 的 require 必填项

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

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

1
2
3
4
5
6
7
8
9
10

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

组件之间的样式冲突问题

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

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

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

如何解决样式冲突问题

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

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

</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>

// 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>

.title {

color: blue; // 不加 /deep/ 时，生成的选择器格式为 .title[data-v-052242de]

}

/deep/ .title {

color: blue; // 加 /deep/ 时，生成的选择器格式为 [data-v-052242de] .title

}

</style>

原创文章，作者：seabert，如若转载，请注明出处：https://bysjb.cn/vue2-component.html

Vue2框架学习二：组件基础

侦听器

什么是 watch 侦听器

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

immediate 选项

deep 选项

监听对象单个属性的变化

计算属性

什么是计算属性

计算属性的特点

vue-cli

单页面应用程序

什么是 vue-cli

安装和使用

vue 项目的运行流程

vue 组件

什么是组件化开发

vue 中的组件化开发

vue 组件的三个组成部分

template 组件的结构

script 组件的 JavaScript 行为

style 组件的样式

组件之间的父子关系

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

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

注册全局组件

组件的 props

格式

props的构成

组件之间的样式冲突问题

如何解决样式冲突问题

style 节点的 scoped 属性

/deep/ 样式穿透

相关推荐

vue实现加入购物车的小球落入动画效果

Vue2框架学习一：基础语法

Vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存

element实现树形选择器，支持多选、回显正常显示

发表回复