vue中引入js脚本块或者js文件 js函数 js方法

一、vue中,使用js函数的方法

在vue文件中,如果想要在组件里,通过事件触发,调用到函数,这个函数需要放在特定的位置,如下:

<script>
export default {methods: {t1(){},t2(){},t3(){}}
}
</script>

例如用户点击,通过 click 事件触发,调用 t1 函数,需要像上面这样写,否则找不到这个函数。

函数需要写在 methods:{} 里,methods写在 export default{} 里,export default{} 写在 <script>标签里。

注:记得把 <script> 标签放在 html 代码的下方,以防加载顺序问题。

整个vue文件内容如下:

test1.vue

<template><div class="top-title" v-if="myDivIsShow"><input class='btn' type="button" value="按钮" @click="t1" /></div>
</template><script>
export default {methods: {t1(){},t2(){},t3(){}}
}
</script>
<style lang="less" scoped>.top-title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}.btn {border-radius: 2px;margin-right: 0;margin-left: 10px;}
</style>

 

二、vue中,引入js文件的方法

例如,在 test1.vue 文件中,需要引入 test.js,(vue文件和js文件放在同一个目录下)

在 html 文件中,是这样写的:

<script type="text/javascript" src="test.js"></script>

但在vue文件中,这样写不会生效。

需要这样写:

先将 js 文件中的函数前面加上export,即:

export function t1(){}

再在 vue 文件中,<script>标签里使用 import 导入函数

<script>import { t1 } from './test.js'
</script>

花括号里的变量名需要和 js 文件中的函数名一致。

如果想要在组件中,通过事件调用 t1 这个函数,需要在 methods 添加一个函数来调用,不能直接在组件里绑定t1这个函数。

像这样写:

<template><div class="top-title" v-if="myDivIsShow"><input class='btn' type="button" value="按钮" @click="f1" /></div>
</template><script>
import { t1 } from './test.js'export default {methods: {f1(){t1()},}
}
</script>

。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为设备WLAN基础配置

WLAN基础配置之AP上线 配置WLAN无线网络的第一阶段&#xff0c;AP上线技术&#xff1a; 实验目标&#xff1a;使得AP能够获得来自AC的DHCP地址服务的地址&#xff0c;且是该网段地址池中的IP。 实验步骤&#xff1a; 1.把AC当作三层交换机配置虚拟网关 sys Enter system view…

安卓CardView使用

目录 前言一、基础使用1.1 依赖导入1.2 CardView的常用属性1.3 CardView继承关系 二、关于Z轴的概念三、CardView效果3.1 圆角 CardView3.2 阴影 CardView3.3 设置卡片背景3.4 设置卡片背景&#xff08;内部颜色&#xff09;3.5 同时设置背景颜色 前言 CardView是Android支持库…

安卓调试问题记录

将之前Qt开发安卓时遇到的一些报错记录下 问题1 FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring root project ‘android-build’. ​ >Could not resolve all files for configuration ‘:classpath’. ​ >Could not dow…

ubuntu rk3399 自启脚本

systemd 默认读取 /etc/systemd/system 下的配置文件&#xff0c;该目录下的文件会链接/lib/systemd/system/下的文件。 执行 ls /lib/systemd/system 你可以看到有很多启动脚本&#xff0c;其中就有我们需要的 rc.local.service 打开脚本内容&#xff08;如果没有就创建&…

WXML模板语法-数据绑定

1.数据绑定的基本原则 (1)在data中定义数据 (2)在WXML中使用数据 2.在data页面中定义数据&#xff1a;在页面对应的.js文件中&#xff0c;把数据定义在data对象中即可 &#xff08;这里打错了 应该是数组类型的数据... 报意思啊&#xff09; 3.Mustache语法的格式 把data中的…

低代码开发平台:开启企业数字化转型的快捷通道

低代码开发平台&#xff08;Low-Code Development Platform&#xff09;是近年来企业数字化转型中备受瞩目的技术工具&#xff0c;其被誉为加速业务上线的利器。随着信息技术的迅猛发展&#xff0c;企业对于数字化的需求与日俱增&#xff0c;但传统的软件研发流程往往耗时耗力&…

MATLAB|【免费】融合正余弦和柯西变异的麻雀优化算法SCSSA-CNN-BiLSTM双向长短期记忆网络预测模型

目录 主要内容 部分代码 部分结果一览 下载链接 主要内容 该程序实现多输入单输出预测&#xff0c;通过融合正余弦和柯西变异改进麻雀搜索算法&#xff0c;对CNN-BiLSTM的学习率、正则化参数以及BiLSTM隐含层神经元个数等进行优化&#xff0c;并对比了该改进算法…

PHP质量工具系列之phpunit

安装 composer require phpunit/phpunit --dev编写用咧 单元测试 以下是一个thinkphp6/8的示例&#xff0c;可根据实际情况修改&#xff0c;一般是放在项目目录的tests文件夹中&#xff0c;tests文件夹和public同级 <?php declare (strict_types 1);namespace tests;u…

摄像头应用测试

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…

LLM 大模型学习必知必会系列(八):10分钟微调专属于自己的大模型

LLM 大模型学习必知必会系列(八)&#xff1a;10分钟微调专属于自己的大模型 1.环境安装 # 设置pip全局镜像 (加速下载) pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ # 安装ms-swift pip install ms-swift[llm] -U# 环境对齐 (通常不需要运行. …

Linux 信号捕捉与处理

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;Linux知识分享⏪   &#x1f69a;代码仓库:Linux代码练习&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Linux知识   &#x1f51d; ​ 目录 前言 1. 信号的处理时机 1.1用户…

【排版问题解决】word加入公式时字间距突然变大

出现以下问题 解决方案 第一步:选择段落 第二步 段落括起来后右键选择“段落”- 第三步 “换行和分页”-在换行里打勾“允许西文在单词中间换行”。 恢复格式

vue.js状态管理和服务端渲染

状态管理 vuejs状态管理的几种方式 组件内管理状态&#xff1a;通过data&#xff0c;computed等属性管理组件内部状态 父子组件通信&#xff1a;通过props和自定义事件实现父子组件状态的通信和传递 事件总线eventBus&#xff1a;通过new Vue()实例&#xff0c;实现跨组件通…

LP-MSPM03507学习资料汇总

(因对MSPM0研究不够深入,故暂不开启浏览权限,权当记录学习。但愿尽快掌握供大家免费阅读。有意者可私信我共同学习) 一、延时函数 1、滴答定时器SYSTICK 1.1 SysConfig配置 配置1ms延时函数,并开启中断 1.2 编写延时函数delay_ms unsigned int utick = 0;//滴答定时器中…

57. UE5 RPG 处理AI敌人转向以及拾取物品的问题

在上一篇文章中&#xff0c;我们实现了使用AI行为树控制敌人进行移动&#xff0c;它们可以一直跟随玩家&#xff0c;虽然现在还未实现攻击。但在移动过程中&#xff0c;我发现了有两个问题&#xff0c;第一个是敌人转向的时候很僵硬&#xff0c;可以说是瞬间转向的&#xff0c;…

Vue3实战笔记(39)—封装页脚组件,附源码

文章目录 前言一、封装页脚组件二、使用组件总结 前言 在Web开发中&#xff0c;页脚组件是一个重要的部分&#xff0c;它为用户提供关于网站的信息、导航链接以及版权声明等。而封装页脚组件则是一种高效的方法&#xff0c;可以提高代码的可重用性和可维护性。 一、封装页脚组…

重生之我要精通JAVA--第五周笔记

文章目录 APIJDK7时间Date时间类CalendarSimpleDateFormat 类SimpleDateFormat 类作用 JDK8时间Zoneld时区 包装类Integer成员方法 Arrays Lambda表达式标准格式注意点好处省略写法 集合进阶Collection迭代器遍历Collection集合获取迭代器Iterator中的常用方法细节注意点 增强f…

c++/c语法基础【2】

目录 1.memset 数组批量赋值 2.字符数组 ​编辑输入输出: 字符数组直接输入输出%s: gets! string.h 1.strlen:字符串去掉末尾\0的长度

机器学习势系列教程(3):cp2k的安装

大家好&#xff0c;我是小马老师。 本文继续介绍机器学习势相关内容&#xff1a;cp2k的安装。 和abacus一样&#xff0c;cp2k也是一款开源的第一性原理模拟软件&#xff0c;模拟的数据也可作为机器学习势的训练数据集。 cp2k安装方法也很多&#xff0c;常见的有docker安装、…

2024年中国电机工程学会杯数学建模思路 - 案例:最短时间生产计划安排

# 前言 2024电工杯(中国电机工程学会杯)数学建模思路解析 最新思路更新(看最新发布的文章即可): https://blog.csdn.net/dc_sinor/article/details/138726153 最短时间生产计划模型 该模型出现在好几个竞赛赛题上&#xff0c;预测2022今年国赛也会与该模型相关。 1 模型描…