vuejs2 onclick 不會調用定義的方法函數

Question

非常簡單，但似乎不起作用。 一定是因為我是 VueJS 的新手。 我下載了這個 repo https://github.com/creotip/vue-particles 。 因為我想使用這種樣式創建一個正在建設的頁面。

問題：我需要在右上角創建一個漢堡菜單圖標，單擊它會調用一個隱藏和顯示 div 的方法（非常基本的東西）。 我已經遵循了 vue JS 教程以及人們對堆棧溢出的看法，但我無法讓我的模板與該方法對話。

當我單擊漢堡包按鈕時，我不斷收到“_vm.hello 不是函數”。 我究竟做錯了什么？ 請看截圖。 必須有一些簡單的方法來解決這個問題。

這是我的代碼的樣子：-

應用程序.vue

<template>
  <div id="app">
    <div class="wrap-banner">
      <div class="button_container" @click="hello()">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
  </div>
</template>

main.js

import Vue from 'vue'
import App from './App'
import Home from './components/home'

Vue.use(Home)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  methods: {
    hello: function() {
        alert('hello')
    }
  }
})

截屏

Answer 1

您需要將hello方法移動到App.vue

應用程序.vue

   <template>
  <div id="app">
   <div class="wrap-banner">
      <div class="button_container" @click="hello">
        Demo Panel
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    hello: function() {
      alert("hello");
    }
  }
};
</script>

main.js

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

在https://codesandbox.io/s/8y5yzv00nj結帳演示

Answer 2

Vue 文件架構

您需要注意，一個 Vue 文件通常包含 3 個組件（HTML、Js 和 CSS）。 然后需要使用編譯器（例如 babel）處理該文件，以使其對瀏覽器可讀。 有關更多信息，請參閱Vue 單文件組件。

清潔解決方案

vue-cli 為您提供了一個工作的入門模板，其中 babel 和 webpack 都已預先配置。 只需創建一個 vue 項目並根據需要更改模板。

1. 安裝Vue-CLI
2. vue 創建我的項目
3. npm 運行開發

快速解決方案

如果您不想使用編譯器，只需按如下方式實現它：

 new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { hello: function() { alert('hello') } } })

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> <button @click="hello()">Click me</button> </div>