script引入、import引入

于 2024-03-12 11:35:30 发布
阅读量607 收藏
点赞数 4
文章标签： javascript 前端 开发语言 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42076997/article/details/136645591
版权

<script type="module"></script>中，可以采用import的方式引入符合ES模块语法的js文件，ES语法现在的浏览器是支持的。不必使用包管理器命令安装（如 pnpm install xxx）否则还涉及到脚手架及编译（如pnpm dev）

<script type="module"></script>中也支持传统的js文件，传统的js文件将所有属性暴露

<script></script>传统引入模式，是不支持ES模块语法的

简单的实例如下：

old.js

const Name="old"

new.js

const MyObj={
	name:'new'
}
export default MyObj

 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="old.js"></script>
	</head>
	<body>
	</body>
	<script type="module">
		import MyObj from "./new.js"
	    console.log('0',MyObj.name)
		console.log('0',Name)
	</script>
	<script>
		console.log('1',MyObj.name)
		console.log('1',Name)
	</script>
</html>

console结果

Jianzhou_Li-李建洲
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在vue项目中引入highcharts图表的方法(详解)
08-27
在 Vue 项目中引入 Highcharts 图表的方法详解 在 Vue 项目中引入 Highcharts 图表是一种常见的需求，Highcharts 是一个功能强大且灵活的图表库，可以生成各种类型的图表，如柱状图、折线图、饼图等。下面我们将...
JavaScript 和 typeScript 中的 import、from
墨鱼菜鸡
07-11 3184
From：https://segmentfault.com/a/1190000018249137?utm_source=tag-newest Github - allowSyntheticDefaultImports should be the default?exports、module.exports和export、export deault到底是...
浅谈script，link，import，@import引入
weixin_49295874的博客
02-25 3760
1.script，link是html标签，script可以引入js,即可调用引入js里面的方法，link标签可以引入css样式图片。4.可操作性:link可以通过js操作dom（盗墓 文档对象模型）插入link标签改变样式，而@import不能。2.import是tp语法，可以引入js也可引入css。3.兼容性:link（是标签）没有兼容问题，@import不兼容ie5以下的浏览器.1.从属关系:link是html标签，@import是css提供的.链接式和导入式有什么区别（链接式，导入式，内嵌式，行内）
htm下的script使用import引入js报错
热门推荐
A13330069275的博客
12-06 1万+
将 script标签的type改成 &lt;script type="module"&gt; &lt;script type="module"&gt; import './yourJSModule' &lt;/script &gt;  
javascript中的import export
qq_44381427的博客
04-06 1144
javascript中的import export1）基本使用2）export default3）import *4）import export同时使用5）export from6）重复import同一模块 参考资料ECMAScript 6 入门（阮一峰） javascript中的import作用类似于java中的import，我需要使用另一个文件中的方法、变量就需要import这个文件。但与java中import区别在于，你只能使用所引入文件中export出去的方法、变量等。 1）基本使用 先创建一个js
详解 JavaScript 中的模块、Import和Export
hmily43的博客
04-18 4157
在互联网的洪荒时代，网站主要用 HTML和 CSS 开发的。若是将 JavaScript 加载到页面中，一般是以小片断的形式提供效果和交互，通常会把全部的 JavaScript 代码全都写在一个文件中，并加载到一个script标签中。尽管能够把 JavaScript 拆分为多个文件，可是全部的变量和函数仍然会被添加到全局做用域中。前端 可是后来 JavaScript 在浏览器中发挥着重要的做用，迫切须要使用第三方代码来完成常见任务，而且须要把代码分解为模块化的文件，避免污染全局命名空间。java E..
如何在Django项目中引入静态文件
09-18
<script src="{% static 'myapp/js/jquery.js' %}"></script> ``` 接下来，我们转向第二个话题，即如何在Django中从前端提交数据到后端。这通常涉及到HTML表单的使用。在HTML模板中创建一个`<form>`标签，指定URL...
vue 引入公共css文件的简单方法(推荐)
08-28
在入口 js 文件（通常是 main.js）中，我们可以使用 import 语句来引入公共的 CSS 文件。例如： ```javascript import Vue from 'vue' import App from './App' import router from './router' import axios from '...
vue中引入mxGraph的步骤详解
10-16
在Vue项目中引入mxGraph，一个强大的图形编辑库，可以创建复杂的交互式图表和图形界面，需要遵循几个关键步骤。以下是对这些步骤的详细解释： ### 第一步：安装npm包 首先，你需要通过npm（Node Package Manager）...
关于引入vue.js 文件的知识点总结
10-15
1. **通过 `<script>` 标签直接引入 CDN 链接**： 这是最常见的方法，适用于快速原型开发或测试。在HTML文件中添加以下代码，可以从Vue.js的CDN（内容分发网络）上加载最新版本的库： ```html <script src=...
彻底理解JavaScript ES6中的import和export
Shameless的博客
09-05 3616
前端工程，在最早的时候是没有模块的概念的。随着前端工程的发展，前端开发也越来越规范化，更像是软件工程了。那么随之而来的，为了解决工程化的问题，就引入了模块的概念。但是在早期，因为ecmascript原本是没有模块语法的，所以采用的都是社区的各种版本协议，其中影响最深的，就是nodejs使用的CommonJS规范。当模块化的概念越来越重要的时候，在es6中，引入了模块的语法：import ，下面我们简单了解一下，import是怎么使用的。一下内容，参考官方文档。
Java Script 常用的引入方式
weixin_50149012的博客
09-02 1791
java script常用的三种引入方式： 1.行内引入 <开始标签 on+事件类型=“js代码”></结束标签> 行内引入方式必须结合事件来使用，但是内部js和外部js可以不结合事件。 <inputtype="button"οnclick=“alert(‘行内引入’)” value=“button” name=“button”> <button οnclick=“alert(123)”>点击我 2.内部引入 在head或body中，定义script标签，
import和export在浏览器中的使用方式
ExtremeExplorer的博客
04-04 4259
一般情况下，import 和 export 的使用通常是在 webpack、Vite 等构建工具中已模块的形式使用，而想在浏览器中直接使用，则需要通过一下方式：
JavaScript引入方法
weixin_66109724的博客
09-22 5001
看过的都说好，看了又好像没看（一点用没有，并成功浪费你两分钟）。
总结：JS文件中引入其他JS文件的方法，以及＜script＞标签中间如何嵌套＜script＞标签
weixin_48033662的博客
08-28 4991
本质上相当于在页面的body或者head中引入一组新的script标签，从而实现引入新的JS文件；而并不是两组script标签的直接互相嵌套，这样并不会效果。
Javascript模块引入方式
最新发布
@不喝海之言@
08-10 1267
原生JavaScript中使用import组织项目模块。
JavaScript
qq_55137734的博客
04-22 2719
什么是JavaScript？
一篇文章弄懂 JavaScript 中的 import
weixin_34149796的博客
12-07 805
import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode，导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。 语法 import defaultExport from “module-name”; import * as name from “module-name”; import { export } from “module-name”; ...
javascript的四种引入方法
ZhaoYulin6的博客
09-08 1175
Script标签引入方式：4种 1.script的标签 <script> var str1 = "123"； console.log(str1)；//控制台打印 </script> 2.a标签引入 <a href="javascript:alert('hah')">sdfsdf</a> 3.div后面引入 <div onclick="alert('我被点击了')"></div> //直接在后面写点击事件 4.script引入JS
vue 中使用script 引入js
03-16
在Vue中使用`<script>`标签引入JavaScript文件的方法如下： 1. 在Vue组件的`<template>`标签中添加需要引入的JavaScript文件的路径，例如： ```html <template> <div> <!-- 这里是组件的模板 --> </div> </template> ``` 2. 在Vue组件的`<script>`标签中使用`import`语句引入JavaScript文件，例如： ```javascript <script> import myScript from './myScript.js'; export default { // 这里是组件的选项 } </script> ``` 其中，`myScript.js`是需要引入的JavaScript文件的路径，`myScript`是引入的JavaScript文件的默认导出对象。 3. 在Vue组件中使用引入的JavaScript文件，例如： ```javascript <script> import myScript from './myScript.js'; export default { mounted() { myScript.doSomething(); } } </script> ``` 其中，`mounted`是Vue组件的生命周期钩子函数，`myScript.doSomething()`是引入的JavaScript文件中的一个函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值