vue引用外部JS并调用JS文件中的方法实例

以下是针对vue引用外部JS并调用JS文件中的方法实例的完整攻略和示例。

步骤一:将外部JS文件导入vue项目中

在vue项目根目录下新建assets文件夹(如果存在则跳过此步骤),将外部JS文件拷贝到该文件夹下。此外,如果外部JS文件依赖于jQuery等其他库,也需要将这些库文件一起拷贝到assets文件夹中。

步骤二:在vue组件中进行 JS 文件引用

在Vue组件中引用上述JS文件,有两种方式:

方式一:在组件的<script>标签中使用require函数引入

在需要使用外部JS文件的组件中,在<script>标签中使用require函数引入外部JS文件,并将导入的内容赋值给某个变量,以实现JS文件的调用。

示例代码如下:

<script>
const outJs = require('@/assets/xx/xx.js');
</script>

其中,require函数中的路径表示assets文件夹下的具体位置。

方式二:在index.html文件中通过<script>标签动态加载

在需要使用外部JS文件的组件中,可以在index.html文件中,通过<script>标签动态加载JS文件。同时,为了避免JS文件被重复加载,最好将JS文件的加载放在<head>标签中。

示例代码如下:

<head>
  <script src="/assets/xx/xx.js"></script>
</head>

其中,路径依然表示在assets文件夹下的具体位置。

步骤三:在vue组件中调用JS方法

调用外部JS文件的方法方式如下:

outJs.fn();

其中,fn()是在外部JS文件中定义的一个方法。在 Vue 中也可以将该方法设置成 Vue 的全局变量,以便在组件之间共享。

至此,引入外部JS文件并调用其中方法的过程完成。

完整示例

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue引用外部JS并调用JS文件中的方法实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="/assets/xx/xx.js"></script>
</head>
<body>
  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component',{
      template: '<div>{{content}}</div>',
      data() {
        return {
          content: '我是my-component组件'
        }
      },
      mounted() {
        outJs.fn();
      }
    })

    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>
// xx.js
function fn() {
  console.log('这是外部JS文件xx.js的fn方法');
}

export default {
  fn
}

这个例子中,我们建立了一个Vue项目,并在其中引入了外部JS文件,最后在Vue组件my-component中调用了外部JS文件中的fn方法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue引用外部JS并调用JS文件中的方法实例 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 实例讲解DataTables固定表格宽度(设置横向滚动条)

    以下是“实例讲解DataTables固定表格宽度(设置横向滚动条)”的完整攻略。 1. 前置知识 HTML、CSS、JavaScript基础知识 jQuery库基础知识 DataTables插件基础知识 2. 实现思路 此处实现的主要思路是通过CSS样式来控制表格宽度,从而达到固定表格宽度的效果,同时使用jQUery插件来实现横向滚动条的效果。 具体步骤如下…

    css 2023年6月10日
    00
  • css判断不同分辨率显示不同宽度布局实现自适应宽度

    实现 CSS 判断不同分辨率显示不同宽度布局的关键技术是通过 CSS 媒体查询(Media Query),其中,媒体查询是通过检测设备特性和浏览器特性来判断采用何种样式表进行渲染,从而使得同一份 HTML 代码用户依然可以获得最佳的用户体验。下面是实现该技术的完整攻略: 首先,需要使用 meta 标签指定页面宽度和缩放。常见的 meta 标签形式如下: ht…

    css 2023年6月9日
    00
  • js检测标题与描述中的关键词发现就替换或跳转到别的页面

    实现“js检测标题与描述中的关键词发现就替换或跳转到别的页面”,需要以下步骤: 在页面中添加一个用于承载脚本的script标签,并编写脚本。 <script> //这里是你的代码 </script> 定义需要匹配的关键词列表。 var keywords = [‘关键词1’, ‘关键词2’, ‘关键词3’]; 获取页面中的title元素…

    css 2023年6月9日
    00
  • 在Ruby on Rails中使用AJAX的教程

    “在Ruby on Rails中使用AJAX的教程”的完整攻略如下: 1. AJAX的概述 AJAX是Asynchronous JavaScript and XML的缩写,意为异步JavaScript和XML。它是一种在Web应用程序中进行异步操作的技术,可以在Web页面无需重新加载的情况下向服务器发送请求并接收响应。在Ruby on Rails中,我们可以…

    css 2023年6月10日
    00
  • CSS教程:总结清除浮动的方法

    下面是关于“CSS教程:总结清除浮动的方法”的完整攻略: 1. 什么是浮动? CSS中的浮动(float)属性可以让元素脱离文档流,并把元素移到其容器的左边或右边。应用float属性的常见元素有图片、文字和网页布局中的容器等。在网页布局中,元素浮动后,对其他元素的布局也会产生影响,这时候就需要使用清除浮动。 2. 为什么需要清除浮动? 当一个元素设置为flo…

    css 2023年6月9日
    00
  • HTML+CSS3 模仿Windows7 桌面效果

    HTML+CSS3 模仿Windows7 桌面效果是一项非常有趣的网页设计项目。它通过 HTML 和 CSS3 技术模拟了一个 Windows7 操作系统的桌面环境,让用户在网页上体验到桌面应用程序等交互体验。 以下是实现 HTML+CSS3 模仿Windows7 桌面效果的完整攻略: 第一步:准备HTML骨架 首先,我们需要搭建好 HTML 骨架,以便后面…

    css 2023年6月9日
    00
  • JqGrid web打印实现代码

    下面是详细讲解“JqGrid web打印实现代码”的完整攻略: JqGrid web打印实现代码详解 JqGrid web打印简介 JqGrid是一款基于jQuery的网页表格插件,它提供了丰富的功能和选项,可以非常轻松地创建和展示各种类型的表格。而JqGrid web打印实现代码则是在JqGrid的基础上,添加了网页打印的功能,方便用户在页面上进行数据打印…

    css 2023年6月10日
    00
  • javascript动态向网页中添加表格实现代码

    添加表格是前端开发中常用且必要的操作之一,其中JavaScript作为一门强大的脚本语言,可以方便地动态向网页中添加表格。下面我将为大家讲解如何使用JavaScript实现动态添加表格。 1.创建一个表格容器 首先需要在HTML中创建一个用于存放表格的容器,例如一个<div>标签: <div id="myTable"&g…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部