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

一 概述

  • 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 效果图