在外部js中对vue内容进行修改

最新推荐文章于 2023-09-21 19:55:19 发布
最新推荐文章于 2023-09-21 19:55:19 发布
阅读量3.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37613112/article/details/114526726
本文探讨了如何在Vue组件中导入并使用外部定义的函数，尤其是当该函数包含一个需要在Vue中触发操作的click事件监听器。首先尝试了使用全局变量存储数据，但遇到问题；最终通过函数参数传递处理函数的方式解决了问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述

在某个js文件中定义了一个函数func，并export，在vue中import func，在func中有一个监听器，需要在click事件发生时执行某个操作，但是这个操作是在vue中执行的，也就是说监听器定义在外部js的函数中，而触发的操作需要在vue中完成。

解决

一开始是想用一个全局变量（例如window.localStroage.setItem）在click事件触发时存储相关参数，然后在vue中监听这个参数，发生改变时，执行vue中的处理函数。但是遇到了一些问题，并且最后也没有成功。
后来想到可以直接在func的参数中定义一个函数handle，将vue中的处理函数作为参数传递给func，func的click事件触发时，直接在func内部调用handle函数进行处理即可。
Vue实战指南：Vue组件如何引用外部js
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-18 3860
在Vue.js应用开发中，有时候我们需要在组件内部引入外部JavaScript库或脚本文件来增强组件的功能。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。这里需要注意的是，由于ES模块（如上所示）和CommonJS规范（如Node.js中require()）的区别，确保你在正确的环境中正确地导入库。如果某个外部JS库只在一个特定的组件中使用，那么可以仅在这个组件中局部引入。如果你使用的是Vue CLI创建的项目，可以通过npm安装库，并在。
vue项目js 公共js文件
01-02
一个vue项目的 js公共包 里面拥有很多 js封装好的方法 是一个工具类
外部JS给vue变量赋值
真皮的博客
10-15 3244
如果你在外部修改vue的值，你可能得考虑下设计结构得问题了。 迫不得已得解决办法 <inputv-model="dataForm.partNo"type="text"id="partNoId"name="partNoName"/> 外部使用jquery给绑定了得vue赋值 $("#equipmentCodeId").val("11") 赋值后没有反应，触发该input得input事件 $("input[name='equipmentCodeName']")[0].d...
在JS中同步修改vue中的变量
qq_38861711的博客
08-15 5137
问题：在处理一个功能上遇到一个问题：在vue组件中，引入了一个JS文件，在JS文件动态创建了一些DOM节点，需要侦测dom节点中内容的变化同时改变vue中组件的内容。 思考：因为它是单独的一个JS文件，里面动态生成的dom可以通过oninput来侦测输入内容的变化，但要实时更新到vue组件中，那只能找他们的连接点或者搭桥(借助vuex、localStorage这些全局变量)，想着可以利用对象类型，因为其是将引用放在堆中，真正的值存放在栈中，通过传递其引用作为桥梁来达到JS文件中修改vue中值的效果。 解决：
原生JS实现vue中data值的修改与渲染
WHY_222的博客
11-22 4250
前言 砖搬多了就得想想怎么造砖，Vue使用多了，也得想想Vue是咋实现，Vue用着确实舒服，仔细了解一下，背后做的操作也太多了吧，但是再多的操作也是一个一个积累起来的吧！ 先记录一下怎么实现data中值的渲染与修改 class Wvue extends EventTarget { constructor(option) { super() console.log(option)...
使用 js操作dom 改变 vue 的 input 数据
qq_38508172的博客
09-21 899
使用 js操作dom 改变 vue 的 input 数据
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
10-15
在Vue.js开发过程中，有时我们会遇到一个问题：直接通过JavaScript操作HTML元素的值，比如修改文本框的`value`属性，却发现这些更改并未反映到Vue的数据模型中。这是因为Vue采用的是数据驱动视图的模式，它依赖于...
Vue项目中引入外部文件的方法（css、js、less）
10-19
在Vue项目中，正确地引入外部文件如css、js和less是构建高效可维护项目的基础。本文将详细探讨如何在Vue项目中引入这三种类型的外部文件。 首先，我们来讨论引入css文件。通常，外部css文件可以帮助我们进行样式...
vue打包可修改IP的js文件（基础操作方法）
weixin_52890961的博客
02-17 1120
vue部署可修改IP
vue后台模拟数据，修改dev-server.js文件
paullinjie的博客
08-15 1780
vue老版本后台模拟数据dev-server.js  最新的vue里dev-server.js被替换成了webpack-dev-conf.js 在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改 第一步，在const portfinder = require(‘portfinder’)后添加 第二步 data.json数据  完成后重新启动运行命...
vue 引入外部js的变量、方法（还可注册为全局）
热门推荐
firstlt0217的博客
08-07 1万+
1. 外部JS文件 var URL_CONFIG = { URl : 'https://[subdomain].tianditu.com/img_w/wmts',//天地图影 }; export { URL_CONFIG } 1，变量引用 外部js: var s = "变量数据"; export default{ customData:function () { return s; } }
解决vue页面注入js修改input值
m0_59057848的博客
12-15 2636
解决vue页面注入js修改input值
外部js调用vue中数据以及实例方法
qq_40053972的博客
10-25 2502
vue函数 let v = new Vue({ el: '#app', data: { ywqqid: '123' }, mounted() { window.testFun = this.testFun // 方法赋值给window }, methods: { // vue内部方法 testFun() {} }
vue组件引入外部js同时获取变量，解决重复引入
嘿喵财运旺旺
11-06 1327
vue组件引入外部js同时获取变量 引入文件支持加载成功回调，支持通过字符串变量名获取js文件的变量 /** * 引入js文件 并且获取变量 * @param src js路径 * @param variableName 需要获取的变量名 * @param callback */ export const importJs = (src, variableName = '', callback = '') => { if (!isInclude(src)) { // 避免重复引入
Vue中向js中传递参数并在js中定义对象并转换参数
BADAO_LIUMANG_QIZHI的博客
07-30 1417
场景 有下面这种主从表结构 上面的信息是主表的信息，下面是从表的信息。 在Vue中将页面的信息传递到js的方法中，在js方法中将参数进行转换使其与后台接收的参数相匹配。 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 在vue中调用新增按钮并传递主从表的页面数据 addBcgl(this.form, this.bcglXiangXiLi...
vue在引入外部js文件时可以使用this的方法
我的米饭
11-26 3622
在使用iview的table组件时，需要从外部引入column.js文件，发现在外部文件种无法使用 this，参考了一下网上的文章，写了以下方法
vue.js 修改赋值变量问题
weixin_43179346的博客
03-16 541
最近使用vue.js发现修改赋值的变量，原变量的数据也随之改变了。在vue中，数组和对象传递都是引用传递。赋值时传递的并不是值，而是指向了同一个空间。
Vue项目修改文本脚本
抚首
04-26 569
📒 博客首页：✎﹏ℳ๓敬坤的博客 🎈 😊 我只是一个代码的搬运工 🎃 🎉 欢迎来访的读者关注、点赞和收藏 🤞 😉有问题可以私信交流 😆 📃 文章标题：Vue项目修改文本脚本 🖍 Vue项目修改文本脚本需求是通过命令修改文本 需求是通过命令修改文本 在项目开发的过程中会有测试环境和正式环境的区别，而正式环境和测试环境会有一些域名以及变量的区别。而修改这些变量程序员去修改没什么问题，但是如果让第三个人去修改就会比较麻烦，这个时候我们就可以通过命令去修改配置文件，这样就算是不熟悉项目的人也可以去修改了 环境.
怎么在vue中引入外部js
最新发布
03-20
### 如何在Vue项目中正确引入外部JS文件 #### 方法一：通过`import`语句引入 如果外部JS文件是一个遵循ES6模块化的文件，则可以通过`import`语句将其导入到Vue组件中。例如： ```javascript // 外部JS文件 example.js const submitForm = function(formName, vueObject) { let val; vueObject.$refs[formName].validate((valid) => { if (valid) { val = valid; } else { val = false; } }); return val; }; export { submitForm }; ``` 在Vue组件中可以这样引入并使用该函数： ```javascript import { submitForm } from './path/to/example'; methods: { handleFormSubmission() { const result = submitForm('myForm', this); console.log(result); } } ``` 这种方法适用于需要按需加载的功能模块[^2]。 --- #### 方法二：通过HTML `<script>`标签全局引入 对于一些不支持模块化或者希望在整个应用范围内可用的库，可以在`public/index.html`文件中直接通过`<script>`标签引入这些资源。这种方式使得所引入的内容成为全局变量的一部分，在任何地方都可以访问而无需显式导入。 ```html <!-- public/index.html --> <head> ... <script src="/static/js/globalLibrary.js"></script> <!-- 假设路径如此 --> </head> ``` 之后可以直接利用这个全局定义的对象或方法，比如假设globalLibrary.js暴露了一个名为`GlobalFunction`的方法: ```javascript created() { GlobalFunction(); } ``` 此方式适合于那些不需要动态加载且被频繁使用的第三方工具类库[^3]。 --- #### 方法三：挂载至Vue原型链上实现全局调用 当某些功能逻辑较为复杂又不想每次都需要单独import的时候，可以选择将它们附加到Vue实例的prototype属性上来达到整个应用程序范围内的可访问性目的。 首先创建一个专门用于初始化此类插件的服务端入口文件plugins.js： ```javascript // plugins.js import Vue from 'vue'; import * as UtilityFunctions from '@/utils/utility'; UtilityFunctions.forEach(fn => Vue.prototype[`$${fn.name}`] = fn); ``` 接着修改main.js来确保它被执行： ```javascript import Vue from 'vue'; import App from './App.vue'; import './plugins'; // 加载自定义插件 new Vue({ render: h => h(App), }).$mount('#app'); ``` 现在就可以像下面这样简单地调用了： ```javascript this.$someUtilityMethod(); ``` 这种模式特别有利于保持代码的一致性和减少重复劳动量[^1]。 --- #### 方法四：转换JSON数据为CSV并通过点击事件触发下载链接生成 这里给出另一个实用的例子——把前端接收到的数据结构导出成易于分享的形式如Excel表格(csv格式)，这通常涉及到操作DOM节点以及Blob API 的运用。 先准备辅助性的utility函数jsonToCsv.js如下所示： ```javascript function JSonToCSV(options){ var uri='data:text/csv;charset=utf-8,'+ encodeURIComponent(options.data.map(row=> Object.values(row).join(",")).join("\n")); var link=document.createElement("a"); link.setAttribute("href",uri); link.setAttribute("download",options.fileName||"output.csv"); document.body.appendChild(link); link.click(); } export default {setDataConver : JSonToCSV}; ``` 随后只需简单的配置即可完成任务： ```javascript import JSonToCSV from '../helper/jsonToCsv' methods:{ downLoadEvent(){ if (!this.formData.json) { alert("Please provide JSON data."); return ; } try{ let parsedData=JSON.parse(this.formData.json); JSonToCSV.setDataConver({ data:parsedData, fileName:'example_output' }); }catch(err){ console.error(`Invalid JSON provided ${err.message}`); } } } ``` 上述过程展示了如何优雅地处理业务需求的同时维持良好的用户体验[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值