Vue.js组件创建

￡神魔★判官ぃ 2021-09-16 12:26 372阅读 0赞

以下是我的学习总结，欢迎指教- - - -

**最终效果（单击左边文字菜单块导航栏弹出）：**  
![在这里插入图片描述][70]  
**步骤如下：**

1. 运行vue文件     命令：npm run dev

![在这里插入图片描述][70 1]

2. 打开App.vue文件开始制作组件，App.vue是主页，组件都在App.vue主页引入

*备注：在src文件夹目录下各建一个专门放css、 js、 img、的文件夹，  
我的被引入的组件是统一放在compoent目录下*  
![在这里插入图片描述][70 2]

3. 以下是注册组件、引用组件和调用组件的方法

![在这里插入图片描述][70 3]

4. 给被引入的组件添加css样式和js事件等

4-1、 js：如需要写js就必须要写在methods里面，当然我也尝试过写在methods的外面的里面，有报错，但是也达到了要的效果，但是我不建议写在methods的外面。  
![在这里插入图片描述][70 4]

4-2、	css:css可以直接写在<style></style>里面,也可以调用css文件样式，方法如图：

**//组件中引入css文件  
//注意：scoped：样式只对该组件有效，不影响其他组件**  
![在这里插入图片描述][70 5]

4-3、打开src文件下的main.js文件

![在这里插入图片描述][70 6]

//一样引入index.css样式文件

![在这里插入图片描述][70 7]

[70]: /images/20210724/1fb73df886d74fbf88a1ff19cb854910.png
[70 1]: /images/20210724/e8d9b1315d364926baf69c60485d65cf.png
[70 2]: /images/20210724/f7cb905429674397a9b3984c37ca283f.png
[70 3]: /images/20210724/abe8ed99999c4dd286dfad9c096d7d5a.png
[70 4]: /images/20210724/27440ec326064766958965a80b17c703.png
[70 5]: /images/20210724/0aae7511486844bd8c7ec67ac3592a46.png
[70 6]: /images/20210724/e6759bfff1fd464696bd83255d3059c8.png
[70 7]: /images/20210724/e63ee459a41c46b3af82e599eeea3b42.png

发表评论取消回复

表情：

评论列表（有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js组件(component)的创建

组件compoent 组件是什么创建组件创建全局组件使用组件创建局部私有组件组件的应用父子组件

快来打我*/ 2022年12月21日 00:44/ 0 赞/ 216 阅读

相关如何创建Vue组件

Vue 组件的创建方式一、什么是组件化对于组件化,大家都会说出是独立和通常可复用的这么一句话,可是面试官要问你的话… 面试官: 请谈谈你对Vue 的组件化的

川长思鸟来/ 2022年12月10日 14:38/ 0 赞/ 138 阅读

相关 Vuejs组件化开发

组件化开发 01-组件化开发 01-组件化开发的基本使用 02-全局组件和局部组件 03-父组件和子组件 04

Myth丶恋晨/ 2022年10月29日 07:44/ 0 赞/ 212 阅读

相关【Vuejs】1025- Vue 组件通信的 8 种方式

前言 > ❝ > > 做了半年的公司系统，终于就在前天上线了。后期改BUG时间拖得太长了，出现的大部分BUG 是前端与后端信息不对称导致的，逻辑性错误不怎么多，业

我就是我/ 2022年08月31日 00:53/ 0 赞/ 220 阅读

相关 Swing组件创建窗口应用

package com.swing; import java.awt.BorderLayout; import java.awt.event.

川长思鸟来/ 2022年08月07日 01:40/ 0 赞/ 70 阅读

相关 Vuejs——（８）Vuejs组件的定义

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。

怼烎@/ 2022年07月18日 01:52/ 0 赞/ 292 阅读

相关 Vuejs 插件开发

> by [yugasun][] from [yugasun.com/post/you-do…][yugasun.com_post_you-do]本文可全文转载，但需要保留原作

待我称王封你为后i/ 2022年05月23日 08:46/ 0 赞/ 222 阅读

相关 vuejs组件通信的eventHub(巴士）

eventHub以我理解，他有点像vuex eventHub是什么？但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。但是作为组件之间的通信已经足够了，

迈不过友情╰/ 2022年05月13日 08:34/ 0 赞/ 276 阅读

相关 vuejs组件通信精髓归纳

组件的分类 1. 常规页面组件，由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理

朴灿烈づ我的快乐病毒、/ 2022年03月08日 15:08/ 0 赞/ 220 阅读

相关 Vue.js组件创建

以下是我的学习总结，欢迎指教- - - - 最终效果（单击左边文字菜单块导航栏弹出）： ![在这里插入图片描述][70] 步骤如下： 1. 运行vue文件

￡神魔★判官ぃ/ 2021年09月16日 12:26/ 0 赞/ 373 阅读