文章目录

参考
描述
组件化开发
- 组成
- template
- script
- style
- main.js
使用
- 嵌套关系
- 组件的使用
- - Left
  - Right
  - 举个栗子
全局组件及私有组件
- 私有组件
- 全局组件
- - 举个栗子
  - - main.js
    - App.vue

参考

项目	描述
VueJS	官方文档
搜索引擎	Bing
哔哩哔哩	黑马程序员

描述

项目	描述
Edge	109.0.1518.70 (正式版本) (64 位)
操作系统	Windows 10 专业版
@vue/cli	5.0.8
npm	8.19.3
VueJS	2.6.14

注：

推荐使用 Vue CLI 初始化 Vue 项目，如果你不清楚如何使用 Vue CLI ，欢迎移步至我的另一篇博客 Vue CLI（Vue.js 开发的标准工具） 。

组件化开发

组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人负责编写不同的组件。
前端页面可以借助某种框架（如Vue.js、Angular、React）来实现组件化开发，使代码更容易复用。此时，一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成的了，而是按照组件的思想将网页划分成一个个组件，如轮播图组件、列表组件、导航栏组件等。将这些组件拼装在一起，就形成一个完整的网页了。

上述内容引用自网络

使用 Vue.js 框架编写的单文件组件，以 vue 作为文件扩展名。

组成

每一个 Vue 组件都由三部分组成，即模板、样式及行为。打开 Vue 中的一个组件，你很有可能看到如下结构：

<template>
模板
</template><script>
行为
</script><style>
样式
</style>

注：

每一个组件中都必须要包含 template 标签，即需要有模板代码，这是一个组件的基础部分。

template

请将根组件 App.vue 文件中的默认内容清空并填充如下内容：

<template>
<div id="app"><p class="text">RedHeart</p>
</div>
</template>

执行效果：

注：

template 元素是 VueJS 提供的容器标签。
template 元素内仅能存在一个根节点。

script

<template>
<div id="app"><!-- 使用内容渲染指令指定显示内容 --><p class="text" v-text="username"></p><!-- 为按钮添加点击事件 --><button class="replace" @click="replace()">修改用户名</button>
</div>
</template><script>
// 在 Vue 组件中，你需要使用 export Default{}
// 来封装 JavaScript 业务逻辑。
export default {// 在 Vue 组件中，你需要使用 data() 函数// 来返回数据对象。data(){return {// 定义数据username: 'RedHeart'}},// 定义事件调用函数methods: {replace(){this.username = 'TwoMoons'}}
}
</script>

效果：

注：

如果你像这样定义一个数据：

data: {username: 'RedHeart'
}

那么这个数据将影响到当前组件的其他实例。具体可以前往 VueJS 官方文档 中查看。

style

<template>
<div id="app"><!-- 使用内容渲染指令指定显示内容 --><p class="text" v-text="username"></p><!-- 为按钮添加点击事件 --><button class="replace" @click="replace()">修改用户名</button>
</div>
</template><script>
// 在 Vue 组件中，你需要使用 export Default{}
// 来封装 JavaScript 业务逻辑。
export default {// 在 Vue 组件中，你需要使用 data() 函数// 来返回数据对象。data(){return {// 定义数据username: 'RedHeart'}},// 定义事件调用函数methods: {replace(){this.username = 'TwoMoons'}}
}
</script><style>
.replace{color: dodgerblue;
}
</style>

效果：

注：

如果你在 style 元素中添加 lang=“less” 属性，那么你可以使用 Less 语法编写组件的样式。

main.js

位于 Vue 项目文件中的 src 文件见下的 main.js 用于将组件渲染到位于 public 文件夹中的 index.html 中。

在默认情况下（刚使用 Vue CLI 创建 Vue 项目后），main.js 长这样：

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

其中：

import 语句用于导入 VueJS 及需要使用到的相关组件。
render 属性用于指定需要渲染的组件。
使用 $mount() 来指定渲染区域。

使用

嵌套关系

多个组件在封装后但没有使用前这段时间中，组件之间并没有任何关系。组件之间产生关系发生在组件的使用过程中。根据组件之间不同的嵌套关系，我们可以得到两种组件间的关系，即父子关系与兄弟关系（这两种关系是组件间最为常见的关系）。

父子关系
一个组件内部嵌套着另外的组件，那么它们之间存在父子关系。
兄弟关系
一个组件内部嵌套着另外的组件，这些被嵌套的组件之间存在兄弟关系。

组件的使用

在创建一个 Vue 项目及若干组件后，若你需要使用这些组件，那么你需要进行如下几个步骤：

导入组件。
在 export default{} 中的节点 components 下注册组件。
在导入组件的父级组件中以标签的形式来使用组件。

Left

这是接下来将要使用到的子组件 Left，你可以将该内容保存到 Vue 项目中的 components 文件夹中。

<template><div class="left-container"><h3>Left 组件</h3><hr /><MyCount :init="9"></MyCount></div>
</template><script>
export default {}
</script><style lang="less" scoped>
.left-container {padding: 0 20px 20px;background-color: orange;min-height: 250px;flex: 1;
}h3 {color: red;
}// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {color: pink;
}
</style>

Right

这是接下来将要使用到的子组件 Right，你可以将该内容保存到 Vue 项目中的 components 文件夹中。

<template><div class="right-container"><h3>Right 组件</h3><hr /><MyCount :init="6"></MyCount></div>
</template><script>
export default {}
</script><style lang="less">
.right-container {padding: 0 20px 20px;background-color: lightskyblue;min-height: 250px;flex: 1;
}
</style>

举个栗子

<template><div class="app-container"><h1>App 根组件</h1><hr /><div class="box"><!-- 以标签形式指定需要使用到的组件 --><Left></Left><Right></Right></div></div>
</template><script>
// 导入组件
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';export default {// 注册组件components: {Left,Right}
}
</script>// 使用 CSS 预处理器 Less 对组件的样式进行设置
<style lang="less">
.app-container {padding: 1px 20px 20px;background-color: #efefef;
}
.box {display: flex;
}
</style>

执行效果：

注：

在 JavaScript 中，对象的属性名与属性值如果相同，则可以使用属性名来代表属性名及属性值。因此，

components: {Left,Right}

的完整写法为：

components: {Left: Left,Right: Right}

其中，属性名代表注册组件后，使用该组件需要使用的名称。属性代表需要被组成的组件的名称。

如果你使用 Vue CLI 构建 Vue 项目，那么你可以在路径中使用 @ 代表当前项目文件中的 src 文件夹。

全局组件及私有组件

私有组件

使用 export default{} 下的 components 节点注册的组件为私有组件。私有组件仅能在注册该组件的父级组件中使用。

全局组件

被注册的全局组件可以被任意组件所使用。使用 Vue.component() 函数，你可以将某个组件组成为全局组件。

Vue.component('使用该组件时需要使用的名称', 被注册组件的名称);

举个栗子

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 导入 Left 组件及 Right 组件
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';// 将这两个组件注册为全局组件
Vue.component('GlobalLeft', Left);
Vue.component('GlobalRight', Right);new Vue({render: h => h(App),
}).$mount('#app')

App.vue

<template><div class="app-container"><h1>App 根组件</h1><hr /><div class="box"><!-- 使用全局组件 --><GlobalLeft></GlobalLeft><GlobalRight></GlobalRight></div></div>
</template><script>
export default {// 并未在此处注册任何组件
}
</script>// 使用 CSS 预处理器 Less 对组件的样式进行设置
<style lang="less">
.app-container {padding: 1px 20px 20px;background-color: #efefef;
}
.box {display: flex;
}
</style>

效果：

可以看到，我们并没有在 App.vue 中注册组件。但可以直接使用已经被注册的全局组件。

VueJS 基础之组件相关推荐

五、Web App 基础可视组件属性（IVX 快速开发教程）
五.基础可视组件属性在 iVX 中各个组件存在不同的属性,这些属性用于设置显示的样式或者是自身具备的特征等,通过更改这些属性可以极大的方便我们进行项目的创作. 大多数组件都拥有相同的属性,相同属性在 ...
四、WebApp 基础可视组件（IVX 快速开发教程）
四.基础可视组件通过本节你将了解 iVX 开发中的核心-- iVX 组件的使用方法.iVX 的组件是开发应用时所必要的对象,通过这些对象你将快速的完成应用的开发. 在 iVX 应用开发中,所有交互. ...
-组件基础-局部组件 // 局部组件的简写
-组件基础-局部组件 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
组件基础-全局组件//全局组件的简写
组件基础-全局组件 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
云计算教程学习入门视频课件：云计算基础服务组件讲解
云计算服务,即云服务 . 中国云计算服务网的定义是:指可以拿来作为服务提供使用的云计算产品.包括云主机.云空间.云开发.云测试和综合类产品等.在本文中和大家讲解下云计算基础服务组件内容,基础服务组 ...
Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
511遇见易语言基础命令组件和算法
一.易语言基础命令组件 1:易语言教程-窗口 2:易语言教程-编辑框和按钮 3:易语言教程-信息框 4:易语言教程-数据类型 5:易语言教程-变量(全局变量,程序集变量,局部变量,静态变量) 6:易语 ...
RN基础以及组件学习技巧
RN基础以及组件学习技巧上一篇博客讲了RN环境的搭建,和RN项目的创建以及运行,如有什么问题,可以留言这节讲下RN基础以及组件的学习这是RN项目的结构图,index.android.js 和 i ...
云计算学习入门：云计算基础服务组件讲解
云计算服务,即云服务 . 中国云计算服务网的定义是:指可以拿来作为服务提供使用的云计算产品.包括云主机.云空间.云开发.云测试和综合类产品等.在本文中和大家讲解下云计算基础服务组件内容,基础服务组 ...

VueJS 基础之组件

文章目录

参考

描述

组件化开发

组成

template

script

style

main.js

使用

嵌套关系

组件的使用

Left

Right

举个栗子

全局组件及私有组件

私有组件

全局组件

举个栗子

main.js

App.vue

VueJS 基础之组件相关推荐

最新文章

热门文章