繁体   English   中英

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

[英]vuejs2 onclick will not call defined method function

非常简单,但似乎不起作用。 一定是因为我是 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')
    }
  }
})

截屏

在此处输入图像描述

您需要将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结帐演示

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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM