为什么 Vue.js 模板不能交互它的脚本？

Question

我将 vue.js 与 axios 一起使用，并且在单击某个按钮时尝试进行 ajax 调用。 我的问题是我的按钮的 onclick 事件找不到它的功能。 有人可以向我解释为什么我的模板不能在我的视图中与我的脚本交互吗？

这是我要实现的目标的简短示例。

例子.vue

<template>
    <button onclick="someClickFunction();"></button>
</template>

<script>
    function someClickFunction(){
        console.log("You've pressed the button");
    }

    export default {
        name: "button-view",
    }
</script>

<style scoped>
</style>

Answer 1

在 vue 中，你必须在方法对象和 onclick == @click 中编写函数

<template>
        <button @click="someClickFunction();"></button>
    </template>

    <script>
        export default {
            name: "button-view",
            methods: {
              someClickFunction(){
                console.log("You've pressed the button");
              }
            }
        }
    </script>

    <style scoped>
    </style>

Answer 2

那是因为在 vue 中，你不使用原生的 onclick 事件。

相反，您使用

v-on:click

或者

@click

最好检查文档。 它写得很透彻https://v2.vuejs.org/v2/guide/events.html

编辑：您的脚本也有错误。 所有函数都必须在 vue 实例的方法中声明