Vue2.0开发之——Vue组件-组件的基本使用(31)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • Vue组件—组件化开发
  • Vue组件—组件的三个组成部分
  • Vue组件—示例

二 Vue组件—组件化开发

2.1 什么是组件化开发

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

2.2 vue 中的组件化开发

  • vue 是一个支持组件化开发的前端框架。
  • vue 中规定：组件的后缀名是.vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

三 Vue组件—组件的三个组成部分

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

  • template -> 组件的模板结构
  • script -> 组件的 JavaScript 行为
  • style -> 组件的样式

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

3.1 template

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

1
2
3
<template>
	<!--当前组件的DOM结构，需要定义到template标签的内部-->
</template>

主意：

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

3.2 script

vue 规定：开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑
<script > 节点的基本结构如下

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

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

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

1
2
3
data:{ //组件中，不能直接让data指向一个数据对象(会报错)
	count:0
}

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：

https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

3.3 style

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

1
2
3
4
5
<style>
h1{
  font-weight:normal;
}
</style>

让 style 中支持 less 语法

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

1
2
3
4
5
6
7
8
<sytle lang="less">
h1{
  font-weight:normal;
  span{
  	color:red;
  }
}
</style>

三 Vue组件—示例

3.1 template

1
2
3
4
5
6
7
8
9
<template>
  <div>
    <div class="test-box">
      <h3>这是用户自定义的 Test.vue --- {{ username }}</h3>
      <button @click="chagneName">修改用户名</button>
    </div>
    <div>123</div>
  </div>
</template>

3.2 script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
  // 注意：组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {
      username: 'admin'
    }
  },
  methods: {
    chagneName() {
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '哇哈哈'
    }
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 当前组件中的过滤器
  filters: {}
}
</script>

3.3 style

1
2
3
4
5
6
7
8
<style lang="less">
.test-box {
  background-color: pink;
  h3 {
    color: red;
  }
}
</style>

3.4 效果图