vue组件01-组件的使用 全局与私有组件

原创 已于 2022-04-13 01:22:02 修改 · 951 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue
于 2022-04-13 01:21:06 首次发布
本文详细介绍了Vue组件的构成，重点解析了`export default`的作用，强调了在书写组件时data与methods应平级放置。此外，阐述了组件的使用步骤，并通过示例展示了组件的全局注册与调用。最后，讨论了私有组件与全局组件的区别，指出全局组件一旦注册，可在应用的任何地方直接使用。

一、组件的三大部分

这里面最主要的是export default的内容 仔细阅读上图中 关于export default周围的注释

书写函数时候小心，data与methods平级

二、组件的使用

现在要做出这种效果

组件的三步骤

 代码形式就是上图 展示形式是下图

三、私有组件和全局组件

全局组件：一次注册全局调用

 上图中最后一行 参数一就是 使用时标签的名字 参数二就是注册的名字

  全局注册好组件后 在别的组件中可以直接使用这个标签来调用这个组件 比如在Left中直接使用

 

 最终在left和right中都调用myccount 组件

黑马前端学习笔记

laravel-vue-private-chat-app
04-18
关于Laravel Laravel是一个具有表达力，优雅语法的Web应用程序框架。 我们认为，发展必须是一种令人愉快的，富有创造力的经历，才能真正实现。 Laravel通过减轻许多Web项目中使用的常见任务来减轻开发工作的痛苦，例如： 。 。 用于和存储的多个后端。 富有表现力，直观的 。 数据库不可知。 。 。 Laravel易于访问，功能强大，并提供大型，强大的应用程序所需的工具。 学习Laravel Laravel拥有所有现代Web应用程序框架中最广泛，最全面的和视频教程库，因此轻而易举地开始使用该框架。 如果您不想读书，可以使用Laracasts提供帮助。 Laracasts包含1500多个视频教程，涉及各种主题，包括Laravel，现代PHP，单元测试和JavaScript。 深入我们全面的视频库，提高您的技能。 Laravel赞助商 我们要感谢以下赞助商为
了解Vue
盛夏高歌的蝉
08-06 453
什么是vue实例？ new Vue(）的时候做了什么？ Vue.use()是干嘛的？
【private关键字的作用及使用】
m0_48114733的博客
03-02 479
package cn.itcast.day06.demo03; /* 问题描述：定义Person的年龄时，无法阻止不合理的数值被设置进来 解决方案：用private关键字将需要保护的成员变量进行修饰 一旦使用了private进行修饰，那么本垒当中仍然可以随意访问 但是！超出了本类范围之外就不能再直接访问了 间接访问private成员变量，就是定义一对儿Getter/Setter方法 必须叫setxxx/getxxx命名规则 对于Getter来说，不能有参数，返回值类型和成员变量对应； 对于Sett.
Vue 介绍 -1
weixin_45905671的博客
03-31 222
VSCode插件安装 开发 Vue 项目，使用 .vue 的单文件开发，就需要一些插件来帮我们识别 .vue 文件。插件安装在 Extension 中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。 这里我们开发 Vue 推荐的几个插件： jshint ： js 代码规范检查。 Beautify ：一键美化代码的插件。 Vetur ： .vue 文件识别插件。 Javascript...
vue组件基础
LiuPangZi6的博客
09-27 250
定义全局组件 Vue.component(‘组件名’, Vue配置信息{}) template 定义的是显示的html代码，用 `` 来写字符串，方便编写和阅读 Vue.component('my-component',{ template: ` <div> <div>我是一个全局组件</div> ...
Vue中自定义私有指令
weixin_45616246的博客
04-08 355
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义私有指令</title> <script src="../../vue/vue-v2.6.11.js"></script>...
【免费下载】 Vue.js时间轴组件——timeline-vuejs 安装与配置完全指南
gitblog_07760的博客
09-13 1697
timeline-vuejs 是一个简约的时间轴组件，专为Vue.js设计。由开发者 Pablo Sirera 创建并维护，它提供了一个直观易用的方法来展示一系列按时间顺序排列的事件。此项目基于MIT许可协议开放源代码。 ## 关键技术和框架 - **主要编程语言**: JavaScript (采用Vue.js框架) - **依赖库**: 本项目主要依赖于Vue.js，没有列出额外的大型依赖，因...
基于vue的ui组件库开发—— 01
2401_86337335的博客
09-29 1364
前言随着重复项目的增多，通用组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。
vue 入门笔记 09 组件 01_全局组件&局部组件
唐僧的专栏
02-20 345
                                                  组件01  全局组件&amp;局部组件 index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt;
VueJS 前端项目（三）
最新发布
龙哥盟
09-01 1119
组件嵌套是一种组合方法，其中应用程序由更小的单元（组件）构建而成。应用程序可以被视为组件相互嵌套。在这种情况下，任何共享功能将通过组件提供。Vue.js 提供了其他组合方法。基于组件的组合可能会非常冗长，这意味着我们会在需要某个特定功能的地方重复导入。这不符合 DRY 原则。为了避免这种重复和冗长，我们可以在的每个消费者中全局注册。同样，应用程序也可以由不同类型的原语（混合、插件和组件）构建而成。为了最大灵活性，组件可以以不同的方式定义，而不仅仅是 Vue.js 的单文件组件文件（.vue文件）。
vue-cli构建项目增加私有化环境下的scripts域名参数
MISS_zhang_0110的博客
01-11 410
vue-cli构建项目增加私有化环境下的scripts域名参数一、.env.private二、 config/services.ts三、 vue.config.js四、vue.params.js 可以随时更改测试和生产后端域名 一、.env.private NODE_ENV=private VUE_APP_ENV_CONFIG=private VUE_APP_BASE_URL=http://plat-gateway.a2.umss.cn VUE_APP_Auth_URL=http://oauth
vue 项目环境变量设置
deary
06-26 1993
一、.env.development 开发环境 # 开发环境 # 环境标志 ENV = 'development' # 基础API VUE_APP_BASE_API = '/api' VUE_CLI_BABEL_TRANSPILE_MODULES = true 开发环境跨域代理 "use strict"; const path = require("path"); const defaultSettings = require("./src/settings.js"); functi.
【Vue】指令调用的全局组件
m0_57874866的博客
08-16 1636
定义全局的组件，通过全局指令的方式调用，不用通过组件导入的方式调用，类似$message
vue中使用全局组件
qq_23135259的博客
02-13 1781
vue2.0,全局组件
vue开发自定义的全局公共组件
WanFengZhou
08-20 4970
这里我主要介绍两种自定义全局公共组件的方法 （1）第一种： 首先在components中新建一个文件夹，我这里做的是全局加载动画组件所以命名的是Loading文件夹 如图： 其中index.js为组件加载文件，index.vue为组件模板文件 index.js文件： // 引入组件 import Loading from './index.vue' // 创建个空对象 const obj = {} // 设置安装方法 obj.install = (Vue) => { // 1. 创建组件构造
【Vue框架】Vue2中组件之三种创建全局组件方式、创建私有组件、区分父组件向子组件传值、动画组件、传方法与子组件向父组件传值（附源码）
量化Mike
04-02 1183
文章目录1.1 创建全局组件1.2 创建私有组件1.3 组件中的data和methods1.4 组件选项卡切换案例1.5 动画组件1.6 父组件向子组件传值1.7 父组件向子组件传递方法1.8 子组件向父组件传值1.9 Vue获取DOM元素的方法（ref） 1.1 创建全局组件 第一种：创建全局组件-Vue.extend 第二种：创建全局组件-直接使用Vue.component进行创建 第三种：引入自定义组件（常用） <!DOCTYPE html> <html lang="en"&gt
Vue中创建私有组件的两种方式，附相关架构及资料
m0_74931199的博客
04-11 503
好啦好啦，我知道啦。（3）使用组件：还是引用 标签形式 ，引入自己的组件vueApp在被控制的 #app 外面，使用 tempalte 元素，定义组件的HTML结构Well done！自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
使用vue发布私有化组件到npm
weixin_47893190的博客
04-21 500
3.npm run xxx（自定义包名，建议和组件名称一样），打包成功后会在根目录下生成一个和组件名称一样的文件夹，把该文件夹下的 xxx.umd.min.js 复制到 install 下对应组件的 packages 文件夹下（如果有 css 文件也需要一起复制到对应的目录下，复制完之后可以把生成的文件夹删掉）3.src文件夹下建立 installs，并在这个 installs 下建立对应的组件文件夹，且创建 index.js（组件注册代码）2.在项目中的main.js引用，Vue.use即可。
05-vue全局私有组件，组件的切换，组件的简单动画，父子组件之间方法和值的传递
乐百寿
09-03 471
vue全局私有组件，组件的切换，组件的简单动画，父子组件之间方法和值的传递
vue导入私有组件和注册全局组件和props自定义属性(插件配置@路径提示)
weixin_68658847的博客
12-30 1688
vue导入私有组件和注册全局组件和props自定义属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值