vuejs2 onclick不会调用已定义的方法函数

Question

很简单，但似乎不起作用。一定是因为我是VueJS的新手。我下载了这个仓库https://github.com/creotip/vue-particles。因为我想使用这种风格创建一个正在建设的页面。

问题：我需要在右上角创建一个汉堡菜单图标，点击后会调用隐藏的方法并显示div（非常基本的东西）。我已经关注了vue JS教程以及人们对堆栈溢出的看法，但我不能让我的模板与该方法对话。

当我点击汉堡包按钮时，我一直得到＆＃34; _vm.hello不是一个功能＆＃34;。我究竟做错了什么？请看截图。必须有一些简单的东西来解决这个问题。

下面是我的代码： -

app.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

<强> App.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 Single File Components。

清洁解决方案

vue-cli为您提供了一个工作启动模板，其中包含babel和webpack所有预配置。只需创建一个vue项目并根据需要更改模板。

1. 安装Vue-CLI
2. vue创建我的项目
3. npm run dev

快速解决方案

如果您不想使用编译器，只需按照以下方式实现：

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>