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>

。。。