首页 前端知识 vue中引入js脚本块或者js文件 js函数 js方法

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

2024-06-24 23:06:31 前端知识 前端哥 721 46 我要收藏

一、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>

。。。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13479.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!