Я только что установил Vue и следовал нескольким руководствам по созданию проекта с использованием шаблона vue-cli webpack. Когда он создает компонент, я замечаю, что он связывает наши данные внутри следующего:
export default {
name: 'app',
data: []
}
В то время как в других руководствах я вижу привязку данных из:
new Vue({
el: '#app',
data: []
)}
В чем разница и почему кажется, что синтаксис между ними отличается? Мне не удается заставить работать «новый код Vue» из тега, который я использую из App.vue, созданного vue-cli.
vue.js
vue-component
vue-cli
rockzombie2
источник
источник
Ответы:
Когда вы заявляете:
Обычно это ваш корневой экземпляр Vue, от которого происходит остальная часть приложения. Это зависает от корневого элемента, объявленного в html-документе, например:
Другой синтаксис - это объявление компонента, который может быть зарегистрирован и повторно использован позже. Например, если вы создаете один файловый компонент, например:
Позже вы можете импортировать это и использовать как:
Кроме того, не забудьте объявить свои
data
свойства как функции, иначе они не будут реагировать.источник
main.js
- на самом деле не имеет значения, просто знайте, что это начальная точка приложения, подобно тому, как файлыint main()
C.Component.vue
всегда будут использоватьexport default { ... }
синтаксис. Документация хорошо объясняет различия между компонентами, глобальными , локальными и одиночнымиexport default
используется для создания локальной регистрации для компонента Vue.Вот отличная статья, которая объясняет больше о компонентах https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
источник
Первый case (
export default {...}
) - это синтаксис ES2015, позволяющий сделать определение объекта доступным для использования.Второй case (
new Vue (...)
) - это стандартный синтаксис для создания экземпляра определенного объекта.Первый будет использоваться в JS для загрузки Vue, в то время как любой из них может использоваться для создания компонентов и шаблонов.
См. Https://vuejs.org/v2/guide/components-registration.html для получения дополнительной информации.
источник
Когда бы вы ни использовали
и какой-то объект
указанное выше вы можете импортировать куда угодно, используя
import
или,module.js
и там вы можете использовать someobject. Это не ограничение, что какой-то объект будет объектом, только он может быть функцией, классом или объектом.Когда ты говоришь
как ты говорил
Здесь вы запускаете объект класса Vue.
Надеюсь, мой ответ объясняет ваш запрос в целом и более подробно.
источник