Vue.js中<script>最外层定义的函数和变量是怎么调用的

在Vue.js中，<script>标签最外层定义的函数和变量可以通过以下方式调用：

1. Vue实例中的methods属性：在Vue实例中，可以通过methods属性定义一系列方法，然后在模板中通过{{}}或v-on指令调用这些方法，例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button v-on:click="changeMessage">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, world!'
    }
  }
}
</script>

在上面的例子中，通过methods属性定义了一个名为changeMessage的方法，然后在模板中通过v-on指令调用了这个方法。

2. 在<template>标签中直接调用：在<template>标签中，可以直接调用<script>标签中定义的函数和变量，例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button v-on:click="changeMessage">Click me!</button>
    <p>{{ greet('Vue.js') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, world!'
    },
    greet(name) {
      return 'Hello, ' + name + '!'
    }
  }
}
</script>

在上面的例子中，在模板中直接调用了greet方法。

总之，在Vue.js中，<script>标签最外层定义的函数和变量可以随意调用。