Var app new vue ошибка

**App.vue:****






    <template>
      <div id="app" v-cloack>
        <img src="./assets/999.jpg">
        <h1>{{ msg }}</h1>
        <ul>
          <input type="file" ref="myFile" @change="selectedFile"><br/>
          <textarea v-model="text"></textarea>
      </div>
    </template>


    <script>
    //import HelloWorld from './components/HelloWorld';
    //import main from './main.js';
    export default {
      name: 'app',
      data: ()=> {
        //
          return{
              msg: 'Datei uploaden'

          }
      },
    }
    </script>

    <style>

    </style>'''





**main.js:**




    import Vue from 'vue'
    import App from './App.vue'
    import vuetify from './plugins/vuetify';

    Vue.config.productionTip = false
    Vue.config.devtools = false;
    export default {
      name: 'app',
      data: ()=> {
      var app;
      app =new Vue({

    el: '#app',
    vuetify,
    render: h => h(App),
    data: {
      text:''
    },

    methods:{
        selectedFile() {
          console.log('selected a file');
          console.log(this.$refs.myFile.files[0]);

          let file = this.$refs.myFile.files[0];
          if(!file || file.type !== 'text/plain') return;

          // Credit: https://stackoverflow.com/a/754398/52160
          let reader = new FileReader();
          reader.readAsText(file, "UTF-8");
          reader.onload =  evt => {
            this.text = evt.target.result;
          }
          reader.onerror = evt => {
            console.error(evt);
          }

        }
    }
  })
  }
}
//.$mount('#app')

1

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

• 
  Вопрос задан

  более трёх лет назад
  

• 425 просмотров

Пригласить эксперта

• 
  Показать ещё
  Загружается…
  

var vm = new Vue({
  // опции
})

Корневой экземпляр
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

// Наш объект data
var data = { a: 1 }
// Объект добавляется в экземпляр Vue
var vm = new Vue({
  data: data
})
// Получение свойства из экземпляра
// возвращает то же значение из исходных данных
vm.a === data.a // => true
// Изменение свойства экземпляра
// влияет на оригинальные данные
vm.a = 2
data.a // => 2



  


                       
  



// ... и наоборот
data.a = 3
vm.a // => 3

vm.b = 'hi'

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

var obj = {
  foo: 'bar'
}
Object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- мы теперь не можем обновить `foo`! -->
  <button v-on:click="foo = 'baz'">Изменить</button>
</div>

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch — это метод экземпляра
vm.$watch('a', function (newValue, oldValue) {
  // Этот коллбэк будет вызван, когда изменится `vm.a`
})

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` указывает на экземпляр vm
    console.log('Значение a: ' + this.a)
  }
})
// => "Значение a: 1"

В настоящее время я пытаюсь создать компонент Vue.js. Когда я запускаю приложение, появляется ошибка. Сообщение об ошибке, как показано ниже:

<template>
    <div class="hello" id="app">
         <span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>

        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#">{{name1}}</a>
            <a href="#">{{name2}}</a>
            <a href="#">{{name3}}</a>
            <a href="#">{{name4}}</a>

            <div id="bottom">
                <input v-model="name1" style="margin-left: 25px;max-width: 50%;">
                <input v-model="name2" style="margin-left: 25px;max-width: 50%;">
                <input v-model="name3" style="margin-left: 25px;max-width: 50%;">
                <input v-model="name4" style="margin-left: 25px;max-width: 50%;">
            </div>

        </div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit velit, dictum in urna et,
            vulputate ornare sapien. Phasellus sed metus sed dolor hendrerit iaculis.
            Cras eget libero sit amet massa aliquet dignissim. Vivamus faucibus lorem sit amet semper luctus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In at placerat
            felis,
            id finibus mauris. Proin maximus orci quis lacus pellentesque, ac dignissim sapien vestibulum. Maecenas
            pharetra
            vulputate semper.
            Suspendisse potenti. Donec nisi nisi, aliquam eget felis euismod, semper dictum ligula.
            Aenean mauris enim, iaculis vel malesuada vel, pulvinar et risus. Fusce sit amet orci eget diam commodo
            ultricies sed vel elit.
            Curabitur quis scelerisque est.</p>
    </div>
</template>

<script>
    //Vue App
    var app = new Vue({
        el: '#app',
        data: {
            /*
            navlink: [
                {id: 1, link: "https://www.tfbern.ch"}, 
                {id: 2, link: "https://www.tfbern.ch"},
                {id: 3, link: "https://www.tfbern.ch"},
                {id: 4, link: "https://www.tfbern.ch"}
                ]
            */

            name1: 'name 1',
            name2: 'name 2',
            name3: 'name 3',
            name4: 'name 4'
        }
    })
    export default {
        name: 'NavigationDrawer',
        props: {
            msg: String
        }
    }

    //Navbar Animation
   /* 
   function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0"; -->
    }
     */
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Навигационно- Drawer.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <App msg="test">
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import App from './components/Navigation-Drawer.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
    App
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue

Это ошибки от Eslint. См. https://eslint.org/docs/rules/no-unused-vars и https://eslint.org/docs/rules/no-undef для деталей.

Чтобы удалить эти ошибки, добавьте эту строку непосредственно перед строкой, в которой вы инициализируете приложение.

    // eslint-disable-next-line
    var app = new Vue({ 
    // rest of the code 

Убедитесь, что строка с eslint-disable-next-line закомментирована. Это скажет эслинту игнорировать эту строку, а не задерживать ее.

CLI должен был создать файл с именем main.js. Там у вас будет что-то вроде этого, создающее новый экземпляр Vue:

new Vue({
  render: h => h(App)
}).mount('#app')

Он может использовать свойство el вместо вызова mount и может упоминать store или router, если вы решили включить их при создании проекта. Это не имеет значения, главное, что именно здесь создается корневой экземпляр Vue. Если вы не пишете нетипичное приложение, вам не нужно использовать new Vue снова. Вы, конечно, не должны использовать его внутри .vue файла.

App, указанный в коде, который я написал выше, должен быть компонентом App.vue, который должен быть импортирован ранее в main.js.

Тогда есть твой App.vue. Эта строка немного странная:

import App from './components/Navigation-Drawer.vue'

Технически это не так, но это действительно сбивает с толку. Переименуйте App в более разумное, например, NavigationDrawer. Вам нужно будет обновлять везде, где он используется, включая шаблон.

Далее Navigation-Drawer.vue. Здесь есть несколько проблем.

Во-первых, избавьтесь от id="app" в шаблоне, который просто не должен присутствовать и может вызвать проблемы.

Чтобы реализовать onclick="openNav()" в Vue, вместо этого вы должны написать @click="openNav", а затем определить openNav в разделе methods компонента.

Секция скрипта должна выглядеть примерно так:

<script>
    export default {
        name: 'NavigationDrawer',

        props: {
            msg: String
        },

        // Note that this is a function when used on a component
        data () {
            return {
                name1: 'name 1',
                name2: 'name 2',
                name3: 'name 3',
                name4: 'name 4'
            }
        },

        methods: {
            openNav() {
                console.log('openNav called')
            },

            closeNav() {
                console.log('closeNav')
            }
        }
    }
</script>

Надеюсь, этого будет достаточно, чтобы все заработало.

Первоначальные ошибки распечатки были вызваны тем, что:

1. Вы создавали переменную с именем app, но никогда не использовали ее.
2. Вы пытались позвонить new Vue, но не импортировали Vue. В общем, вам нужно импортировать вещи, если вы хотите иметь доступ к ним из файла .vue.

Однако ошибки в связывании были лишь побочными эффектами более серьезных проблем, которые я изложил выше.

var router = new VueRouter({
    mode: 'history',
    base: '/account/',
    linkActiveClass: 'active',
    meta: {
        permission: 'any',
        fail: '/',
    },
    routes: [
        {
            path: '/contribution',
            component: contribution,
            meta: {
                permission: 'any',
                fail: '/',
            },
        },
        {
            path: '/deposits',
            component: deposits,
            meta: {
                permission: 'any',
                fail: '/',
            },
        },
        {
            path: '/withdraw',
            component: withdraw,
            meta: {
                permission: 'any',
                fail: '/',
            },
        },
        {
            path: '/settings',
            component: settings,
            meta: {
                permission: 'any',
                fail: '/',
            },
        }
    ]
});

var app = new Vue({
    el: '#app',
    router: router,
    ......