Vue.js报错：'openNav'与'closeNav'已定义但未使用问题咨询

Looks like you're running into a scope issue with your openNav and closeNav functions, plus there's a conflict in how you're structuring your Vue component. Let's break this down and fix it step by step.

Core Issues #

1. You're mixing a global new Vue() instance with single-file component (SFC) syntax. In Vue SFCs, you don't need to manually create a global Vue instance—export default is how you define component options, and Vue CLI handles mounting it for you.
2. Native onclick handlers look for functions in the global scope, but your navigation functions aren't properly exposed there (and using native handlers isn't the Vue way anyway).

Solution 1: Use Vue's Method Binding (Recommended) #

The cleanest approach is to move your navigation functions into the component's methods object and use Vue's @click directive (syntax sugar for v-on:click) to bind events. This keeps everything within the component's scope and follows Vue best practices.

Corrected Template (HTML Part)

<template>
  <div id="app">
    <span style="font-size:30px;cursor:pointer;" @click="openNav">&#9776;</span>
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>
      <a href="#">{{ name1 }}</a>
      <a href="#">{{ name2 }}</a>
      <a href="#">{{ name3 }}</a>
      <a href="#">{{ name4 }}</a>
    </div>
  </div>
</template>

Corrected Script (JS Part)

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name1: 'name 1',
      name2: 'name 2',
      name3: 'name 3',
      name4: 'name 4'
    }
  },
  methods: {
    openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    },
    closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
  }
}

Solution 2: Expose Functions to Global Scope (Not Recommended) #

If you absolutely need to keep using native onclick handlers, you can attach your component methods to the global window object when the component mounts. Note that this pollutes the global scope and isn't ideal for Vue apps, but it works as a quick fix:

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name1: 'name 1',
      name2: 'name 2',
      name3: 'name 3',
      name4: 'name 4'
    }
  },
  mounted() {
    // Make methods accessible to native onclick handlers
    window.openNav = this.openNav;
    window.closeNav = this.closeNav;
  },
  methods: {
    openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    },
    closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
  }
}

Bonus: Add CSS for Proper Sidebar Behavior #

Don't forget to include this CSS to make your sidebar animate and position correctly:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

内容的提问来源于stack exchange，提问作者RandomName142