Создайте пользовательский компонент в Vue. js - PullRequest
Новая
       24

Создайте пользовательский компонент в Vue. js

0 голосов
/ 08 мая 2020

Я сейчас изучаю JavaScript, HTML и Vue. Js, а теперь как работать с компонентами. Я прохожу онлайн-курс по исправлению кода с помощью бота.

Назначение - создать компонент greet, который производит <div>hello!</div> при его вызове с использованием <greet></greet>. Для выполнения задания мне нужно использовать клавиши Vue.Component и templete. Мне нужно установить el -значение на new Vue -caller, чтобы оно соответствовало <div id="app"></div>

Это пока что в моем HTML коде (со скриптом sr c в комплекте): 

<body>
    <div id="app">
      <greet="greet"></greet>
    </div>
  </body>

Пока это мой код Vue 

new Vue({ el: '#app' })
Vue.component('greet', {
  data() {
    return {
      greet
    }
  },
  template: '<div>hello!</div>'
})

Вывод на странице HTML просто пустой, поэтому я не понимаю, что мне здесь не хватает .

Результат работы бота: 

file.js
    ✓ exists
    ✓ is valid JavaScript
    1) renders the correct markup

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Когда вы используете синтаксис Vue .component (), вы регистрируете компонент глобально, поэтому он может использоваться любыми новыми Vue экземплярами, созданными впоследствии. Итак: 

new Vue({ el: '#app' }) // this Vue instance does not contain the greet component because it does not exists yet. 
Vue.component('greet', {
  data() {
    return {

    }
  },
  template: '<div>hello!</div>'
})

Вместо: 

Vue.component('greet', {
  data() {
    return {

    }
  },
  template: '<div>hello!</div>'
})

new Vue({ el: '#app' }) // this Vue instance will contain the greet component because it was already created and registered.

Также <greet="greet"></greet> не является допустимым синтаксисом. Это должно быть <greet></greet>.

Вы должны удалить приветствие из функции data (). в нем нет смысла и смысла.

Окончательный код должен выглядеть так: 

<body>
    <div id="app">
      <greet></greet>
    </div>
</body>


Vue.component('greet', {
  template: '<div>hello!</div>'
})

new Vue({ el: '#app' })
0 голосов
/ 08 мая 2020

Здесь есть пара ошибок.

Первый <greet="greet"></greet> не работает. Там что-то называется props в vue (вы узнаете об этом в будущем). Измените эту строку на <greet></greet>
Тогда вам не нужно использовать data() для отображения hello div. Удалите greet из данных.
Вышеуказанные шаги могут исправить вашу ошибку

...