如何在vue组件中引入外部的css和js文件[通俗易懂]

如何在vue组件中引入外部的css和js文件[通俗易懂]在使用vue框架开发时,我们都知道一个组件中可以同时写HTML、css、js代码,只需三个标签而已,如下:但是要真把所有的代码都写入一个组件文件当中,那么代码量是非常大的,极不便于修改和维护,这时就需要把css样式和js代码写到其他文件下,再引入组件当中。具体方法如下:在组件中引入css文件:<style>@importurl(css文件路径)</style>在组件中引入js文件:首先需要将我们…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

        在使用vue框架开发时,我们都知道一个组件中可以同时写HTML、css、js代码,只需三个标签而已,如下:

如何在vue组件中引入外部的css和js文件[通俗易懂]

        但是要真把所有的代码都写入一个组件文件当中,那么代码量是非常大的,极不便于修改和维护,这时就需要把css样式和js代码写到其他文件下,再引入组件当中。具体方法如下:

在组件中引入css文件:

<style>
   @import url(css文件路径)
</style>

如何在vue组件中引入外部的css和js文件[通俗易懂]

在组件中引入js文件:

        首先需要将我们的js模块“抛出”,让其他文件能获取到;如下,

function home() {
  console.log("我是js文件")
}

export {
  home
}

        其次在需要导入的文件导入;

<script>
   import { home } from "../assets/js/home.js";
</script>

        如图:

如何在vue组件中引入外部的css和js文件[通俗易懂]

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184693.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 书签备份「建议收藏」

    书签备份「建议收藏」BookmarksBookmarks书签栏Bookmarks关于Android实现微信分享的过程和思考-简书HiPP-Shop:Baby>Milchnahrungen>Combiotiklive.cnlive.com/tool/player.swfCity

  • lcd1602c语言程序分析,51单片机驱动LCD1602程序设计(C语言).doc

    lcd1602c语言程序分析,51单片机驱动LCD1602程序设计(C语言).doc51单片机驱动LCD1602程序设计电子爱好者社区4M#v@fm/EZ4y字符液晶绝大多数是基于HD44780液晶芯片的,控制原理是完全相同的,因此HD44780写的控制程序可以很方便地应用于市面上大部分的字符型液晶。字符型LCD通常有14条引脚线或16条引脚线的LCD,多出来的2条线是背光电源线VCC(15脚)和地线GND(16脚),其控制原理与14脚的LCD完全一样,定义如下表所示:?????…

  • org.aspectj aspectjweaver 报错

    org.aspectj aspectjweaver 报错http://mvnrepository.com/artifact/org.aspectj/aspectjweaver在pom中把版本改高一些就Ok了      org.aspectj     aspectjweaver     1.7.4   之前红色部分是1.6.11

  • bat time命令_bat获取文件修改时间

    bat time命令_bat获取文件修改时间最近公司的项目,需要部署一个oracle定时备份脚本,删除掉特定时间前的备份文件。BAT批处理文件结合windows系统(任务计划程序)正常情况下我们的任务计划会有反馈数值,通过它可以判断这个任务计划上次是否运行正常。代码0或0x0:操作成功完成。代码1或0x1:调用的函数不正确或调用了未知函数。代码10或0xa:环境不正确。代码0x8009000f…

  • 常用八大测试用例设计方法有哪些_测试用例编写方法

    常用八大测试用例设计方法有哪些_测试用例编写方法1、等价类划分(EquivalancePartitioning)测试的思想:将程序的输入域划分为若干个区域(等价类),并在每个等价类中选择一个具有代表性的元素生成测试用例。该方法是常用的黑盒(BlackboxTesting)测试用例(Testcase)设计方法。等价类划分可有两种不同的情况:有效等价类和无效等价类。有效等价类是指对于程序的规格说明来说是合理的、有意义的输入数据构成的集合,它能检验程序是否可以实现规格说明中所规定的功能需求。无效等价类是指对程序的规格说明是不合理的或无意义的输入数据所

    2022年10月12日
  • MySQL MHA配置常见问题

    MHA在MySQL数据库中被广泛使用,它小巧易用,功能强大,实现了基于MySQLreplication架构的自手动主从故障转移,从库重定向到主库并自动同步。尽管如此,在部署配置的过程中,由于疏忽总难

    2021年12月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号